4930767286

Build Type

github

Committed by GitHub

Commit Message

Merge 380e4dc8b into 18db3ee56

Pull Request Pull Request #461: Celltype UI toolbar with new toggles

Run Details

459 of 1193 branches covered (38.47%)

Branch coverage included in aggregate %.

17 of 36 new or added lines in 7 files covered. (47.22%)

1 existing line in 1 file now uncovered.

3212 of 5468 relevant lines covered (58.74%)

535.08 hits per line

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

74.29

/frontend/src/Project/service/edit/editCellTypesMachine.js

/**
 * Manages the controls to edit the cell types.
 * Sends ADD_CELL, ADD_CELLTYPE, REMOVE_CELL, REMOVE_CELLTYPE, EDIT_COLOR, and EDIT_NAME to the divisions event bus
 * when interacting with the UI.
 */
import { assign, Machine, send } from 'xstate';
import { pure } from 'xstate/lib/actions';
import { fromEventBus } from '../eventBus';

const createEditCellTypesMachine = ({ eventBuses }) =>
  Machine(
    {
      id: 'editCellTypes',
      invoke: [
        { id: 'select', src: fromEventBus('editCellTypes', () => eventBuses.select, 'SELECTED') },
        { src: fromEventBus('editCellTypes', () => eventBuses.hovering, 'HOVERING') },
        { id: 'cellTypes', src: fromEventBus('editCellTypes', () => eventBuses.cellTypes) },
      ],
      context: {
        selected: null,
        multiSelected: [],
        hovering: null,
        hoveringCard: false,
        mode: 'overwrite',
        cell: null,
        cellType: null,
        name: null,
        color: null,
      },
      on: {
        SELECTED: { actions: 'setSelected' },
        MULTISELECTION: { actions: 'setMultiSelected' },
        HOVERING: { actions: 'setHovering' },
        TOGGLE_HOVER: { actions: 'toggleHoveringCard' },
        SET_MODE: { actions: 'setMode' },
        REMOVE_ONE: { actions: ['setCell', 'setCellType', 'removeCell'] },
        REMOVE_TYPE: { actions: 'removeCellType' },
      },
      initial: 'idle',
      states: {
        idle: {
          on: {
            mouseup: { actions: 'select' },
            ADD: { target: 'addingCell', actions: ['setCellType', 'setName'] },
            MULTIADD: { actions: ['setCellType', 'multiAddCells'] },
            MULTIREMOVE: { actions: ['setCellType', 'multiRemoveCells'] },
            REMOVE_MODE: { target: 'removingCell', actions: ['setCellType', 'setName'] },
            ADD_TYPE: { actions: ['setColor', 'addCellType'] },
            COLOR: { actions: ['setCellType', 'setColor', 'editColor'] },
            NAME: { actions: ['setCellType', 'setName', 'editName'] },
            TOGGLE: { actions: ['setCellType', 'toggleOn'] },
            TOGGLE_ALL: { actions: 'toggleAll' },
            UNTOGGLE_ALL: { actions: 'untoggleAll' },
            OPACITY: { actions: ['setCellType', 'changeOpacity'] },
          },
        },
        addingCell: {
          entry: 'resetCell',
          on: {
            mouseup: [
              { cond: 'onNoCell' },
              { cond: 'shift', actions: 'setCell' },
              { cond: 'onCell', actions: 'addCell' },
              { actions: 'setCell' },
            ],
            COLOR: { actions: ['setCellType', 'setColor', 'editColor'] },
            NAME: { actions: ['setCellType', 'setName', 'editName'] },
            TOGGLE: { actions: ['setCellType', 'toggleOn'] },
            OPACITY: { actions: ['setCellType', 'changeOpacity'] },
            RESET: { target: 'idle' },
          },
        },
        removingCell: {
          entry: 'resetCell',
          on: {
            mouseup: [
              { cond: 'onNoCell' },
              { cond: 'shift', actions: 'setCell' },
              { cond: 'onCell', actions: 'removeCell' },
              { actions: 'setCell' },
            ],
            COLOR: { actions: ['setCellType', 'setColor', 'editColor'] },
            NAME: { actions: ['setCellType', 'setName', 'editName'] },
            RESET: { target: 'idle' },
          },
        },
      },
    },
    {
      services: {},
      guards: {
        onNoCell: (ctx) => ctx.hovering.length === 0,
        shift: (_, evt) => evt.shiftKey,
        onCell: (ctx) => ctx.hovering.includes(ctx.cell),
      },
      actions: {
        select: send('SELECT', { to: 'select' }),
        setSelected: assign({ selected: (_, evt) => evt.selected }),
        setMultiSelected: assign({ multiSelected: (ctx, evt) => evt.selected }),
        setHovering: assign({ hovering: (_, evt) => evt.hovering }),
        toggleHoveringCard: assign({ hoveringCard: (ctx) => !ctx.hoveringCard }),
        setMode: assign({ mode: (_, evt) => evt.mode }),
        removeCell: pure((ctx, _) => [
          send(
            {
              type: 'REMOVE_CELL',
              cell: ctx.cell,
              cellType: ctx.cellType,
            },
            { to: 'cellTypes' }
          ),
          assign({ cell: null }),
        ]),
        removeCellType: send(
          (_, evt) => ({
            type: 'REMOVE_CELLTYPE',
            cellType: evt.cellType,
          }),
          { to: 'cellTypes' }
        ),
        setColor: assign({ color: (_, evt) => evt.color }),
        setName: assign({ name: (_, evt) => evt.name }),
        setCellType: assign({ cellType: (_, evt) => evt.cellType }),
        setCell: assign({
          cell: (ctx) => {
            const { hovering, cell } = ctx;
            const i = hovering.indexOf(cell);
            return i === -1 || i === hovering.length - 1 ? hovering[0] : hovering[i + 1];
          },
        }),
        resetCell: assign({ cell: null }),
        addCell: pure((ctx) => [
          send(
            {
              type: 'ADD_CELL',
              cellType: ctx.cellType,
              cell: ctx.cell,
              mode: ctx.mode,
            },
            { to: 'cellTypes' }
          ),
          assign({ cell: null }),
        ]),
        multiAddCells: pure((ctx) => [
          send(
            {
              type: 'MULTI_ADD_CELLS',
              cellType: ctx.cellType,
              cells: ctx.multiSelected,
              mode: ctx.mode,
            },
            { to: 'cellTypes' }
          ),
          assign({ multiSelected: [] }),
        ]),
        multiRemoveCells: pure((ctx) => [
          send(
            {
              type: 'MULTI_REMOVE_CELLS',
              cellType: ctx.cellType,
              cells: ctx.multiSelected,
            },
            { to: 'cellTypes' }
          ),
          assign({ multiSelected: [] }),
        ]),
        addCellType: send(
          (ctx) => ({
            type: 'ADD_CELLTYPE',
            color: ctx.color,
          }),
          { to: 'cellTypes' }
        ),
        editColor: send(
          (ctx) => ({
            type: 'EDIT_COLOR',
            cellType: ctx.cellType,
            color: ctx.color,
          }),
          { to: 'cellTypes' }
        ),
        editName: send(
          (ctx) => ({
            type: 'EDIT_NAME',
            cellType: ctx.cellType,
            name: ctx.name,
          }),
          { to: 'cellTypes' }
        ),
        toggleOn: send(
          (ctx) => ({
            type: 'EDIT_IS_ON',
            cellType: ctx.cellType,
          }),
          { to: 'cellTypes' }
        ),
        toggleAll: send(
          (ctx) => ({
            type: 'TOGGLE_ALL_ON',
          }),
          { to: 'cellTypes' }
        ),
        untoggleAll: send(
          (ctx) => ({
            type: 'TOGGLE_ALL_OFF',
          }),
          { to: 'cellTypes' }
        ),
        changeOpacity: send(
          (ctx, evt) => ({
            type: 'EDIT_OPACITY',
            cellType: ctx.cellType,
            opacity: evt.opacity,
          }),
          { to: 'cellTypes' }
        ),
      },
    }
  );

