ehtool: streamline proofreading UI and slice traversal workflow

Author: akgohain

client/src/views/EHTool.js

@@ -1,10 +1,8 @@
 import React, { useState, useEffect } from "react";
-import { Layout, Typography } from "antd";
-import { BugOutlined } from "@ant-design/icons";
+import { Layout } from "antd";
 import DetectionWorkflow from "./ehtool/DetectionWorkflow";
 
 const { Content } = Layout;
-const { Title, Text } = Typography;
 
 /**
  * EHTool Main Component
@@ -36,25 +34,6 @@ function EHTool({
   return (
     <Layout style={{ height: "100%", background: "#f6f8fb" }}>
       <Content style={{ padding: "20px 24px" }}>
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 10,
-            marginBottom: 12,
-          }}
-        >
-          <BugOutlined style={{ fontSize: 18, color: "#1677ff" }} />
-          <div>
-            <Title level={5} style={{ margin: 0 }}>
-              Mask Proofreading
-            </Title>
-            <Text type="secondary" style={{ fontSize: 12 }}>
-              Review and correct instances in your volume.
-            </Text>
-          </div>
-        </div>
-
         <DetectionWorkflow
           sessionId={sessionId}
           setSessionId={setSessionId}

client/src/views/ehtool/DatasetLoader.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Card, Form, Input, Button, message, Space, Typography } from "antd";
+import { Card, Form, Input, Button, Modal, Space, Typography } from "antd";
 import { FolderOpenOutlined, UploadOutlined } from "@ant-design/icons";
 import UnifiedFileInput from "../../components/UnifiedFileInput";
 
@@ -12,22 +12,57 @@ const { Title, Text } = Typography;
 function DatasetLoader({ onLoad, loading }) {
   const [form] = Form.useForm();
 
-  const handleSubmit = (values) => {
-    const datasetPath =
-      typeof values.datasetPath === "object"
-        ? values.datasetPath.path
-        : values.datasetPath;
-    const maskPath =
-      typeof values.maskPath === "object"
-        ? values.maskPath.path
-        : values.maskPath;
+  const resolvePath = (value) => {
+    if (!value) return "";
+    if (typeof value === "string") return value.trim();
+    return (value.path || value.folderPath || "").trim();
+  };
+
+  const showValidationError = (title, description) => {
+    Modal.error({
+      title,
+      content: description,
+      okText: "Got it",
+    });
+  };
+
+  const handleSubmit = async (values) => {
+    const datasetPath = resolvePath(values.datasetPath);
+    const maskPath = resolvePath(values.maskPath);
+    const projectName = (values.projectName || "").trim();
+
+    if (!projectName) {
+      showValidationError(
+        "Project name required",
+        "Please provide a name for this proofreading session.",
+      );
+      return;
+    }
 
     if (!datasetPath) {
-      message.error("Please provide a dataset path");
+      showValidationError(
+        "Dataset path required",
+        "Select a dataset file/folder before starting the session.",
+      );
       return;
     }
 
-    onLoad(datasetPath, maskPath, values.projectName || "Untitled Project");
+    if (datasetPath.includes("..") || maskPath.includes("..")) {
+      showValidationError(
+        "Invalid path",
+        "Paths containing '..' are not allowed. Please pick a direct file/folder path.",
+      );
+      return;
+    }
+
+    try {
+      await onLoad(datasetPath, maskPath, projectName || "Untitled Project");
+    } catch (error) {
+      showValidationError(
+        "Failed to load dataset",
+        "Unable to start proofreading with the provided paths. Check the selected files and try again.",
+      );
+    }
   };
 
   return (
@@ -75,16 +110,11 @@ function DatasetLoader({ onLoad, loading }) {
           label="Dataset Path"
           name="datasetPath"
           rules={[{ required: true, message: "Please enter dataset path" }]}
-          help="File, directory, or glob (e.g., /path/to/images/*.tif)"
         >
           <UnifiedFileInput placeholder="/path/to/dataset" />
         </Form.Item>
 
-        <Form.Item
-          label="Mask Path (Optional)"
-          name="maskPath"
-          help="Mask file or directory (optional)"
-        >
+        <Form.Item label="Mask Path (Optional)" name="maskPath">
           <UnifiedFileInput placeholder="/path/to/masks" />
         </Form.Item>
 
@@ -101,13 +131,6 @@ function DatasetLoader({ onLoad, loading }) {
           </Button>
         </Form.Item>
       </Form>
-
-      <div style={{ marginTop: 16 }}>
-        <Text type="secondary" style={{ fontSize: 12 }}>
-          Supported: single TIFF (2D/3D), image folders (PNG/JPG/TIFF), or glob
-          patterns like `*.tif`.
-        </Text>
-      </div>
     </Card>
   );
 }