5696281705

pending completion

Build # 5696281705

Build Type

push

github

Committed by

web-flow

Commit Message

Remove cell type selection component when no cell types (#514)

Run Details

480 of 1239 branches covered (38.74%)

Branch coverage included in aggregate %.

0 of 1 new or added line in 1 file covered. (0.0%)

2575 of 4707 relevant lines covered (54.71%)

603.63 hits per line

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

0.0

/frontend/src/Project/EditControls/CellTypeControls/ChannelExpressionUI/AddRemoveCancel.js

import CircleIcon from '@mui/icons-material/Circle';
import { Button, MenuItem, TextField } from '@mui/material';
import Grid from '@mui/material/Grid';
import { useSelector } from '@xstate/react';
import { useState } from 'react';
import { useCellTypes, useEditCellTypes, useLabeled } from '../../../ProjectContext';
import { getColorFromId } from '../CellInfoUI/AddCellTypeChip';

export function getName(cellTypes, id) {
  const type = cellTypes.find((cellType) => cellType.id === id);
  return type.name;
}

function AddRemoveCancel() {
  const cellTypes = useCellTypes();
  const editCellTypes = useEditCellTypes();
  const labeled = useLabeled();
  const feature = useSelector(labeled, (state) => state.context.feature);
  const cellTypesList = useSelector(cellTypes, (state) => state.context.cellTypes).filter(
    (cellType) => cellType.feature === feature
  );
  const selection = useSelector(editCellTypes, (state) => state.context.multiSelected);
  const selecting = selection.length === 0 ? false : true;
  const [cellType, setCellType] = useState(0);
  const cellTypeIds = cellTypesList.map((cellType) => cellType.id);

  const handleCellType = (evt) => {
    setCellType(evt.target.value);
  };

  const handleCancel = () => {
    editCellTypes.send({ type: 'MULTISELECTION', selected: [] });
  };

  const addCellTypes = () => {
    editCellTypes.send({ type: 'MULTIADD', cellType: cellTypeIds[cellType] });
  };

  const removeCellTypes = () => {
    editCellTypes.send({ type: 'MULTIREMOVE', cellType: cellTypeIds[cellType] });
  };

  return cellTypeIds.length > 0 ? (
    <>
      <Grid item>
        <TextField
          select
          size='small'
          value={cellType}
          onChange={handleCellType}
          sx={{ width: '97%' }}
        >
          {cellTypeIds.map((opt, index) => (
            <MenuItem key={index} value={index}>
              <CircleIcon
                sx={{
                  fontSize: 12,
                  color: getColorFromId(cellTypesList, opt),
                  marginLeft: '0rem',
                  marginRight: '1rem',
                }}
              />
              {getName(cellTypesList, opt)}
            </MenuItem>
          ))}
        </TextField>
      </Grid>
      <Grid item sx={{ marginBottom: 1 }}>
        <Button
          sx={{ width: '31%' }}
          disabled={!selecting}
          variant='contained'
          onClick={addCellTypes}
        >
          Add
        </Button>
        <Button
          sx={{
            marginLeft: '2%',
            width: '31%',
            backgroundColor: 'rgba(244,67,54,1)',
            '&:hover': { backgroundColor: 'rgba(224,47,34,1)' },
          }}
          disabled={!selecting}
          variant='contained'
          onClick={removeCellTypes}
        >
          Remove
        </Button>
        <Button
          sx={{
            marginLeft: '2%',
            width: '31%',
            backgroundColor: 'rgba(0,0,0,0.1)',
            color: 'rgba(0,0,0,0.65)',
            '&:hover': { backgroundColor: 'rgba(0,0,0,0.2)' },
          }}
          disabled={!selecting}
          variant='contained'
          onClick={handleCancel}
        >
          Cancel
        </Button>
      </Grid>
    </>
  ) : null;
}

export default AddRemoveCancel;

1	import CircleIcon from '@mui/icons-material/Circle';
2	import { Button, MenuItem, TextField } from '@mui/material';
3	import Grid from '@mui/material/Grid';
4	import { useSelector } from '@xstate/react';
5	import { useState } from 'react';
6	import { useCellTypes, useEditCellTypes, useLabeled } from '../../../ProjectContext';
7	import { getColorFromId } from '../CellInfoUI/AddCellTypeChip';
8
9	export function getName(cellTypes, id) {
10	const type = cellTypes.find((cellType) => cellType.id === id);	×
11	return type.name;	×
12	}
13
14	function AddRemoveCancel() {
15	const cellTypes = useCellTypes();	×
16	const editCellTypes = useEditCellTypes();	×
17	const labeled = useLabeled();	×
18	const feature = useSelector(labeled, (state) => state.context.feature);	×
19	const cellTypesList = useSelector(cellTypes, (state) => state.context.cellTypes).filter(	×
20	(cellType) => cellType.feature === feature	×
21	);
22	const selection = useSelector(editCellTypes, (state) => state.context.multiSelected);	×
23	const selecting = selection.length === 0 ? false : true;	×
24	const [cellType, setCellType] = useState(0);	×
25	const cellTypeIds = cellTypesList.map((cellType) => cellType.id);	×
26
27	const handleCellType = (evt) => {	×
28	setCellType(evt.target.value);	×
29	};
30
31	const handleCancel = () => {	×
32	editCellTypes.send({ type: 'MULTISELECTION', selected: [] });	×
33	};
34
35	const addCellTypes = () => {	×
36	editCellTypes.send({ type: 'MULTIADD', cellType: cellTypeIds[cellType] });	×
37	};
38
39	const removeCellTypes = () => {	×
40	editCellTypes.send({ type: 'MULTIREMOVE', cellType: cellTypeIds[cellType] });	×
41	};
42
NEW 43	return cellTypeIds.length > 0 ? (	×
44	<>
45	<Grid item>
46	<TextField
47	select
48	size='small'
49	value={cellType}
50	onChange={handleCellType}
51	sx={{ width: '97%' }}
52	>
53	{cellTypeIds.map((opt, index) => (
54	<MenuItem key={index} value={index}>	×
55	<CircleIcon
56	sx={{
57	fontSize: 12,
58	color: getColorFromId(cellTypesList, opt),
59	marginLeft: '0rem',
60	marginRight: '1rem',
61	}}
62	/>
63	{getName(cellTypesList, opt)}
64	</MenuItem>
65	))}
66	</TextField>
67	</Grid>
68	<Grid item sx={{ marginBottom: 1 }}>
69	<Button
70	sx={{ width: '31%' }}
71	disabled={!selecting}
72	variant='contained'
73	onClick={addCellTypes}
74	>
75	Add
76	</Button>
77	<Button
78	sx={{
79	marginLeft: '2%',
80	width: '31%',
81	backgroundColor: 'rgba(244,67,54,1)',
82	'&:hover': { backgroundColor: 'rgba(224,47,34,1)' },
83	}}
84	disabled={!selecting}
85	variant='contained'
86	onClick={removeCellTypes}
87	>
88	Remove
89	</Button>
90	<Button
91	sx={{
92	marginLeft: '2%',
93	width: '31%',
94	backgroundColor: 'rgba(0,0,0,0.1)',
95	color: 'rgba(0,0,0,0.65)',
96	'&:hover': { backgroundColor: 'rgba(0,0,0,0.2)' },
97	}}
98	disabled={!selecting}
99	variant='contained'
100	onClick={handleCancel}
101	>
102	Cancel
103	</Button>
104	</Grid>
105	</>
106	) : null;
107	}
108
109	export default AddRemoveCancel;

vanvalenlab / deepcell-label / 5696281705

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