Bug fix core workflow

client/src/components/Dragger.js

@@ -1,11 +1,12 @@
 //  global FileReader
 import React, { useContext, useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { Button, Input, message, Modal, Space, Upload } from 'antd'
-import { InboxOutlined } from '@ant-design/icons'
+import { InboxOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons'
 import { AppContext } from '../contexts/GlobalContext'
 import { DEFAULT_IMAGE } from '../utils/utils'
 import UTIF from 'utif'
 
+import { getNeuroglancerViewer } from '../utils/api'
 const path = require('path')
 
 const ensureTrailingSeparator = (dirPath) => {
@@ -46,7 +47,7 @@ const enrichFileMetadata = (uploadFile) => {
   return enhancedFile
 }
 
-export function Dragger () {
+export function Dragger() {
   const context = useContext(AppContext)
   const {
     setFiles,
@@ -100,6 +101,7 @@ export function Dragger () {
       message.success(`${info.file.name} file uploaded successfully.`)
       const updatedFiles = info.fileList.map(enrichFileMetadata)
       setFiles(updatedFiles)
+
       console.log('done')
     } else if (status === 'error') {
       console.log('error')
@@ -338,19 +340,21 @@ export function Dragger () {
     }
   }, [revokeAllObjectUrls])
 
+  const handleRemove = (file) => {
+    const newFiles = files.filter((f) => f.uid !== file.uid)
+    setFiles(newFiles)
+    revokeObjectUrl(file.uid)
+  }
+
   return (
     <>
       <Upload.Dragger
         multiple
         onChange={onChange}
         customRequest={uploadImage}
         beforeUpload={handleBeforeUpload}
-        onPreview={handlePreview}
-        listType='picture-card'
-        style={{ maxHeight: '20vh', maxWidth: '10vw%' }}
-        itemRender={(originNode, file) => (
-          <div style={listItemStyle}>{originNode}</div>
-        )}
+        showUploadList={false}
+        style={{ padding: '20px 0' }}
       >
         <p className='ant-upload-drag-icon'>
           <InboxOutlined />
@@ -359,7 +363,88 @@ export function Dragger () {
           Click or drag file to this area to upload
         </p>
       </Upload.Dragger>
-      <Button type='default' style={{ width: '185px' }} onClick={handleClearCache}>
+
+      <div style={{
+        marginTop: '16px',
+        maxHeight: '30vh',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px'
+      }}>
+        {files && files.map((file) => (
+          <div
+            key={file.uid}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              border: '1px solid #d9d9d9',
+              borderRadius: '4px',
+              padding: '4px',
+              backgroundColor: '#fafafa',
+              width: '100%',
+              boxSizing: 'border-box'
+            }}
+          >
+            <div style={{
+              width: '32px',
+              height: '32px',
+              marginRight: '8px',
+              flexShrink: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              overflow: 'hidden',
+              border: '1px solid #f0f0f0',
+              borderRadius: '2px',
+              backgroundColor: '#fff'
+            }}>
+              {file.thumbUrl ? (
+                <img
+                  src={file.thumbUrl}
+                  alt={file.name}
+                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                />
+              ) : (
+                <InboxOutlined style={{ fontSize: '16px', color: '#ccc' }} />
+              )}
+            </div>
+
+            <div style={{ flex: 1, minWidth: 0, marginRight: '4px' }}>
+              <div style={{
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                fontWeight: 500,
+                fontSize: '12px'
+              }}>
+                {file.name}
+              </div>
+            </div>
+
+            <Space size={0}>
+              <Button
+                type="text"
+                icon={<EyeOutlined />}
+                onClick={() => handlePreview(file)}
+                size="small"
+                style={{ padding: '0 4px' }}
+              />
+              <Button
+                type="text"
+                danger
+                icon={<DeleteOutlined />}
+                onClick={() => handleRemove(file)}
+                size="small"
+                style={{ padding: '0 4px' }}
+              />
+            </Space>
+          </div>
+        ))}
+      </div>
+
+      <Button type='default' style={{ width: '100%', marginTop: '16px' }} onClick={handleClearCache}>
         Clear File Cache
       </Button>
       <Modal
@@ -368,10 +453,10 @@ export function Dragger () {
         footer={null}
         onCancel={handleCancel}
       >
-        <Space direction='vertical'>
+        <Space direction='vertical' style={{ width: '100%' }}>
           <Space.Compact block>
 
-            <select onChange={handleDropdownChange}>
+            <select onChange={handleDropdownChange} style={{ flex: 1 }}>
               <option value='' disabled selected>Please select input filetype</option>
               <option value='Image'>Image</option>
               <option value='Label'>Label</option>

client/src/components/InputSelector.js

@@ -2,7 +2,7 @@ import { Form, Input, Select } from 'antd'
 import React, { useContext } from 'react'
 import { AppContext } from '../contexts/GlobalContext'
 
-function InputSelector (props) {
+function InputSelector(props) {
   const context = useContext(AppContext)
   const { fileList, type } = props
   console.log(fileList, context.files)
@@ -74,14 +74,26 @@ function InputSelector (props) {
                 style={{
                   width: '100%'
                 }}
-                placeholder='Please type output path'
+                placeholder='Directory for outputs (e.g., /path/to/outputs/)'
                 value={context.outputPath ? context.outputPath : undefined}
                 onChange={handleOutputPathChange}
                 size='middle'
               />
             </Form.Item>
-            )
-          : null}
+          )
+          : (
+            <Form.Item label='Output Path' help='Directory where inference results will be saved'>
+              <Input
+                style={{
+                  width: '100%'
+                }}
+                placeholder='Directory for results (e.g., /path/to/inference_output/)'
+                value={context.outputPath ? context.outputPath : undefined}
+                onChange={handleOutputPathChange}
+                size='middle'
+              />
+            </Form.Item>
+          )}
         {type === 'training'
           ? (
             <Form.Item label='Log Path'>
@@ -95,20 +107,20 @@ function InputSelector (props) {
                 size='middle'
               />
             </Form.Item>
-            )
+          )
           : (
-            <Form.Item label='Checkpoint Path'>
+            <Form.Item label='Checkpoint Path' help='Path to trained model file (.pth.tar)'>
               <Input
                 style={{
                   width: '100%'
                 }}
-                placeholder='Please type checkpoint path'
-                value={context.outputPath ? context.outputPath : undefined}
+                placeholder='Model checkpoint file (e.g., /path/to/checkpoint_00010.pth.tar)'
+                value={context.checkpointPath ? context.checkpointPath : undefined}
                 onChange={handleCheckpointPathChange}
                 size='middle'
               />
             </Form.Item>
-            )}
+          )}
       </Form>
     </div>
   )