Merge pull request #72 from PytorchConnectomics/simplify-visualize-ui

simplify workflow of upload input and label images, visualize in ng, then segment them

Author: samcraftt

client/src/components/InputSelector.js

@@ -41,9 +41,8 @@ function InputSelector(props) {
       >
         <Form.Item label='Input Image'>
           <Select
-            allowClear
             style={{ width: '100%' }}
-            placeholder='Please select'
+            placeholder='Please upload to the left'
             onChange={handleImageChange}
             value={context.inputImage ? context.inputImage.uid : undefined}
             options={context.imageFileList.map((file) => ({
@@ -55,9 +54,8 @@ function InputSelector(props) {
         </Form.Item>
         <Form.Item label='Input Label'>
           <Select
-            allowClear
             style={{ width: '100%' }}
-            placeholder='Please select'
+            placeholder='Please upload to the left'
             onChange={handleLabelChange}
             value={context.inputLabel ? context.inputLabel.uid : undefined}
             options={context.labelFileList.map((file) => ({

client/src/views/DataLoader.js

@@ -1,37 +1,40 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { Dragger } from '../components/Dragger'
-import { Button, Input, Select, Space, Typography } from 'antd'
-import { ArrowRightOutlined } from '@ant-design/icons'
+import { Button, Input, Space, Typography, Upload } from 'antd'
+import { InboxOutlined, EyeOutlined } from '@ant-design/icons'
 import { AppContext } from '../contexts/GlobalContext'
 import './DataLoader.css'
 
 const { Title } = Typography
 
 function DataLoader (props) {
   const context = useContext(AppContext)
-  const [currentImage, setCurrentImage] = useState(null)
-  const [currentLabel, setCurrentLabel] = useState(null)
   const [scales, setScales] = useState('30,6,6')
   const { fetchNeuroglancerViewer } = props
 
   const handleVisualizeButtonClick = async (event) => {
     event.preventDefault()
-    context.setCurrentImage(currentImage)
-    context.setCurrentLabel(currentLabel)
     fetchNeuroglancerViewer(
-      currentImage,
-      currentLabel,
+      context.currentImage,
+      context.currentLabel,
       scales.split(',').map(Number)
     )
   }
-  const handleImageChange = (value) => {
-    console.log(`selected ${value}`)
-    setCurrentImage(context.files.find((image) => image.uid === value))
-  }
-  const handleLabelChange = (value) => {
-    console.log(`selected ${value}`)
-    setCurrentLabel(context.files.find((file) => file.uid === value))
-  }
+
+  const handleImageChange = (info) => {
+    const { file } = info
+    if (file) {
+      context.setInputImage(file)
+      context.setCurrentImage(file)
+    }
+  };
+
+  const handleLabelChange = (info) => {
+    const { file } = info
+    if (file) {
+      context.setInputLabel(file)
+      context.setCurrentLabel(file)
+    }
+  };
 
   const handleInputScales = (event) => {
     setScales(event.target.value)
@@ -56,36 +59,37 @@ function DataLoader (props) {
       align='start'
       style={{ margin: '7px', display: 'flex' }}
     >
-      <Dragger />
       <Title level={5} style={{ marginBottom: '-5px' }}>
         Image
       </Title>
-      <Select
+      <Upload.Dragger
+        multiple={false}
+        maxCount={1}
         onChange={handleImageChange}
-        options={context.imageFileList.map((file) => ({
-          label: file.name,
-          value: file.uid
-        }))}
-        style={{ width: '185px' }}
-        placeholder='Select image'
-        size='middle'
-        allowClear
-      />
+      >
+        <p className='ant-upload-drag-icon'>
+          <InboxOutlined />
+        </p>
+        <p className='ant-upload-text'>
+          Drag image here, or click to upload
+        </p>
+      </Upload.Dragger>
 
       <Title level={5} style={{ marginTop: '0px', marginBottom: '-5px' }}>
         Label
       </Title>
-      <Select
+      <Upload.Dragger
+        multiple={false}
+        maxCount={1}
         onChange={handleLabelChange}
-        options={context.labelFileList.map((file) => ({
-          label: file.name,
-          value: file.uid
-        }))}
-        style={{ width: '185px' }}
-        placeholder='Select label'
-        size='middle'
-        allowClear
-      />
+      >
+        <p className='ant-upload-drag-icon'>
+          <InboxOutlined />
+        </p>
+        <p className='ant-upload-text'>
+          Drag label here, or click to upload
+        </p>
+      </Upload.Dragger>
 
       <Title level={5} style={{ marginTop: '0px', marginBottom: '-5px' }}>
         Scales
@@ -99,7 +103,7 @@ function DataLoader (props) {
       <Button
         type='primary'
         onClick={handleVisualizeButtonClick}
-        icon={<ArrowRightOutlined />}
+        icon={<EyeOutlined />}
         style={{ width: '185px' }}
       >
         Visualize

client/src/views/Views.js

@@ -17,22 +17,19 @@ function Views () {
   const [isLoading, setIsLoading] = useState(false)
   const [isInferring, setIsInferring] = useState(false)
   const [isChatOpen, setIsChatOpen] = useState(false)
-  console.log(viewers)
 
   const onClick = (e) => {
     setCurrent(e.key)
   }
 
   const items = [
     { label: 'Visualization', key: 'visualization' },
-    { label: 'Model Training', key: 'training' },
-    { label: 'Model Inference', key: 'inference' },
-    { label: 'Tensorboard', key: 'monitoring' }
+    { label: 'Model Inference', key: 'inference' }
   ]
 
   const renderMenu = () => {
     if (current === 'visualization') {
-      return <Visualization viewers={viewers} setViewers={setViewers} />
+      return <Visualization viewers={viewers} setViewers={setViewers} setCurrent={setCurrent} />
     } else if (current === 'training') {
       return <ModelTraining />
     } else if (current === 'monitoring') {
@@ -54,10 +51,8 @@ function Views () {
       const viewerId = currentImage.uid + currentLabel.uid + JSON.stringify(scales)
       let updatedViewers = viewers
       const exists = viewers.find(
-        // (viewer) => viewer.key === currentImage.uid + currentLabel.uid
         (viewer) => viewer.key === viewerId
       )
-      // console.log(exists, viewers)
       if (exists) {
         updatedViewers = viewers.filter((viewer) => viewer.key !== viewerId)
       }
@@ -67,7 +62,6 @@ function Views () {
         scales
       )
       const newUrl = res.replace(/\/\/[^:/]+/, '//localhost')
-      console.log('Current Viewer at ', newUrl)
 
       setViewers([
         ...updatedViewers,

client/src/views/Visualization.js

@@ -1,15 +1,14 @@
 import React, { useState } from 'react'
 import { Button, Tabs, Timeline } from 'antd'
 import {
-  ArrowRightOutlined,
-  DownOutlined,
   EyeOutlined,
   InboxOutlined,
-  ReloadOutlined
+  ReloadOutlined,
+  ScissorOutlined
 } from '@ant-design/icons'
 
 function Visualization (props) {
-  const { viewers, setViewers } = props
+  const { viewers, setViewers, setCurrent } = props
   const [activeKey, setActiveKey] = useState(
     viewers.length > 0 ? viewers[0].key : null
   ) // Store the active tab key
@@ -70,22 +69,32 @@ function Visualization (props) {
             onChange={handleChange}
             items={viewers.map((viewer) => ({
               label: (
-                <span>
-                  {viewer.title}
-                  <Button
-                    type='link'
-                    icon={<ReloadOutlined />}
-                    onClick={() => refreshViewer(viewer.key)}
-                  />
-
+                <span style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '16px'}}>
+                  <div>
+                    <Button
+                      type='link'
+                      icon={<ReloadOutlined />}
+                      onClick={() => refreshViewer(viewer.key)}
+                    />
+                    {viewer.title}
+                  </div>
+                  <div style={{ fontColor: 'red' }}>
+                    <Button
+                      type='link'
+                      icon={<ScissorOutlined />}
+                      onClick={() => setCurrent('inference')}
+                    >
+                      Segment it
+                    </Button>
+                  </div>
                 </span>
               ),
               key: viewer.key,
               children: (
                 <iframe
                   title='Viewer Display'
                   width='100%'
-                  height='800'
+                  height='700'
                   frameBorder='0'
                   scrolling='no'
                   src={viewer.viewer}
@@ -101,26 +110,12 @@ function Visualization (props) {
               {
                 children: (
                   <>
-                    <InboxOutlined /> Upload your files
-                  </>
-                )
-              },
-              {
-                children: (
-                  <>
-                    Input folder path of file in <EyeOutlined /> preview
-                  </>
-                )
-              },
-              {
-                children: (
-                  <>
-                    <DownOutlined /> Select your image and label in dropdown menus
+                    <InboxOutlined /> Upload your files to the left
                   </>
                 )
               },
               {
-                children: 'Input scales of image in z,y,x order'
+                children: 'Input image scales in z, y, x order (optional)'
               },
               {
                 children: (
@@ -129,11 +124,11 @@ function Visualization (props) {
                     <Button
                       type='primary'
                       size='small'
-                      icon={<ArrowRightOutlined />}
+                      icon={<EyeOutlined />}
                     >
                       Visualize
                     </Button>{' '}
-                    button to render image and label in Neuroglancer
+                      to render the image and label with Neuroglancer
                   </>
                 )
               }