Merge pull request #129 from PytorchConnectomics/88-improvement-continuous-brush-stroke-interpolation-for-fast-pointer-movement-on-mask-proofreading

88 improvement continuous brush stroke interpolation for fast pointer movement on mask proofreading

Author: akgohain

client/main.js

@@ -54,6 +54,7 @@ function createMenu() {
       label: "Electron",
       submenu: [{ role: "toggleDevTools" }, { role: "quit" }],
     },
+    { role: "editMenu" },
     {
       label: "Edit",
       submenu: [
@@ -140,13 +141,13 @@ function createMenu() {
             ),
         },
         {
-          label: "Worm Error Handling",
+          label: "Mask Proofreading",
           type: "checkbox",
           checked: false,
           click: (menuItem) =>
             mainWindow.webContents.send(
               "toggle-tab",
-              "worm-error-handling",
+              "mask-proofreading",
               menuItem.checked,
             ),
         },

client/src/components/FilePickerModal.js

@@ -10,6 +10,7 @@ import { apiClient } from "../api";
 
 const HIDDEN_SYSTEM_FILES = new Set([
   "workflow_preference.json",
+  ".pytc_proofreading.json",
   ".ds_store",
   "thumbs.db",
 ]);

client/src/components/WorkflowSelector.js

@@ -36,8 +36,8 @@ const WorkflowSelector = ({ visible, onSelect, onCancel }) => {
     { label: "Tensorboard", value: "monitoring", icon: <DashboardOutlined /> },
     { label: "SynAnno", value: "synanno", icon: <ApartmentOutlined /> },
     {
-      label: "Worm Error Handling",
-      value: "worm-error-handling",
+      label: "Mask Proofreading",
+      value: "mask-proofreading",
       icon: <BugOutlined />,
     },
   ];

client/src/views/EHTool.js

@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { Layout } from "antd";
-import { BugOutlined } from "@ant-design/icons";
 import DetectionWorkflow from "./ehtool/DetectionWorkflow";
 
 const { Content } = Layout;
 
 /**
  * EHTool Main Component
- * Error Handling Tool for detecting and classifying errors in image stacks
+ * Mask proofreading workflow for reviewing slices in image stacks
  */
 function EHTool({
   onStartProofreading,
@@ -33,18 +32,8 @@ function EHTool({
   }, [sessionId, onSessionChange]);
 
   return (
-    <Layout style={{ height: "100%", background: "#fff" }}>
-      <Content style={{ padding: "16px" }}>
-        <div style={{ marginBottom: "16px" }}>
-          <h2 style={{ margin: 0 }}>
-            <BugOutlined style={{ marginRight: "8px" }} />
-            Error Handling Tool
-          </h2>
-          <p style={{ color: "#666", marginTop: "4px" }}>
-            Detect and classify errors in image stacks
-          </p>
-        </div>
-
+    <Layout style={{ height: "100%", background: "#f6f8fb" }}>
+      <Content style={{ padding: "20px 24px" }}>
         <DetectionWorkflow
           sessionId={sessionId}
           setSessionId={setSessionId}

client/src/views/FilesManager.js

@@ -27,6 +27,7 @@ import FileTreeSidebar from "../components/FileTreeSidebar";
 
 const HIDDEN_SYSTEM_FILES = new Set([
   "workflow_preference.json",
+  ".pytc_proofreading.json",
   ".ds_store",
   "thumbs.db",
 ]);
@@ -150,7 +151,6 @@ function FilesManager() {
           setServerUnavailable(true);
           if (!hasShownServerWarning && !silentNetworkError) {
             setHasShownServerWarning(true);
-            message.warning("API server is not available yet. Retrying...");
           }
         }
         if (!err.isAuthError && !isNetworkError) {
@@ -797,12 +797,19 @@ function FilesManager() {
         }
         return;
       }
-      if (e.target.tagName === "INPUT") return;
+      const target = e.target;
+      if (
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable)
+      )
+        return;
       if (e.key === "Delete") handleDelete();
       if (e.ctrlKey && e.key === "c") handleCopy();
       if (e.ctrlKey && e.key === "x") handleCut();
       if (e.ctrlKey && e.key === "v") handlePaste();
-      if (e.ctrlKey && e.key === "a") {
+      if ((e.ctrlKey || e.metaKey) && e.key === "a") {
         e.preventDefault();
         const allKeys = [
           ...folders
@@ -1251,29 +1258,6 @@ function FilesManager() {
         position: "relative",
       }}
     >
-      {serverUnavailable && (
-        <div
-          style={{
-            position: "absolute",
-            top: 80,
-            left: 24,
-            right: 24,
-            zIndex: 10,
-          }}
-        >
-          <div
-            style={{
-              padding: 12,
-              background: "#fffbe6",
-              border: "1px solid #ffe58f",
-              borderRadius: 8,
-            }}
-          >
-            API server is not ready yet. File list will load automatically when
-            it comes online.
-          </div>
-        </div>
-      )}
       {isSidebarVisible && (
         <>
           <FileTreeSidebar

client/src/views/WormErrorHandling.js client/src/views/MaskProofreading.jsclient/src/views/WormErrorHandling.js renamed to client/src/views/MaskProofreading.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import EHTool from "./EHTool";
 
-function WormErrorHandling() {
+function MaskProofreading() {
   const [ehToolSession, setEhToolSession] = useState(null);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
 
@@ -20,4 +20,4 @@ function WormErrorHandling() {
   );
 }
 
-export default WormErrorHandling;
+export default MaskProofreading;

client/src/views/ProofReading.js

@@ -32,7 +32,14 @@ function ProofReading() {
   useEffect(() => {
     const handleKeyPress = (e) => {
       // Don't trigger shortcuts when typing in input fields
-      if (e.target.tagName === "INPUT") return;
+      const target = e.target;
+      if (
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable)
+      )
+        return;
 
       switch (e.key.toLowerCase()) {
         case "c":

client/src/views/Views.js

@@ -16,7 +16,7 @@ import ModelTraining from "./ModelTraining";
 import ModelInference from "./ModelInference";
 import Monitoring from "./Monitoring";
 import ProofReading from "./ProofReading";
-import WormErrorHandling from "./WormErrorHandling";
+import MaskProofreading from "./MaskProofreading";
 import WorkflowSelector from "../components/WorkflowSelector";
 import Chatbot from "../components/Chatbot";
 
@@ -48,8 +48,8 @@ function Views() {
     { label: "Tensorboard", key: "monitoring", icon: <DashboardOutlined /> },
     { label: "SynAnno", key: "synanno", icon: <ApartmentOutlined /> },
     {
-      label: "Worm Error Handling",
-      key: "worm-error-handling",
+      label: "Mask Proofreading",
+      key: "mask-proofreading",
       icon: <BugOutlined />,
     },
   ];
@@ -224,7 +224,7 @@ function Views() {
           />,
         )}
         {renderTabContent("synanno", <ProofReading />)}
-        {renderTabContent("worm-error-handling", <WormErrorHandling />)}
+        {renderTabContent("mask-proofreading", <MaskProofreading />)}
       </Content>
       <Drawer
         placement="right"

client/src/views/ehtool/ClassificationPanel.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Card, Button, Space, Divider, Tag } from "antd";
+import { Card, Button, Space, Divider, Tag, Typography } from "antd";
 import {
   CheckCircleOutlined,
   CloseCircleOutlined,
@@ -10,24 +10,30 @@ import {
 
 /**
  * Classification Panel Component
- * Controls for classifying selected layers
+ * Controls for classifying selected slices
  */
 function ClassificationPanel({
   selectedCount,
   onClassify,
   onSelectAll,
   onClearSelection,
 }) {
+  const { Text } = Typography;
+
   return (
     <div style={{ padding: "16px" }}>
       <Card
         title="Classification"
         size="small"
-        style={{ marginBottom: "16px" }}
+        style={{
+          marginBottom: "12px",
+          background: "#fff",
+          boxShadow: "0 6px 20px rgba(15, 23, 42, 0.06)",
+        }}
       >
         <div style={{ marginBottom: "16px" }}>
           <Tag color={selectedCount > 0 ? "blue" : "default"}>
-            {selectedCount} layer{selectedCount !== 1 ? "s" : ""} selected
+            {selectedCount} slice{selectedCount !== 1 ? "s" : ""} selected
           </Tag>
         </div>
 
@@ -38,7 +44,7 @@ function ClassificationPanel({
             onClick={() => onClassify("correct")}
             disabled={selectedCount === 0}
             block
-            style={{ background: "#52c41a", borderColor: "#52c41a" }}
+            style={{ background: "#22c55e", borderColor: "#22c55e" }}
           >
             Correct (C)
           </Button>
@@ -59,17 +65,24 @@ function ClassificationPanel({
             disabled={selectedCount === 0}
             block
             style={{
-              background: "#faad14",
-              borderColor: "#faad14",
-              color: "#fff",
+              background: "#f59e0b",
+              borderColor: "#f59e0b",
+              color: "#1f2937",
             }}
           >
             Unsure (U)
           </Button>
         </Space>
       </Card>
 
-      <Card title="Selection" size="small">
+      <Card
+        title="Selection"
+        size="small"
+        style={{
+          background: "#fff",
+          boxShadow: "0 6px 20px rgba(15, 23, 42, 0.06)",
+        }}
+      >
         <Space direction="vertical" style={{ width: "100%" }} size="small">
           <Button icon={<SelectOutlined />} onClick={onSelectAll} block>
             Select All (Ctrl+A)
@@ -91,12 +104,14 @@ function ClassificationPanel({
       <div
         style={{
           padding: "12px",
-          background: "#f5f5f5",
+          background: "#f8fafc",
           borderRadius: "4px",
           fontSize: "12px",
         }}
       >
-        <h4 style={{ marginTop: 0, fontSize: "13px" }}>Keyboard Shortcuts:</h4>
+        <Text strong style={{ fontSize: 12 }}>
+          Keyboard shortcuts
+        </Text>
         <ul style={{ marginBottom: 0, paddingLeft: "20px" }}>
           <li>
             <kbd>C</kbd> - Mark as Correct