export default createEditCellTypesMachine;

1	/**
2	* Manages the controls to edit the cell types.
3	* Sends ADD_CELL, ADD_CELLTYPE, REMOVE_CELL, REMOVE_CELLTYPE, EDIT_COLOR, and EDIT_NAME to the divisions event bus
4	* when interacting with the UI.
5	*/
6	import { assign, Machine, send } from 'xstate';
7	import { pure } from 'xstate/lib/actions';
8	import { fromEventBus } from '../eventBus';
9
10	const createEditCellTypesMachine = ({ eventBuses }) =>	19✔
11	Machine(	866✔
12	{
13	id: 'editCellTypes',
14	invoke: [
15	{ id: 'select', src: fromEventBus('editCellTypes', () => eventBuses.select, 'SELECTED') },	18✔
16	{ src: fromEventBus('editCellTypes', () => eventBuses.hovering, 'HOVERING') },	18✔
17	{ id: 'cellTypes', src: fromEventBus('editCellTypes', () => eventBuses.cellTypes) },	18✔
18	],
19	context: {
20	selected: null,
21	multiSelected: [],
22	hovering: null,
23	hoveringCard: false,
24	mode: 'overwrite',
25	cell: null,
26	cellType: null,
27	name: null,
28	color: null,
29	},
30	on: {
31	SELECTED: { actions: 'setSelected' },
32	MULTISELECTION: { actions: 'setMultiSelected' },
33	HOVERING: { actions: 'setHovering' },
34	TOGGLE_HOVER: { actions: 'toggleHoveringCard' },
35	SET_MODE: { actions: 'setMode' },
36	REMOVE_ONE: { actions: ['setCell', 'setCellType', 'removeCell'] },
37	REMOVE_TYPE: { actions: 'removeCellType' },
38	},
39	initial: 'idle',
40	states: {
41	idle: {
42	on: {
43	mouseup: { actions: 'select' },
44	ADD: { target: 'addingCell', actions: ['setCellType', 'setName'] },
45	MULTIADD: { actions: ['setCellType', 'multiAddCells'] },
46	MULTIREMOVE: { actions: ['setCellType', 'multiRemoveCells'] },
47	REMOVE_MODE: { target: 'removingCell', actions: ['setCellType', 'setName'] },
48	ADD_TYPE: { actions: ['setColor', 'addCellType'] },
49	COLOR: { actions: ['setCellType', 'setColor', 'editColor'] },
50	NAME: { actions: ['setCellType', 'setName', 'editName'] },
51	TOGGLE: { actions: ['setCellType', 'toggleOn'] },
52	TOGGLE_ALL: { actions: 'toggleAll' },
53	UNTOGGLE_ALL: { actions: 'untoggleAll' },
54	OPACITY: { actions: ['setCellType', 'changeOpacity'] },
55	},
56	},
57	addingCell: {
58	entry: 'resetCell',
59	on: {
60	mouseup: [
61	{ cond: 'onNoCell' },
62	{ cond: 'shift', actions: 'setCell' },
63	{ cond: 'onCell', actions: 'addCell' },
64	{ actions: 'setCell' },
65	],
66	COLOR: { actions: ['setCellType', 'setColor', 'editColor'] },
67	NAME: { actions: ['setCellType', 'setName', 'editName'] },
68	TOGGLE: { actions: ['setCellType', 'toggleOn'] },
69	OPACITY: { actions: ['setCellType', 'changeOpacity'] },
70	RESET: { target: 'idle' },
71	},
72	},
73	removingCell: {
74	entry: 'resetCell',
75	on: {
76	mouseup: [
77	{ cond: 'onNoCell' },
78	{ cond: 'shift', actions: 'setCell' },
79	{ cond: 'onCell', actions: 'removeCell' },
80	{ actions: 'setCell' },
81	],
82	COLOR: { actions: ['setCellType', 'setColor', 'editColor'] },
83	NAME: { actions: ['setCellType', 'setName', 'editName'] },
84	RESET: { target: 'idle' },
85	},
86	},
87	},
88	},
89	{
90	services: {},
91	guards: {
92	onNoCell: (ctx) => ctx.hovering.length === 0,	8✔
93	shift: (_, evt) => evt.shiftKey,	8✔
94	onCell: (ctx) => ctx.hovering.includes(ctx.cell),	8✔
95	},
96	actions: {
97	select: send('SELECT', { to: 'select' }),
98	setSelected: assign({ selected: (_, evt) => evt.selected }),	2✔
99	setMultiSelected: assign({ multiSelected: (ctx, evt) => evt.selected }),	×
100	setHovering: assign({ hovering: (_, evt) => evt.hovering }),	11✔
NEW 101	toggleHoveringCard: assign({ hoveringCard: (ctx) => !ctx.hoveringCard }),	×
NEW 102	setMode: assign({ mode: (_, evt) => evt.mode }),	×
103	removeCell: pure((ctx, _) => [	1✔
104	send(
105	{
106	type: 'REMOVE_CELL',
107	cell: ctx.cell,
108	cellType: ctx.cellType,
109	},
110	{ to: 'cellTypes' }
111	),
112	assign({ cell: null }),
113	]),
114	removeCellType: send(
115	(_, evt) => ({	1✔
116	type: 'REMOVE_CELLTYPE',
117	cellType: evt.cellType,
118	}),
119	{ to: 'cellTypes' }
120	),
121	setColor: assign({ color: (_, evt) => evt.color }),	7✔
122	setName: assign({ name: (_, evt) => evt.name }),	3✔
123	setCellType: assign({ cellType: (_, evt) => evt.cellType }),	6✔
124	setCell: assign({
125	cell: (ctx) => {
126	const { hovering, cell } = ctx;	5✔
127	const i = hovering.indexOf(cell);	5✔
128	return i === -1 \|\| i === hovering.length - 1 ? hovering[0] : hovering[i + 1];	5!
129	},
130	}),
131	resetCell: assign({ cell: null }),
132	addCell: pure((ctx) => [	2✔
133	send(
134	{
135	type: 'ADD_CELL',
136	cellType: ctx.cellType,
137	cell: ctx.cell,
138	mode: ctx.mode,
139	},
140	{ to: 'cellTypes' }
141	),
142	assign({ cell: null }),
143	]),
144	multiAddCells: pure((ctx) => [	×
145	send(
146	{
147	type: 'MULTI_ADD_CELLS',
148	cellType: ctx.cellType,
149	cells: ctx.multiSelected,
150	mode: ctx.mode,
151	},
152	{ to: 'cellTypes' }
153	),
154	assign({ multiSelected: [] }),
155	]),
156	multiRemoveCells: pure((ctx) => [	×
157	send(
158	{
159	type: 'MULTI_REMOVE_CELLS',
160	cellType: ctx.cellType,
161	cells: ctx.multiSelected,
162	},
163	{ to: 'cellTypes' }
164	),
165	assign({ multiSelected: [] }),
166	]),
167	addCellType: send(
168	(ctx) => ({	6✔
169	type: 'ADD_CELLTYPE',
170	color: ctx.color,
171	}),
172	{ to: 'cellTypes' }
173	),
174	editColor: send(
175	(ctx) => ({	1✔
176	type: 'EDIT_COLOR',
177	cellType: ctx.cellType,
178	color: ctx.color,
179	}),
180	{ to: 'cellTypes' }
181	),
182	editName: send(
183	(ctx) => ({	1✔
184	type: 'EDIT_NAME',
185	cellType: ctx.cellType,
186	name: ctx.name,
187	}),
188	{ to: 'cellTypes' }
189	),
190	toggleOn: send(
191	(ctx) => ({	2✔
192	type: 'EDIT_IS_ON',
193	cellType: ctx.cellType,
194	}),
195	{ to: 'cellTypes' }
196	),
197	toggleAll: send(
198	(ctx) => ({	×
199	type: 'TOGGLE_ALL_ON',
200	}),
201	{ to: 'cellTypes' }
202	),
203	untoggleAll: send(
204	(ctx) => ({	1✔
205	type: 'TOGGLE_ALL_OFF',
206	}),
207	{ to: 'cellTypes' }
208	),
209	changeOpacity: send(
210	(ctx, evt) => ({	×
211	type: 'EDIT_OPACITY',
212	cellType: ctx.cellType,
213	opacity: evt.opacity,
214	}),
215	{ to: 'cellTypes' }
216	),
217	},
218	}
219	);
220
221	export default createEditCellTypesMachine;

vanvalenlab / deepcell-label / 4930767286

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