4570310249

Build Type

github

Committed by GitHub

Commit Message

Merge 706fc4ccc into d83615b3c

Pull Request Pull Request #440: Instructions

Run Details

457 of 927 branches covered (49.3%)

Branch coverage included in aggregate %.

39 of 45 new or added lines in 7 files covered. (86.67%)

51 existing lines in 2 files now uncovered.

3223 of 4920 relevant lines covered (65.51%)

599.37 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

50.0

/frontend/src/Project/Instructions/CellTypeInstructions.js

import AddIcon from '@mui/icons-material/Add';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import ClearIcon from '@mui/icons-material/Clear';
import ColorizeIcon from '@mui/icons-material/Colorize';
import EggAltIcon from '@mui/icons-material/EggAlt';
import ManageSearchIcon from '@mui/icons-material/ManageSearch';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import PreviewIcon from '@mui/icons-material/Preview';
import SquareRoundedIcon from '@mui/icons-material/SquareRounded';
import { Box, Button, Grid, IconButton } from '@mui/material';
import Checkbox from '@mui/material/Checkbox';
import Chip from '@mui/material/Chip';
import Slider from '@mui/material/Slider';
import Typography from '@mui/material/Typography';
import { useState } from 'react';

function CellTypeInstructions() {
  const [editIcon, setEditIcon] = useState(0);
  return (
    <Box>
      <Typography>
        Assign cell types to segmented cells with the Cell Types tab.
        <br />
        One specifies the cell type labels for each feature (segmentation mask) independently.
        <br />
        Note that this labeling feature is still{' '}
        <b style={{ color: 'red' }}>very much in development</b>. A list of current features and
        notable limitations and such is documented here.
      </Typography>
      <br />
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Typography variant='h5'>Important Limitations / Notes</Typography>
          <ul>
            <li>
              {' '}
              Overlaps are not supported for cell type editing due to optimization issues. Make sure
              that your data is in a format such that the segmentation mask pixels have a 1 to 1
              mapping with cell IDs.{' '}
            </li>
            <li>
              Cells can be added to multiple cell types. Be careful not to unintentionally do this,
              as the canvas cannot render mixes particularly intuitively. This is especially
              important if you use the training functionality, as this will assume that every cell
              belongs to one class.
            </li>
          </ul>
        </Grid>
        <Grid item xs={12}>
          <Typography variant='h5'>Cell Type Controls</Typography>
        </Grid>
        <Grid item xs={12}>
          <Typography>
            Controls for manually annotating cell type labels can be found on the left side panel.{' '}
          </Typography>
        </Grid>
        <Grid item xs={12}>
          <Typography variant='h6'>Adding, Editing, and Removing Cell Types</Typography>
        </Grid>
        <Grid item xs={3}>
          <Button
            variant='contained'
            startIcon={
              <AddIcon
                sx={{
                  position: 'relative',
                  top: -0.3,
                  left: -5,
                }}
              />
            }
            size='large'
            sx={{
              height: '2.5rem',
              width: '100%',
              fontWeight: 'bold',
              fontSize: 14,
            }}
          >
            Add Cell Type
          </Button>
        </Grid>
        <Grid item xs={9}>
          <Typography sx={{ marginTop: 0.5 }}>
            Click the <b>Add Cell Type</b> button and select the color you want associated with the
            cell type.
          </Typography>
        </Grid>
        <Grid item xs={1}>
          <IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
            <MoreVertIcon />
          </IconButton>
        </Grid>
        <Grid item xs={11}>
          <Typography sx={{ marginTop: 0.5 }}>
            Clicking the 3 dots on the right of each cell type card allows you to <b>edit</b> the
            name of the cell type or <b>delete</b> the cell type.
          </Typography>
        </Grid>
        <Grid item xs={1}>
          <IconButton
            onMouseEnter={() => setEditIcon(100)}
            onMouseLeave={() => setEditIcon(0)}
            size='large'
            sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}
          >
            <SquareRoundedIcon
              sx={{
                position: 'absolute',
                fontSize: 35,
                color: 'rgb(50,230,100)',
              }}
            />
            <ColorizeIcon
              sx={{
                position: 'relative',
                color: 'white',
                fontSize: 20,
                opacity: editIcon,
              }}
            />
          </IconButton>
        </Grid>
        <Grid item xs={11}>
          <Typography sx={{ marginTop: 0.5 }}>
            Clicking the <b>color indicator</b> square on the left of each card allows you to edit
            the associated color of the cell type.
          </Typography>
        </Grid>
        <Grid item xs={12}>
          <Typography variant='h6'>Labeling Cells</Typography>
        </Grid>
        <Grid item xs={1}>
          <IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
            <EggAltIcon sx={{ fontSize: 16 }} />
            <AddIcon
              sx={{
                position: 'absolute',
                fontSize: 10,
                marginBottom: '-1.5em',
                marginRight: '-2em',
              }}
            />
          </IconButton>
        </Grid>
        <Grid item xs={11}>
          <Typography sx={{ marginTop: 0.5 }}>
            Click the <b>Add Cells</b> button to enter Add Mode, where clicking any cell on the
            canvas twice will label that cell.
          </Typography>
        </Grid>
        <Grid item xs={1}>
          <IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
            <EggAltIcon sx={{ fontSize: 16 }} />
            <ClearIcon
              sx={{
                position: 'absolute',
                fontSize: 10,
                marginBottom: '-1.5em',
                marginRight: '-2em',
              }}
            />
          </IconButton>
        </Grid>
        <Grid item xs={11}>
          <Typography sx={{ marginTop: 0.5 }}>
            Click the <b>Remove Cells</b> button to enter Remove Mode, where clicking any cell twice
            will remove the label from that cell.
          </Typography>
        </Grid>
        <Grid item xs={1}>
          <IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
            <CheckCircleOutlineIcon sx={{ fontSize: 16 }} />
          </IconButton>
        </Grid>
        <Grid item xs={11}>
          <Typography sx={{ marginTop: 0.5 }}>
            Click the <b>Done</b> button or hit <kbd>Esc</kbd> to exit either mode.
          </Typography>
        </Grid>
        <Grid item xs={1}>
          <IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
            <ManageSearchIcon
              sx={{
                fontSize: 18,
              }}
            />
          </IconButton>
        </Grid>
        <Grid item xs={11}>
          <Typography sx={{ marginTop: -0.5 }}>
            To aid with cell type labeling, the <b>Match Markers</b> button will attempt to fuzzy
            match the name of the cell type with a hard-coded marker panel and its corresponding
            positive channels that are present in the current image.
          </Typography>
        </Grid>
        <Grid item xs={1}>
          <IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
            <PreviewIcon
              sx={{
                fontSize: 18,
              }}
            />
          </IconButton>
        </Grid>
        <Grid item xs={11}>
          <Typography sx={{ marginTop: -0.5 }}>
            If the matched cell type name and channels look correct, click the <b>Open Channels</b>{' '}
            button to automatically open the expected marker positive channels for the current
            image.
          </Typography>
        </Grid>
        <Grid item xs={12}>
          <Typography variant='h6'>Other Cell Type Components</Typography>
        </Grid>
        <Grid item xs={1}>
          <Checkbox
            defaultChecked
            sx={{
              width: '100%',
              color: 'rgb(50,230,100)',
              '&.Mui-checked': {
                color: 'rgb(50,230,100)',
              },
              borderRadius: 1,
              boxShadow: 1,
            }}
          />
        </Grid>
        <Grid item xs={11}>
          <Typography>
            The <b>cell type toggle</b> controls whether a color is displayed on the canvas or not.{' '}
            <br />
            There is also a <b>Toggle All</b> button to perform this operation across all cell
            types.
          </Typography>
        </Grid>
        <Grid item xs={1} sx={{ display: 'flex' }}>
          <Slider
            defaultValue={50}
            sx={{
              width: '100%',
              color: 'rgb(50,230,100)',
              '& .MuiSlider-thumb': {
                height: 15,
                width: 15,
              },
            }}
            size='small'
          />
        </Grid>
        <Grid item xs={11}>
          <Typography>
            Adjust the <b>opacity slider</b> to specify the opacity of a specific cell type on the
            canvas from 10% to 80%. Outlines will remain at 100%.
          </Typography>
        </Grid>
        <Grid item xs={1}>
          <Chip size='small' label={100} sx={{ width: '100%' }} />
        </Grid>
        <Grid item xs={11}>
          <Typography>
            The <b>cell count indicator</b> represents the number of cells in a given cell type
          </Typography>
        </Grid>
      </Grid>
    </Box>
  );
}

