Edge config gui

.eslintrc.js

@@ -24,7 +24,7 @@ module.exports = {
 			},
 		},
 		{
-			"files": ["packages/web_ui/src/**/*.jsx", "plugins/*/web/**/*.jsx"],
+			"files": ["web/**/*.jsx"],
 			"env": {
 				"browser": true,
 			},
@@ -33,11 +33,17 @@ module.exports = {
 				"ecmaFeatures": {
 					"jsx": true,
 				},
+				"rules": {
+					"node/no-unpublished-import": "off",
+				},
 			},
 		},
 	],
 
 	"rules": {
+		"node/no-missing-import": ["error", {
+			"tryExtensions": [".js", ".jsx", ".json", ".node"],
+		}],
 		"accessor-pairs": "error",
 		"array-bracket-newline": "off",
 		"array-bracket-spacing": ["error", "never"],
@@ -199,7 +205,7 @@ module.exports = {
 		"no-spaced-func": "error",
 		"no-sync": "error",
 		"node/no-unpublished-bin": "error",
-		"node/no-unpublished-import": "error",
+		"node/no-unpublished-import": "off",
 		"node/no-unpublished-require": [
 			"error",
 			{ "allowModules": ["@clusterio/web_ui", "webpack", "webpack-merge", "webpack-dev-middleware"] },

index.js

@@ -14,6 +14,8 @@ module.exports = {
 		instanceConfigFields: {
 			"edge_transports.internal": {
 				title: "Internal",
+				description: "Edge transports edge configuration",
+				inputComponent: "edge_transports_internal",
 				type: "object",
 				initialValue: { edges: [] },
 			},
@@ -40,5 +42,7 @@ module.exports = {
 		messages: [
 			...Object.keys(messages).map(key => messages[key]),
 		],
+
+		webEntrypoint: "./web",
 	},
 };

package.json

@@ -7,7 +7,7 @@
 		"test": "spaces-to-tabs -s 4 module/**.lua && npm run lint && npm run luacheck",
 		"lint": "eslint \"*.js\" --fix",
 		"luacheck": "luacheck module/",
-		"prepare": "webpack --env production"
+		"prepare": "webpack-cli --env production"
 	},
 	"repository": {
 		"type": "git",
@@ -27,12 +27,15 @@
 		"@clusterio/lib": "^2.0.0-alpha.0"
 	},
 	"devDependencies": {
-		"@babel/preset-react": "^7.12.5",
+		"@ant-design/icons": "^5.3.7",
 		"@clusterio/web_ui": "^2.0.0-alpha.0",
+		"@sinclair/typebox": "^0.30.4",
 		"@swc/core": "^1.4.0",
-		"babel-loader": "^8.2.0",
+		"antd": "^5.13.0",
 		"eslint": "^8.4.1",
 		"eslint-plugin-node": "^11.1.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"spaces-to-tabs": "^0.0.3",
 		"webpack": "^5.88.2",
 		"webpack-cli": "^5.1.4",
@@ -44,4 +47,4 @@
 	"publishConfig": {
 		"access": "public"
 	}
-}
+}

web/components/InputEdgeConfig.jsx

@@ -0,0 +1,239 @@
+import React from "react";
+import { Button, Select, Modal, InputNumber, Divider, Tag, Tooltip, Space } from "antd";
+import PlusOutlined from "@ant-design/icons/PlusOutlined";
+import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
+import { useInstance, useInstanceConfig } from "@clusterio/web_ui";
+import { InstanceSelector } from "./InstanceSelector";
+import { direction_to_string } from "../util";
+
+function EdgeStatusTag({ edge, instanceId = null }) {
+	const [instance] = useInstance(edge.target_instance);
+	const config = useInstanceConfig(edge.target_instance);
+	const target_edge = config?.["edge_transports.internal"]?.edges?.find?.(e => e.id === edge.target_edge);
+	const [targetEdgeTargetInstance] = useInstance(target_edge?.target_instance);
+
+	if (!edge.target_edge) {
+		return <Tag>Incomplete</Tag>;
+	}
+	if (!target_edge) {
+		return <Tooltip title="Target edge not found on destination instance">
+			<Tag color="warning">Missing</Tag>
+		</Tooltip>;
+	}
+	if (instanceId !== null && target_edge.target_instance !== instanceId) {
+		// eslint-disable-next-line max-len
+		return <Tooltip title={`Edge on target instance is targetting incorrect instance (${instance.name} != ${targetEdgeTargetInstance.name})`}>
+			<Tag color="error">Inconsistent</Tag>
+		</Tooltip>;
+	}
+	if (target_edge.target_edge !== edge.id) {
+		// eslint-disable-next-line max-len
+		return <Tooltip title={`Edge on target instance does not have this edge as its target (${target_edge.target_edge})`}>
+			<Tag color="error">Inconsistent</Tag>
+		</Tooltip>;
+	}
+
+	return <Tag color="success">OK</Tag>;
+}
+
+export function InputEdgeConfig({ value, onChange }) {
+	// Shim for clusterio being inconsistent with object vs stringified object handling
+	if (typeof value === "string") {
+		value = JSON.parse(value);
+	}
+
+	const [visible, setVisible] = React.useState(false);
+	const [newValue, setNewValue] = React.useState(value);
+
+	const edges = newValue.edges || [];
+
+	function displayEdge(edge, index) {
+		return <div key={`${index} ${edge.edge?.id}`}>
+			<Divider orientation="right">
+				<Space>
+					<EdgeStatusTag
+						edge={edge}
+					// Clusterio does not currently provide a way for a config input field to access the current
+					// instances ID so I am leaving this code disabled
+					// instanceId={instanceId}
+					/>
+					<Button danger onClick={() => {
+						setNewValue({
+							...newValue, edges: [
+								...edges.slice(0, index),
+								...edges.slice(index + 1),
+							],
+						});
+					}}>
+						<DeleteOutlined />
+					</Button>
+				</Space>
+			</Divider>
+			<EditEdge
+				key={index}
+				edge={edge}
+				onChange={(newEdge) => {
+					setNewValue({
+						...newValue, edges: [
+							...edges.slice(0, index),
+							newEdge,
+							...edges.slice(index + 1),
+						],
+					});
+				}} />
+		</div>;
+	}
+
+	return <>
+		<Button onClick={() => {
+			setNewValue(value);
+			setVisible(true);
+		}}>
+			Configure Edges
+		</Button>
+		<Modal
+			title="Edge Configuration"
+			open={visible}
+			onOk={() => {
+				onChange(JSON.stringify(newValue));
+				setVisible(false);
+			}}
+			onCancel={() => {
+				setVisible(false);
+			}}
+		>
+			{edges.map(displayEdge)}
+			{/* Button to add new edge */}
+			<Button onClick={() => {
+				setNewValue({
+					...newValue, edges: [
+						...edges,
+						{
+							surface: 1,
+							origin: [0, 0],
+							direction: 0,
+							length: 10,
+						},
+					],
+				});
+			}}>
+				<PlusOutlined /> Add Edge
+			</Button>
+		</Modal>
+	</>;
+}
+
+function EditEdge({ edge, onChange }) {
+	const leftProps = {
+		style: {
+			width: "30%",
+			display: "inline-block",
+			verticalAlign: "middle",
+		},
+	};
+	// Fields to edit edge properties
+	return <div>
+		<div>
+			<span {...leftProps}>Edge ID</span>
+			<InputNumber
+				value={edge.id}
+				onChange={(value) => onChange({ ...edge, id: value })}
+			/>
+		</div>
+		<div>
+			<span {...leftProps}>Origin position</span>
+			<InputNumber
+				value={edge.origin?.[0]}
+				formatter={(value) => `x ${value}`}
+				parser={value => value.replace("x ", "")}
+				onChange={(value) => onChange({ ...edge, origin: [value, edge.origin?.[1]] })}
+			/>
+			<InputNumber
+				value={edge.origin?.[1]}
+				formatter={(value) => `y ${value}`}
+				parser={value => value.replace("y ", "")}
+				onChange={(value) => onChange({ ...edge, origin: [edge.origin?.[0], value] })}
+			/>
+		</div>
+		<div>
+			<span {...leftProps}>Surface</span>
+			<InputNumber
+				value={edge.surface}
+				onChange={(value) => onChange({ ...edge, surface: value })}
+			/>
+		</div>
+		<div>
+			<span {...leftProps}>Direction</span>
+			<Select
+				value={edge.direction}
+				onChange={(value) => onChange({ ...edge, direction: value })}
+				style={{ width: "auto", minWidth: "200px" }}
+			>
+				{[0, 2, 4, 6].map(value => <Select.Option key={value} value={value}>
+					{direction_to_string(value)}
+				</Select.Option>)}
+			</Select>
+		</div>
+		<div>
+			<span {...leftProps}>Length</span>
+			<InputNumber
+				value={edge.length}
+				onChange={(value) => onChange({ ...edge, length: value })}
+			/>
+		</div>
+		<div>
+			<span {...leftProps}>Target Instance</span>
+			<InstanceSelector
+				selected={edge.target_instance}
+				onSelect={(value) => onChange({ ...edge, target_instance: value })}
+			/>
+		</div>
+		<div
+			style={{
+				// Prevent children from splitting into 2 lines
+				whiteSpace: "nowrap",
+			}}
+		>
+			<span {...leftProps}>Target Edge</span>
+			<div style={{
+				display: "inline-block",
+				verticalAlign: "middle",
+			}}>
+				<InputNumber
+					value={edge.target_edge}
+					onChange={(value) => onChange({ ...edge, target_edge: value })}
+					style={{
+						width: "75px",
+					}}
+				/>
+			</div>
+			<div style={{
+				display: "inline-block",
+				verticalAlign: "middle",
+				marginLeft: "10px",
+			}}>
+				<TargetEdgeInfo edge={edge} />
+			</div>
+		</div>
+	</div>;
+};
+
+function TargetEdgeInfo({ edge }) {
+	const [instance] = useInstance(edge.target_instance);
+	const config = useInstanceConfig(edge.target_instance);
+	const target_edge = config?.["edge_transports.internal"]?.edges?.find?.(e => e.id === edge.target_edge);
+
+	if (!target_edge) { return ""; }
+
+	let status = "Target has matching configuration";
+	if (target_edge.target_edge !== edge.id) {
+		status = `Target configured to ID ${target_edge.target_edge} instead of ${edge.id}`;
+	}
+
+	// Visualize some information about the target edge to make it easier to pick the right one
+	return <div>
+		<p>Surface {target_edge.surface} at x{target_edge.origin?.[0]}, y{target_edge.origin?.[1]}</p>
+		<p>Pointing {direction_to_string(target_edge.direction)}</p>
+		<p style={{ whiteSpace: "wrap" }}>{status}</p>
+	</div>;
+}

web/components/InstanceSelector.jsx

@@ -0,0 +1,15 @@
+import { Select } from "antd";
+import { useInstances } from "@clusterio/web_ui";
+
+export function InstanceSelector({ selected, onSelect }) {
+	const [instances] = useInstances();
+	return <Select
+		value={selected}
+		onChange={onSelect}
+		style={{ width: "auto", minWidth: "200px" }}
+	>
+		{[...instances.values()].map?.(instance => <Select.Option key={instance.id} value={instance.id}>
+			{instance.name}
+		</Select.Option>)}
+	</Select>;
+};

web/index.jsx

@@ -0,0 +1,11 @@
+import { BaseWebPlugin } from "@clusterio/web_ui";
+import { InputEdgeConfig } from "./components/InputEdgeConfig";
+
+export class WebPlugin extends BaseWebPlugin {
+	async init() {
+		this.pages = [];
+	}
+	inputComponents = {
+		edge_transports_internal: InputEdgeConfig,
+	};
+}

web/util/direction_to_string.jsx

@@ -0,0 +1,20 @@
+export const directions = [
+	"East",
+	"South-east",
+	"South",
+	"South-west",
+	"West",
+	"North-west",
+	"North",
+	"North-east",
+];
+
+export function direction_to_string(direction) {
+	if (direction === undefined) {
+		return "";
+	}
+	if (typeof direction !== "number" || direction < 0 || direction >= 8) {
+		return "unknown";
+	}
+	return directions[direction % 8];
+};

web/util/index.jsx

@@ -0,0 +1 @@
+export * from "./direction_to_string";

webpack.config.js

@@ -18,10 +18,16 @@ module.exports = (env = {}) => merge(common(env), {
 			exposes: {
 				"./": "./index.js",
 				"./package.json": "./package.json",
+				"./web": "./web/index.jsx",
 			},
 			shared: {
 				"@clusterio/lib": { import: false },
 				"@clusterio/web_ui": { import: false },
+				"antd": { import: false },
+				"react": { import: false },
+				"react-dom": { import: false },
+				"react-router": { import: false },
+				"react-router-dom": { import: false },
 			},
 		}),
 	],