Add job forms for Segmentation and Caliban consumers (#186)

* Update data for job types

* Add segmentation and tracking forms

* Remove required channels for segmentation

* Update Polaris input description

* Update example spots image

src/Predict/CalibanForm.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+// import axios from 'axios';
+import ResolutionDropdown from './ResolutionDropdown';
+import jobData from './jobData';
+
+CalibanForm.propTypes = {
+  selectJobType: PropTypes.element.isRequired,
+  setJobForm: PropTypes.func.isRequired,
+};
+
+export default function CalibanForm({ selectJobType, setJobForm }) {
+  const modelResolution = jobData.segmentation.modelResolution;
+  const [scale, setScale] = useState(1);
+
+  useEffect(() => {
+    setJobForm({ scale });
+  }, [scale]);
+
+  return (
+    <Grid container>
+      <Paper sx={{ p: 4, height: '100%', width: '100%' }}>
+        <Grid container spacing={1}>
+          <Grid item md={6}>
+            <Grid container direction={'column'} spacing={1}>
+              {selectJobType}
+              <Grid item lg>
+                <Typography>Image Resolution</Typography>
+                <ResolutionDropdown
+                  modelMpp={modelResolution}
+                  scale={scale}
+                  onChange={setScale}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Paper>
+    </Grid>
+  );
+}

src/Predict/Predict.js

@@ -16,6 +16,8 @@ import ModelDropdown from './ModelDropdown';
 import jobData from './jobData';
 import MesmerForm from './MesmerForm';
 import PolarisForm from './PolarisForm';
+import SegmentationForm from './SegmentationForm';
+import CalibanForm from './CalibanForm';
 
 // get DeepCell Label viewer addresses from the environment.
 // these are defined in public/index.html to allow the server
@@ -331,6 +333,8 @@ export default function Predict() {
               {/* Job Form section */}
               {jobType === 'mesmer' && <MesmerForm selectJobType={selectJobType} setJobForm={setJobForm} />}
               {jobType === 'polaris' && <PolarisForm selectJobType={selectJobType} setJobForm={setJobForm} />}
+              {jobType == 'segmentation' && <SegmentationForm selectJobType={selectJobType} setJobForm={setJobForm} />}
+              {jobType == 'caliban' && <CalibanForm selectJobType={selectJobType} setJobForm={setJobForm} />}
               {/* File Upload section */}
               <Grid container direction="row" justifyContent="center" sx={{ pt: 4 }}>
                 <Paper sx={{ p: 4, height: '100%', width: '100%' }}>

src/Predict/SegmentationForm.js

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+// import axios from 'axios';
+import ResolutionDropdown from './ResolutionDropdown';
+import ChannelForm from './ChannelForm';
+import jobData from './jobData';
+
+SegmentationForm.propTypes = {
+  selectJobType: PropTypes.element.isRequired,
+  setJobForm: PropTypes.func.isRequired,
+};
+
+export default function SegmentationForm({ selectJobType, setJobForm }) {
+  const modelResolution = jobData.segmentation.modelResolution;
+  const channels = ['nuclei', 'cytoplasm'];
+  const [requiredChannels] = useState(Array(channels.length).fill(false));
+  const [selectedChannels, setSelectedChannels] = useState([...Array(channels.length).keys()]);
+  const [scale, setScale] = useState(1);
+
+  const updateSelectedChannels = (value, i) => {
+    setSelectedChannels((selectedChannels) => { 
+      selectedChannels[i] = value;
+      return [...selectedChannels];
+    });
+  };
+
+  useEffect(() => {
+    setJobForm({ scale, selectedChannels: selectedChannels.join(',') });
+  }, [selectedChannels, scale]);
+
+  return (
+    <Grid container>
+      <Paper sx={{ p: 4, height: '100%', width: '100%' }}>
+        <Grid container spacing={1}>
+          <Grid item md={6}>
+            <Grid container direction={'column'} spacing={1}>
+              {selectJobType}
+              <Grid item lg>
+                <Typography>Image Resolution</Typography>
+                <ResolutionDropdown
+                  modelMpp={modelResolution}
+                  scale={scale}
+                  onChange={setScale}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item md={6}>
+            <ChannelForm
+              channels={channels}
+              requiredChannels={requiredChannels}
+              selectedChannels={selectedChannels}
+              onChange={updateSelectedChannels}
+            />
+          </Grid>
+        </Grid>
+      </Paper>
+    </Grid>
+  );
+}

src/Predict/jobData.js

@@ -2,21 +2,21 @@
 const jobCards = {
   segmentation: {
     file: 'nuclei/examples/HeLa_nuclear.png',
-    name: 'Nuclear Segmentation',
-    model: 'The nuclear model performs nuclear segmentation of cell culture data.',
-    inputs: 'A nuclear channel image.',
-    resolution: 'Nuclear Segmentation expects data that is approximately 20X (0.65 μm/pixel)',
+    name: 'Segmentation',
+    model: 'These models perform nuclear and/or whole-cell segmentation of cell culture data.',
+    inputs: 'An image containing nuclear and/or whole-cell label channels.',
+    resolution: 'Segmentation expects data that is approximately 20X (0.65 μm/pixel)',
     thumbnail: 'thumbnails/HeLa_nuclear_color.png',
     scaleEnabled: true,
     channelEnabled: true,
-    requiredChannels: ['nuclei'],
+    requiredChannels: [],
     modelResolution: 0.5,
     canOpenInLabel: true,
   },
   caliban: {
     file: 'tiff_stack_examples/3T3_nuc_example_256.tif',
     name: 'Cell Tracking',
-    model: 'The cell tracking model segments and tracks objects over time and creates a lineage file for division information.',
+    model: 'Caliban segments and tracks objects over time and creates a lineage file for division information.',
     inputs: 'A single-channel image stack (3D TIFF).',
     resolution: 'Cell Tracking expects data that is approximately 20X (0.65 μm/pixel)',
     thumbnail: 'thumbnails/3T3_nuc_example_256.png',
@@ -40,12 +40,12 @@ const jobCards = {
     canOpenInLabel: true,
   },
   polaris: {
-    file: 'tiff_stack_examples/MERFISH_example.tiff',
+    file: 'tiff_stack_examples/MERFISH_example_RGB.png',
     name: 'Polaris',
-    model: 'Polaris performs fluorescent spot detection.',
-    inputs: 'An image containing fluorescent spots generated by smFISH or similar assays. Pixel size of 0.1 μm recommended.',
+    model: 'Polaris performs fluorescent spot detection and can assign spots to segmented cells.',
+    inputs: 'An image containing fluorescent spots generated by smFISH or similar assays. To segment tissue images, include a nuclear channel and a membrance/cytoplasm channel, or to segment cell culture, include a nuclear channel and/or a whole-cell channel. Pixel size of 0.1 μm recommended.',
     resolution: 'Polaris expects data that is approximately 100X (0.1 μm/pixel)',
-    thumbnail: 'thumbnails/FISH_example.png',
+    thumbnail: 'thumbnails/MERFISH_example_RGB.jpeg',
     scaleEnabled: false,
     channelEnabled: false,
     requiredChannels: ['spots'],