export default CellTypeInstructions;

1	import AddIcon from '@mui/icons-material/Add';
2	import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
3	import ClearIcon from '@mui/icons-material/Clear';
4	import ColorizeIcon from '@mui/icons-material/Colorize';
5	import EggAltIcon from '@mui/icons-material/EggAlt';
6	import ManageSearchIcon from '@mui/icons-material/ManageSearch';
7	import MoreVertIcon from '@mui/icons-material/MoreVert';
8	import PreviewIcon from '@mui/icons-material/Preview';
9	import SquareRoundedIcon from '@mui/icons-material/SquareRounded';
10	import { Box, Button, Grid, IconButton } from '@mui/material';
11	import Checkbox from '@mui/material/Checkbox';
12	import Chip from '@mui/material/Chip';
13	import Slider from '@mui/material/Slider';
14	import Typography from '@mui/material/Typography';
15	import { useState } from 'react';
16
17	function CellTypeInstructions() {
18	const [editIcon, setEditIcon] = useState(0);	2✔
19	return (	2✔
20	<Box>
21	<Typography>
22	Assign cell types to segmented cells with the Cell Types tab.
23	<br />
24	One specifies the cell type labels for each feature (segmentation mask) independently.
25	<br />
26	Note that this labeling feature is still{' '}
27	<b style={{ color: 'red' }}>very much in development</b>. A list of current features and
28	notable limitations and such is documented here.
29	</Typography>
30	<br />
31	<Grid container spacing={3}>
32	<Grid item xs={12}>
33	<Typography variant='h5'>Important Limitations / Notes</Typography>
34	<ul>
35	<li>
36	{' '}
37	Overlaps are not supported for cell type editing due to optimization issues. Make sure
38	that your data is in a format such that the segmentation mask pixels have a 1 to 1
39	mapping with cell IDs.{' '}
40	</li>
41	<li>
42	Cells can be added to multiple cell types. Be careful not to unintentionally do this,
43	as the canvas cannot render mixes particularly intuitively. This is especially
44	important if you use the training functionality, as this will assume that every cell
45	belongs to one class.
46	</li>
47	</ul>
48	</Grid>
49	<Grid item xs={12}>
50	<Typography variant='h5'>Cell Type Controls</Typography>
51	</Grid>
52	<Grid item xs={12}>
53	<Typography>
54	Controls for manually annotating cell type labels can be found on the left side panel.{' '}
55	</Typography>
56	</Grid>
57	<Grid item xs={12}>
58	<Typography variant='h6'>Adding, Editing, and Removing Cell Types</Typography>
59	</Grid>
60	<Grid item xs={3}>
61	<Button
62	variant='contained'
63	startIcon={
64	<AddIcon
65	sx={{
66	position: 'relative',
67	top: -0.3,
68	left: -5,
69	}}
70	/>
71	}
72	size='large'
73	sx={{
74	height: '2.5rem',
75	width: '100%',
76	fontWeight: 'bold',
77	fontSize: 14,
78	}}
79	>
80	Add Cell Type
81	</Button>
82	</Grid>
83	<Grid item xs={9}>
84	<Typography sx={{ marginTop: 0.5 }}>
85	Click the <b>Add Cell Type</b> button and select the color you want associated with the
86	cell type.
87	</Typography>
88	</Grid>
89	<Grid item xs={1}>
90	<IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
91	<MoreVertIcon />
92	</IconButton>
93	</Grid>
94	<Grid item xs={11}>
95	<Typography sx={{ marginTop: 0.5 }}>
96	Clicking the 3 dots on the right of each cell type card allows you to <b>edit</b> the
97	name of the cell type or <b>delete</b> the cell type.
98	</Typography>
99	</Grid>
100	<Grid item xs={1}>
101	<IconButton
NEW 102	onMouseEnter={() => setEditIcon(100)}	×
NEW 103	onMouseLeave={() => setEditIcon(0)}	×
104	size='large'
105	sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}
106	>
107	<SquareRoundedIcon
108	sx={{
109	position: 'absolute',
110	fontSize: 35,
111	color: 'rgb(50,230,100)',
112	}}
113	/>
114	<ColorizeIcon
115	sx={{
116	position: 'relative',
117	color: 'white',
118	fontSize: 20,
119	opacity: editIcon,
120	}}
121	/>
122	</IconButton>
123	</Grid>
124	<Grid item xs={11}>
125	<Typography sx={{ marginTop: 0.5 }}>
126	Clicking the <b>color indicator</b> square on the left of each card allows you to edit
127	the associated color of the cell type.
128	</Typography>
129	</Grid>
130	<Grid item xs={12}>
131	<Typography variant='h6'>Labeling Cells</Typography>
132	</Grid>
133	<Grid item xs={1}>
134	<IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
135	<EggAltIcon sx={{ fontSize: 16 }} />
136	<AddIcon
137	sx={{
138	position: 'absolute',
139	fontSize: 10,
140	marginBottom: '-1.5em',
141	marginRight: '-2em',
142	}}
143	/>
144	</IconButton>
145	</Grid>
146	<Grid item xs={11}>
147	<Typography sx={{ marginTop: 0.5 }}>
148	Click the <b>Add Cells</b> button to enter Add Mode, where clicking any cell on the
149	canvas twice will label that cell.
150	</Typography>
151	</Grid>
152	<Grid item xs={1}>
153	<IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
154	<EggAltIcon sx={{ fontSize: 16 }} />
155	<ClearIcon
156	sx={{
157	position: 'absolute',
158	fontSize: 10,
159	marginBottom: '-1.5em',
160	marginRight: '-2em',
161	}}
162	/>
163	</IconButton>
164	</Grid>
165	<Grid item xs={11}>
166	<Typography sx={{ marginTop: 0.5 }}>
167	Click the <b>Remove Cells</b> button to enter Remove Mode, where clicking any cell twice
168	will remove the label from that cell.
169	</Typography>
170	</Grid>
171	<Grid item xs={1}>
172	<IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
173	<CheckCircleOutlineIcon sx={{ fontSize: 16 }} />
174	</IconButton>
175	</Grid>
176	<Grid item xs={11}>
177	<Typography sx={{ marginTop: 0.5 }}>
178	Click the <b>Done</b> button or hit <kbd>Esc</kbd> to exit either mode.
179	</Typography>
180	</Grid>
181	<Grid item xs={1}>
182	<IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
183	<ManageSearchIcon
184	sx={{
185	fontSize: 18,
186	}}
187	/>
188	</IconButton>
189	</Grid>
190	<Grid item xs={11}>
191	<Typography sx={{ marginTop: -0.5 }}>
192	To aid with cell type labeling, the <b>Match Markers</b> button will attempt to fuzzy
193	match the name of the cell type with a hard-coded marker panel and its corresponding
194	positive channels that are present in the current image.
195	</Typography>
196	</Grid>
197	<Grid item xs={1}>
198	<IconButton sx={{ width: '100%', borderRadius: 1, boxShadow: 1 }}>
199	<PreviewIcon
200	sx={{
201	fontSize: 18,
202	}}
203	/>
204	</IconButton>
205	</Grid>
206	<Grid item xs={11}>
207	<Typography sx={{ marginTop: -0.5 }}>
208	If the matched cell type name and channels look correct, click the <b>Open Channels</b>{' '}
209	button to automatically open the expected marker positive channels for the current
210	image.
211	</Typography>
212	</Grid>
213	<Grid item xs={12}>
214	<Typography variant='h6'>Other Cell Type Components</Typography>
215	</Grid>
216	<Grid item xs={1}>
217	<Checkbox
218	defaultChecked
219	sx={{
220	width: '100%',
221	color: 'rgb(50,230,100)',
222	'&.Mui-checked': {
223	color: 'rgb(50,230,100)',
224	},
225	borderRadius: 1,
226	boxShadow: 1,
227	}}
228	/>
229	</Grid>
230	<Grid item xs={11}>
231	<Typography>
232	The <b>cell type toggle</b> controls whether a color is displayed on the canvas or not.{' '}
233	<br />
234	There is also a <b>Toggle All</b> button to perform this operation across all cell
235	types.
236	</Typography>
237	</Grid>
238	<Grid item xs={1} sx={{ display: 'flex' }}>
239	<Slider
240	defaultValue={50}
241	sx={{
242	width: '100%',
243	color: 'rgb(50,230,100)',
244	'& .MuiSlider-thumb': {
245	height: 15,
246	width: 15,
247	},
248	}}
249	size='small'
250	/>
251	</Grid>
252	<Grid item xs={11}>
253	<Typography>
254	Adjust the <b>opacity slider</b> to specify the opacity of a specific cell type on the
255	canvas from 10% to 80%. Outlines will remain at 100%.
256	</Typography>
257	</Grid>
258	<Grid item xs={1}>
259	<Chip size='small' label={100} sx={{ width: '100%' }} />
260	</Grid>
261	<Grid item xs={11}>
262	<Typography>
263	The <b>cell count indicator</b> represents the number of cells in a given cell type
264	</Typography>
265	</Grid>
266	</Grid>
267	</Box>
268	);
269	}
270
271	export default CellTypeInstructions;

vanvalenlab / deepcell-label / 4570310249

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous