4985420685

Build # 4985420685

Build Type

push

github

Committed by GitHub

Commit Message

Celltype UI toolbar with new toggles (#461)

Run Details

463 of 1193 branches covered (38.81%)

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.82 hits per line

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

50.0

/frontend/src/Project/service/labels/cellTypesMachine.js

/** Manages cell type labels.
 * Broadcasts CELLTYPES event on cellTypes event bus.
 * Updates cellTypes based on edits to cells with CELLS, REPLACE, DELETE, NEW, and SWAP events.
 * Edits cellTypes with ADD_CELL, ADD_CELLTYPE, REMOVE_CELL, REMOVE_CELLTYPE, EDIT_COLOR, EDIT_NAME events.
 */

import equal from 'fast-deep-equal';
import { assign, Machine, send } from 'xstate';
import { pure } from 'xstate/lib/actions';
import Cells from '../../cells';
import { markerPanel } from '../../EditControls/CellTypeControls/CellTypeUI/CellMarkerPanel';
import { fromEventBus } from '../eventBus';

// Adapted from https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
export const hexToRgb = (hex) => {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return [
    parseInt(result[1], 16) / 255,
    parseInt(result[2], 16) / 255,
    parseInt(result[3], 16) / 255,
    1,
  ];
};

/** Removes cell from all cellTypes. */
function remove(cellTypes, cell) {
  return cellTypes.map((cellType) => {
    let cells = cellType.cells;
    cells = cells.filter((oldCell) => oldCell !== cell);
    return { ...cellType, cells };
  });
}

function updateFromCells(cellTypes, cells) {
  return (
    cellTypes
      // remove cells that no longer exist
      .map((cellType) => {
        let cellList = cellType.cells;
        cellList = cellList.filter((cell) => cells.some((newCell) => newCell.cell === cell));
        return { ...cellType, cells: cellList };
      })
  );
}

const createCellTypesMachine = ({ eventBuses, undoRef }) =>
  Machine(
    {
      id: 'cellTypes',
      entry: send('REGISTER_LABELS', { to: undoRef }),
      invoke: [
        { id: 'eventBus', src: fromEventBus('cellTypes', () => eventBuses.cellTypes) },
        { src: fromEventBus('cellTypes', () => eventBuses.load, 'LOADED') },
        { src: fromEventBus('cellTypes', () => eventBuses.labeled, 'SET_FEATURE') },
        { src: fromEventBus('cellTypes', () => eventBuses.cells) }, // listen for edit events (REPLACE, SWAP, REMOVE) and CELLS (generic updates)
      ],
      context: {
        cellTypes: [],
        feature: 0,
        numCells: null,
        colorMap: null,
        markerPanel: markerPanel,
        isOn: [],
        opacities: [],
        undoRef: undoRef,
        historyRef: null,
        edit: null,
      },
      initial: 'loading',
      states: {
        loading: {
          type: 'parallel',
          states: {
            getCellTypes: {
              initial: 'waiting',
              states: {
                waiting: {
                  on: {
                    LOADED: {
                      actions: [
                        'setCellTypes',
                        'setCells',
                        'setMaxId',
                        'setOpacities',
                        'setIsOn',
                        'updateColorMap',
                      ],
                      target: 'done',
                    },
                  },
                },
                done: { type: 'final' },
              },
            },
            getHistoryRef: {
              initial: 'waiting',
              states: {
                waiting: {
                  on: {
                    LABEL_HISTORY: { target: 'done', actions: 'setHistoryRef' },
                  },
                },
                done: { type: 'final' },
              },
            },
          },
          onDone: { target: 'loaded' },
        },
        loaded: {
          type: 'parallel',
          states: {
            edit: {
              initial: 'idle',
              states: {
                idle: {
                  entry: ['sendCellTypes', 'updateColorMap'],
                  on: {
                    // From editCellTypesMachine
                    ADD_CELL: { actions: 'addCell', target: 'editing' },
                    MULTI_ADD_CELLS: { actions: 'addCells', target: 'editing' },
                    ADD_PREDICTIONS: { actions: 'addPredictions', target: 'editing' },
                    MULTI_REMOVE_CELLS: { actions: 'removeCells', target: 'editing' },
                    ADD_CELLTYPE: {
                      actions: ['addCellType', 'addIsOn', 'addOpacity', 'setMaxId'],
                      target: 'editing',
                    },
                    REMOVE_CELLTYPE: {
                      actions: ['removeCellType', 'removeIsOn'],
                      target: 'editing',
                    },
                    REMOVE_CELL: { actions: 'removeCell', target: 'editing' },
                    EDIT_COLOR: { actions: 'editColor', target: 'editing' },
                    EDIT_NAME: { actions: 'editName', target: 'editing' },
                  },
                },
                editing: {
                  entry: 'setEditEvent',
                  type: 'parallel',
                  states: {
                    getEdit: {
                      entry: 'startEdit',
                      initial: 'idle',
                      states: {
                        idle: { on: { SAVE: { target: 'done', actions: 'setEdit' } } },
                        done: { type: 'final' },
                      },
                    },
                    getEdits: {
                      initial: 'editing',
                      states: {
                        editing: {
                          on: {
                            EDITED_CELLTYPES: { target: 'done', actions: 'setEditedCellTypes' },
                          },
                        },
                        done: { type: 'final' },
                      },
                    },
                  },
                  onDone: {
                    target: 'idle',
                    actions: 'finishEditing',
                  },
                },
              },
            },
            update: {
              on: {
                // from CELLS event bus
                // REPLACE: { actions: ['replace', 'sendCellTypes'] },
                DELETE: { actions: ['delete', 'sendCellTypes'] },
                // SWAP: { actions: ['swap', 'sendCellTypes'] },
                EDITED_CELLS: { actions: ['setCells', 'updateFromCells', 'updateColorMap'] },
                EDIT_IS_ON: { actions: ['editIsOn', 'updateColorMap'] },
                TOGGLE_ALL_ON: { actions: ['toggleAll', 'updateColorMap'] },
                TOGGLE_ALL_OFF: { actions: ['untoggleAll', 'updateColorMap'] },
                EDIT_OPACITY: { actions: ['editOpacities', 'updateColorMap'] },
                EDIT_MARKER_PANEL: { actions: ['editMarkerPanel'] },
                CELLS: { actions: 'setCells' },
                RESTORE: { actions: ['restore', 'updateColorMap'] },
                SET_FEATURE: { actions: ['setFeature', 'updateColorMap'] },
              },
            },
          },
        },
      },
    },
    {
      actions: {
        // Set specified context or parameters
        setHistoryRef: assign({ historyRef: (_, __, meta) => meta._event.origin }),
        setCellTypes: assign({ cellTypes: (_, evt) => evt.cellTypes }),
        setCells: assign({ numCells: (_, evt) => new Cells(evt.cells).getNewCell() }),
        setIsOn: assign({ isOn: (ctx) => Array(ctx.maxId + 1).fill(true) }),
        setOpacities: assign({ opacities: (ctx) => Array(ctx.maxId + 1).fill(0.3) }),
        setEditEvent: assign({ editEvent: (_, evt) => evt }),
        setFeature: assign({ feature: (_, evt) => evt.feature }),
        startEdit: send('SAVE', { to: (ctx) => ctx.undoRef }),
        setEdit: assign({ edit: (_, evt) => evt.edit }),
        setEditedCellTypes: assign({ editedCellTypes: (_, evt) => evt.cellTypes }),

        // Get the next highest id for the next cell type to add
        setMaxId: assign({
          maxId: (ctx) => {
            const ids = ctx.cellTypes.map((cellType) => cellType.id);
            if (ids.length === 0) {
              return 0;
            }
            return Math.max.apply(null, ids);
          },
        }),

        // Send an event to event bus that cell types have been edited
        sendCellTypes: send((ctx) => ({ type: 'CELLTYPES', cellTypes: ctx.cellTypes }), {
          to: 'eventBus',
        }),

        // Re-calculate the color map for rendering cell types
        updateColorMap: pure(() =>
          assign({
            colorMap: (ctx) => {
              let cellTypes = ctx.cellTypes.filter((cellType) => cellType.feature === ctx.feature);
              let numTypes = cellTypes.length;
              let newColorMap = Array(ctx.numCells).fill([0, 0, 0, 0]);
              for (let i = 0; i < numTypes; i++) {
                const cellType = cellTypes[i];
                let numCells = cellType.cells.length;
                if (ctx.isOn[cellType.id]) {
                  for (let j = 0; j < numCells; j++) {
                    let oldColor = newColorMap[cellType.cells[j]];
                    let newColor = hexToRgb(cellType.color);
                    const sr = newColor[0];
                    const sg = newColor[1];
                    const sb = newColor[2];
                    const sa = ctx.opacities[cellType.id];
                    const r = oldColor[0] + sr - oldColor[0] * sr;
                    const g = oldColor[1] + sg - oldColor[1] * sg;
                    const b = oldColor[2] + sb - oldColor[2] * sb;
                    const a = oldColor[3];
                    newColorMap[cellType.cells[j]] = [r, g, b, Math.max(sa, a)];
                  }
                }
              }
              return newColorMap;
            },
          })
        ),

        delete: pure((ctx, evt) => {
          let cellTypes = remove(ctx.cellTypes, evt.cell);
          const before = { type: 'RESTORE', cellTypes: ctx.cellTypes };
          const after = { type: 'RESTORE', cellTypes: cellTypes };
          return [
            assign({ cellTypes }),
            send({ type: 'SNAPSHOT', edit: evt.edit, before, after }, { to: ctx.historyRef }),
          ];
        }),

        updateFromCells: pure((ctx, evt) => {
          let cellTypes = updateFromCells(ctx.cellTypes, evt.cells);
          if (!equal(cellTypes, ctx.cellTypes)) {
            const before = { type: 'RESTORE', cellTypes: ctx.cellTypes };
            const after = { type: 'RESTORE', cellTypes: cellTypes };
            return [
              assign({ cellTypes }),
              send({ type: 'SNAPSHOT', edit: evt.edit, before, after }, { to: ctx.historyRef }),
              send({ type: 'CELLTYPES', cellTypes }, { to: 'eventBus' }),
            ];
          }
          return [];
        }),

        finishEditing: pure((ctx) => {
          return [
            assign({ cellTypes: (ctx) => ctx.editedCellTypes }),
            send(
              {
                type: 'SNAPSHOT',
                before: { type: 'RESTORE', cellTypes: ctx.cellTypes },
                after: { type: 'RESTORE', cellTypes: ctx.editedCellTypes },
                edit: ctx.edit,
              },
              { to: ctx.historyRef }
            ),
          ];
        }),

        // Add one cell to a specified cell type
        addCell: send((ctx, evt) => {
          let cellTypes;
          if (evt.mode === 'overwrite') {
            cellTypes = ctx.cellTypes.map((cellType) =>
              cellType.id === evt.cellType
                ? !cellType.cells.includes(evt.cell)
                  ? {
                      ...cellType,
                      cells: [...cellType.cells, evt.cell].sort(function (a, b) {
                        return a - b;
                      }),
                    }
                  : cellType
                : {
                    ...cellType,
                    cells: cellType.cells.filter((cell) => cell !== evt.cell),
                  }
            );
          } else if (evt.mode === 'multiLabel') {
            cellTypes = ctx.cellTypes.map((cellType) =>
              cellType.id === evt.cellType && !cellType.cells.includes(evt.cell)
                ? {
                    ...cellType,
                    cells: [...cellType.cells, evt.cell].sort(function (a, b) {
                      return a - b;
                    }),
                  }
                : cellType
            );
          }
          return { type: 'EDITED_CELLTYPES', cellTypes };
        }),

        // Add a list of cells to a specified cell type
        addCells: send((ctx, evt) => {
          let cellTypes;
          const oldCells = ctx.cellTypes.filter((cellType) => cellType.id === evt.cellType)[0]
            .cells;
          const newCells = evt.cells.filter((cell) => !oldCells.includes(cell));
          if (evt.mode === 'overwrite') {
            cellTypes = ctx.cellTypes.map((cellType) =>
              cellType.id === evt.cellType
                ? {
                    ...cellType,
                    cells: [...cellType.cells, ...newCells].sort(function (a, b) {
                      return a - b;
                    }),
                  }
                : {
                    ...cellType,
                    cells: cellType.cells.filter((cell) => !evt.cells.includes(cell)),
                  }
            );
          } else if (evt.mode === 'multiLabel') {
            cellTypes = ctx.cellTypes.map((cellType) =>
              cellType.id === evt.cellType
                ? {
                    ...cellType,
                    cells: [...cellType.cells, ...newCells].sort(function (a, b) {
                      return a - b;
                    }),
                  }
                : cellType
            );
          }
          return { type: 'EDITED_CELLTYPES', cellTypes };
        }),

        // Add a prediction map of cells with their label
        addPredictions: send((ctx, evt) => {
          let cellTypes = ctx.cellTypes;
          const pred = evt.predictions;
          for (let cell in pred) {
            cellTypes = cellTypes.map((cellType) =>
              cellType.id === pred[cell] + 1 && !cellType.cells.includes(cell) && cell > 0
                ? {
                    ...cellType,
                    cells: [...cellType.cells, parseInt(cell)].sort(function (a, b) {
                      return a - b;
                    }),
                  }
                : cellType
            );
          }
          return { type: 'EDITED_CELLTYPES', cellTypes };
        }),

        // Remove a single cell from a specified cell type
        removeCell: send((ctx, evt) => {
          let cellTypes;
          cellTypes = ctx.cellTypes.map((cellType) =>
            cellType.id === evt.cellType
              ? { ...cellType, cells: cellType.cells.filter((cell) => !(cell === evt.cell)) }
              : cellType
          );
          return { type: 'EDITED_CELLTYPES', cellTypes };
        }),

        // Removes a list of cells from a specified cell type
        removeCells: send((ctx, evt) => {
          let cellTypes;
          const removedCells = evt.cells;
          cellTypes = ctx.cellTypes.map((cellType) =>
            cellType.id === evt.cellType
              ? {
                  ...cellType,
                  cells: cellType.cells.filter((cell) => !removedCells.includes(cell)),
                }
              : cellType
          );
          return { type: 'EDITED_CELLTYPES', cellTypes };
        }),

        // Add a new empty cell type with a specified color
        addCellType: send((ctx, evt) => {
          let cellTypes;
          cellTypes = [
            ...ctx.cellTypes,
            {
              id: ctx.maxId + 1,
              feature: ctx.feature,
              name: `Untitled ${ctx.maxId + 1}`,
              color: evt.color,
              cells: [],
            },
          ];
          return { type: 'EDITED_CELLTYPES', cellTypes };
        }),

        // Remove a specified cell type
        removeCellType: send((ctx, evt) => {
          let cellTypes;
          cellTypes = ctx.cellTypes.filter((item) => !(item.id === evt.cellType));
          return { type: 'EDITED_CELLTYPES', cellTypes };
        }),

        // Edit the color of a specified cell type
        editColor: send((ctx, evt) => {
          let cellTypes;
          cellTypes = ctx.cellTypes.map((cellType) =>
            cellType.id === evt.cellType ? { ...cellType, color: evt.color } : cellType
          );
          return { type: 'EDITED_CELLTYPES', cellTypes };
        }),

        // Edit the name of a specified cell type
        editName: send((ctx, evt) => {
          let cellTypes;
          cellTypes = ctx.cellTypes.map((cellType) =>
            cellType.id === evt.cellType ? { ...cellType, name: evt.name } : cellType
          );
          return { type: 'EDITED_CELLTYPES', cellTypes };
        }),

        // Toggle a specified cell type on/off for the color map
        editIsOn: assign({
          isOn: (ctx, evt) => {
            let isOn = ctx.isOn;
            isOn[evt.cellType] = !isOn[evt.cellType];
            return isOn;
          },
        }),

        // Make a specified edit to a row in the marker panel
        editMarkerPanel: assign({
          markerPanel: (ctx, evt) => {
            const editedPanel = ctx.markerPanel.map((row) =>
              row.id === evt.id ? { ...row, [evt.field]: evt.data } : row
            );
            return editedPanel;
          },
        }),

        // Toggle all cell types on for the color map
        toggleAll: assign({
          isOn: (ctx) => {
            let isOn = ctx.isOn.map((t) => 1);
            return isOn;
          },
        }),

        // Toggle all cell types off for the color map
        untoggleAll: assign({
          isOn: (ctx) => {
            let isOn = ctx.isOn.map((t) => 0);
            return isOn;
          },
        }),

        // Edit the opacity of a specified cell type
        editOpacities: assign({
          opacities: (ctx, evt) => {
            let opacities = ctx.opacities;
            opacities[evt.cellType] = evt.opacity;
            return opacities;
          },
        }),

        // Add a new cell type to track for color map toggling
        addIsOn: assign({
          isOn: (ctx) => {
            let isOn = ctx.isOn;
            isOn.push(true);
            return isOn;
          },
        }),

        // Remove a cell type to track for color map toggling
        removeIsOn: assign({
          isOn: (ctx, evt) => {
            const isOn = ctx.isOn.filter((e, i) => i !== evt.cellType);
            return isOn;
          },
        }),

        // Add a new opacity to track for color map
        addOpacity: assign({
          opacities: (ctx) => {
            let opacities = ctx.opacities;
            opacities.push(0.3);
            return opacities;
          },
        }),

        restore: pure((_, evt) => {
          return [
            assign({ cellTypes: evt.cellTypes }),
            send({ type: 'CELLTYPES', cellTypes: evt.cellTypes }, { to: 'eventBus' }),
          ];
        }),
      },
    }
  );

export default createCellTypesMachine;

1	/** Manages cell type labels.
2	* Broadcasts CELLTYPES event on cellTypes event bus.
3	* Updates cellTypes based on edits to cells with CELLS, REPLACE, DELETE, NEW, and SWAP events.
4	* Edits cellTypes with ADD_CELL, ADD_CELLTYPE, REMOVE_CELL, REMOVE_CELLTYPE, EDIT_COLOR, EDIT_NAME events.
5	*/
6
7	import equal from 'fast-deep-equal';
8	import { assign, Machine, send } from 'xstate';
9	import { pure } from 'xstate/lib/actions';
10	import Cells from '../../cells';
11	import { markerPanel } from '../../EditControls/CellTypeControls/CellTypeUI/CellMarkerPanel';
12	import { fromEventBus } from '../eventBus';
13
14	// Adapted from https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
15	export const hexToRgb = (hex) => {	19✔
16	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);	172✔
17	return [	172✔
18	parseInt(result[1], 16) / 255,
19	parseInt(result[2], 16) / 255,
20	parseInt(result[3], 16) / 255,
21	1,
22	];
23	};
24
25	/** Removes cell from all cellTypes. */
26	function remove(cellTypes, cell) {
27	return cellTypes.map((cellType) => {	×
28	let cells = cellType.cells;	×
29	cells = cells.filter((oldCell) => oldCell !== cell);	×
30	return { ...cellType, cells };	×
31	});
32	}
33
34	function updateFromCells(cellTypes, cells) {
35	return (	×
36	cellTypes
37	// remove cells that no longer exist
38	.map((cellType) => {
39	let cellList = cellType.cells;	×
40	cellList = cellList.filter((cell) => cells.some((newCell) => newCell.cell === cell));	×
41	return { ...cellType, cells: cellList };	×
42	})
43	);
44	}
45
46	const createCellTypesMachine = ({ eventBuses, undoRef }) =>	19✔
47	Machine(	866✔
48	{
49	id: 'cellTypes',
50	entry: send('REGISTER_LABELS', { to: undoRef }),
51	invoke: [
52	{ id: 'eventBus', src: fromEventBus('cellTypes', () => eventBuses.cellTypes) },	18✔
53	{ src: fromEventBus('cellTypes', () => eventBuses.load, 'LOADED') },	18✔
54	{ src: fromEventBus('cellTypes', () => eventBuses.labeled, 'SET_FEATURE') },	18✔
55	{ src: fromEventBus('cellTypes', () => eventBuses.cells) }, // listen for edit events (REPLACE, SWAP, REMOVE) and CELLS (generic updates)	18✔
56	],
57	context: {
58	cellTypes: [],
59	feature: 0,
60	numCells: null,
61	colorMap: null,
62	markerPanel: markerPanel,
63	isOn: [],
64	opacities: [],
65	undoRef: undoRef,
66	historyRef: null,
67	edit: null,
68	},
69	initial: 'loading',
70	states: {
71	loading: {
72	type: 'parallel',
73	states: {
74	getCellTypes: {
75	initial: 'waiting',
76	states: {
77	waiting: {
78	on: {
79	LOADED: {
80	actions: [
81	'setCellTypes',
82	'setCells',
83	'setMaxId',
84	'setOpacities',
85	'setIsOn',
86	'updateColorMap',
87	],
88	target: 'done',
89	},
90	},
91	},
92	done: { type: 'final' },
93	},
94	},
95	getHistoryRef: {
96	initial: 'waiting',
97	states: {
98	waiting: {
99	on: {
100	LABEL_HISTORY: { target: 'done', actions: 'setHistoryRef' },
101	},
102	},
103	done: { type: 'final' },
104	},
105	},
106	},
107	onDone: { target: 'loaded' },
108	},
109	loaded: {
110	type: 'parallel',
111	states: {
112	edit: {
113	initial: 'idle',
114	states: {
115	idle: {
116	entry: ['sendCellTypes', 'updateColorMap'],
117	on: {
118	// From editCellTypesMachine
119	ADD_CELL: { actions: 'addCell', target: 'editing' },
120	MULTI_ADD_CELLS: { actions: 'addCells', target: 'editing' },
121	ADD_PREDICTIONS: { actions: 'addPredictions', target: 'editing' },
122	MULTI_REMOVE_CELLS: { actions: 'removeCells', target: 'editing' },
123	ADD_CELLTYPE: {
124	actions: ['addCellType', 'addIsOn', 'addOpacity', 'setMaxId'],
125	target: 'editing',
126	},
127	REMOVE_CELLTYPE: {
128	actions: ['removeCellType', 'removeIsOn'],
129	target: 'editing',
130	},
131	REMOVE_CELL: { actions: 'removeCell', target: 'editing' },
132	EDIT_COLOR: { actions: 'editColor', target: 'editing' },
133	EDIT_NAME: { actions: 'editName', target: 'editing' },
134	},
135	},
136	editing: {
137	entry: 'setEditEvent',
138	type: 'parallel',
139	states: {
140	getEdit: {
141	entry: 'startEdit',
142	initial: 'idle',
143	states: {
144	idle: { on: { SAVE: { target: 'done', actions: 'setEdit' } } },
145	done: { type: 'final' },
146	},
147	},
148	getEdits: {
149	initial: 'editing',
150	states: {
151	editing: {
152	on: {
153	EDITED_CELLTYPES: { target: 'done', actions: 'setEditedCellTypes' },
154	},
155	},
156	done: { type: 'final' },
157	},
158	},
159	},
160	onDone: {
161	target: 'idle',
162	actions: 'finishEditing',
163	},
164	},
165	},
166	},
167	update: {
168	on: {
169	// from CELLS event bus
170	// REPLACE: { actions: ['replace', 'sendCellTypes'] },
171	DELETE: { actions: ['delete', 'sendCellTypes'] },
172	// SWAP: { actions: ['swap', 'sendCellTypes'] },
173	EDITED_CELLS: { actions: ['setCells', 'updateFromCells', 'updateColorMap'] },
174	EDIT_IS_ON: { actions: ['editIsOn', 'updateColorMap'] },
175	TOGGLE_ALL_ON: { actions: ['toggleAll', 'updateColorMap'] },
176	TOGGLE_ALL_OFF: { actions: ['untoggleAll', 'updateColorMap'] },
177	EDIT_OPACITY: { actions: ['editOpacities', 'updateColorMap'] },
178	EDIT_MARKER_PANEL: { actions: ['editMarkerPanel'] },
179	CELLS: { actions: 'setCells' },
180	RESTORE: { actions: ['restore', 'updateColorMap'] },
181	SET_FEATURE: { actions: ['setFeature', 'updateColorMap'] },
182	},
183	},
184	},
185	},
186	},
187	},
188	{
189	actions: {
190	// Set specified context or parameters
191	setHistoryRef: assign({ historyRef: (_, __, meta) => meta._event.origin }),	18✔
192	setCellTypes: assign({ cellTypes: (_, evt) => evt.cellTypes }),	13✔
193	setCells: assign({ numCells: (_, evt) => new Cells(evt.cells).getNewCell() }),	39✔
194	setIsOn: assign({ isOn: (ctx) => Array(ctx.maxId + 1).fill(true) }),	13✔
195	setOpacities: assign({ opacities: (ctx) => Array(ctx.maxId + 1).fill(0.3) }),	13✔
196	setEditEvent: assign({ editEvent: (_, evt) => evt }),	12✔
197	setFeature: assign({ feature: (_, evt) => evt.feature }),	×
198	startEdit: send('SAVE', { to: (ctx) => ctx.undoRef }),	12✔
199	setEdit: assign({ edit: (_, evt) => evt.edit }),	12✔
200	setEditedCellTypes: assign({ editedCellTypes: (_, evt) => evt.cellTypes }),	12✔
201
202	// Get the next highest id for the next cell type to add
203	setMaxId: assign({
204	maxId: (ctx) => {
205	const ids = ctx.cellTypes.map((cellType) => cellType.id);	19✔
206	if (ids.length === 0) {	19✔
207	return 0;	18✔
208	}
209	return Math.max.apply(null, ids);	1✔
210	},
211	}),
212
213	// Send an event to event bus that cell types have been edited
214	sendCellTypes: send((ctx) => ({ type: 'CELLTYPES', cellTypes: ctx.cellTypes }), {	25✔
215	to: 'eventBus',
216	}),
217
218	// Re-calculate the color map for rendering cell types
219	updateColorMap: pure(() =>
220	assign({	41✔
221	colorMap: (ctx) => {
222	let cellTypes = ctx.cellTypes.filter((cellType) => cellType.feature === ctx.feature);	41✔
223	let numTypes = cellTypes.length;	41✔
224	let newColorMap = Array(ctx.numCells).fill([0, 0, 0, 0]);	41✔
225	for (let i = 0; i < numTypes; i++) {	41✔
226	const cellType = cellTypes[i];	18✔
227	let numCells = cellType.cells.length;	18✔
228	if (ctx.isOn[cellType.id]) {	18✔
229	for (let j = 0; j < numCells; j++) {	15✔
230	let oldColor = newColorMap[cellType.cells[j]];	4✔
231	let newColor = hexToRgb(cellType.color);	4✔
232	const sr = newColor[0];	4✔
233	const sg = newColor[1];	4✔
234	const sb = newColor[2];	4✔
235	const sa = ctx.opacities[cellType.id];	4✔
236	const r = oldColor[0] + sr - oldColor[0] * sr;	4✔
237	const g = oldColor[1] + sg - oldColor[1] * sg;	4✔
238	const b = oldColor[2] + sb - oldColor[2] * sb;	4✔
239	const a = oldColor[3];	4✔
240	newColorMap[cellType.cells[j]] = [r, g, b, Math.max(sa, a)];	4✔
241	}
242	}
243	}
244	return newColorMap;	41✔
245	},
246	})
247	),
248
249	delete: pure((ctx, evt) => {
250	let cellTypes = remove(ctx.cellTypes, evt.cell);	×
251	const before = { type: 'RESTORE', cellTypes: ctx.cellTypes };	×
252	const after = { type: 'RESTORE', cellTypes: cellTypes };	×
253	return [	×
254	assign({ cellTypes }),
255	send({ type: 'SNAPSHOT', edit: evt.edit, before, after }, { to: ctx.historyRef }),
256	];
257	}),
258
259	updateFromCells: pure((ctx, evt) => {
260	let cellTypes = updateFromCells(ctx.cellTypes, evt.cells);	×
261	if (!equal(cellTypes, ctx.cellTypes)) {	×
262	const before = { type: 'RESTORE', cellTypes: ctx.cellTypes };	×
263	const after = { type: 'RESTORE', cellTypes: cellTypes };	×
264	return [	×
265	assign({ cellTypes }),
266	send({ type: 'SNAPSHOT', edit: evt.edit, before, after }, { to: ctx.historyRef }),
267	send({ type: 'CELLTYPES', cellTypes }, { to: 'eventBus' }),
268	];
269	}
270	return [];	×
271	}),
272
273	finishEditing: pure((ctx) => {
274	return [	12✔
275	assign({ cellTypes: (ctx) => ctx.editedCellTypes }),	12✔
276	send(
277	{
278	type: 'SNAPSHOT',
279	before: { type: 'RESTORE', cellTypes: ctx.cellTypes },
280	after: { type: 'RESTORE', cellTypes: ctx.editedCellTypes },
281	edit: ctx.edit,
282	},
283	{ to: ctx.historyRef }
284	),
285	];
286	}),
287
288	// Add one cell to a specified cell type
289	addCell: send((ctx, evt) => {
290	let cellTypes;
291	if (evt.mode === 'overwrite') {	2!
292	cellTypes = ctx.cellTypes.map((cellType) =>	2✔
293	cellType.id === evt.cellType	2!
294	? !cellType.cells.includes(evt.cell)	2!
295	? {
296	...cellType,
297	cells: [...cellType.cells, evt.cell].sort(function (a, b) {
298	return a - b;	1✔
299	}),
300	}
301	: cellType
302	: {
303	...cellType,
NEW 304	cells: cellType.cells.filter((cell) => cell !== evt.cell),	×
305	}
306	);
NEW 307	} else if (evt.mode === 'multiLabel') {	×
NEW 308	cellTypes = ctx.cellTypes.map((cellType) =>	×
NEW 309	cellType.id === evt.cellType && !cellType.cells.includes(evt.cell)	×
310	? {
311	...cellType,
312	cells: [...cellType.cells, evt.cell].sort(function (a, b) {
NEW 313	return a - b;	×
314	}),
315	}
316	: cellType
317	);
318	}
319	return { type: 'EDITED_CELLTYPES', cellTypes };	2✔
320	}),
321
322	// Add a list of cells to a specified cell type
323	addCells: send((ctx, evt) => {
324	let cellTypes;
325	const oldCells = ctx.cellTypes.filter((cellType) => cellType.id === evt.cellType)[0]	×
326	.cells;
327	const newCells = evt.cells.filter((cell) => !oldCells.includes(cell));	×
NEW 328	if (evt.mode === 'overwrite') {	×
NEW 329	cellTypes = ctx.cellTypes.map((cellType) =>	×
NEW 330	cellType.id === evt.cellType	×
331	? {
332	...cellType,
333	cells: [...cellType.cells, ...newCells].sort(function (a, b) {
NEW 334	return a - b;	×
335	}),
336	}
337	: {
338	...cellType,
NEW 339	cells: cellType.cells.filter((cell) => !evt.cells.includes(cell)),	×
340	}
341	);
NEW 342	} else if (evt.mode === 'multiLabel') {	×
NEW 343	cellTypes = ctx.cellTypes.map((cellType) =>	×
NEW 344	cellType.id === evt.cellType	×
345	? {
346	...cellType,
347	cells: [...cellType.cells, ...newCells].sort(function (a, b) {
NEW 348	return a - b;	×
349	}),
350	}
351	: cellType
352	);
353	}
UNCOV 354	return { type: 'EDITED_CELLTYPES', cellTypes };	×
355	}),
356
357	// Add a prediction map of cells with their label
358	addPredictions: send((ctx, evt) => {
359	let cellTypes = ctx.cellTypes;	×
360	const pred = evt.predictions;	×
361	for (let cell in pred) {	×
362	cellTypes = cellTypes.map((cellType) =>	×
363	cellType.id === pred[cell] + 1 && !cellType.cells.includes(cell) && cell > 0	×
364	? {
365	...cellType,
366	cells: [...cellType.cells, parseInt(cell)].sort(function (a, b) {
367	return a - b;	×
368	}),
369	}
370	: cellType
371	);
372	}
373	return { type: 'EDITED_CELLTYPES', cellTypes };	×
374	}),
375
376	// Remove a single cell from a specified cell type
377	removeCell: send((ctx, evt) => {
378	let cellTypes;
379	cellTypes = ctx.cellTypes.map((cellType) =>	1✔
380	cellType.id === evt.cellType	1!
381	? { ...cellType, cells: cellType.cells.filter((cell) => !(cell === evt.cell)) }	2✔
382	: cellType
383	);
384	return { type: 'EDITED_CELLTYPES', cellTypes };	1✔
385	}),
386
387	// Removes a list of cells from a specified cell type
388	removeCells: send((ctx, evt) => {
389	let cellTypes;
390	const removedCells = evt.cells;	×
391	cellTypes = ctx.cellTypes.map((cellType) =>	×
392	cellType.id === evt.cellType	×
393	? {
394	...cellType,
395	cells: cellType.cells.filter((cell) => !removedCells.includes(cell)),	×
396	}
397	: cellType
398	);
399	return { type: 'EDITED_CELLTYPES', cellTypes };	×
400	}),
401
402	// Add a new empty cell type with a specified color
403	addCellType: send((ctx, evt) => {
404	let cellTypes;
405	cellTypes = [	6✔
406	...ctx.cellTypes,
407	{
408	id: ctx.maxId + 1,
409	feature: ctx.feature,
410	name: `Untitled ${ctx.maxId + 1}`,
411	color: evt.color,
412	cells: [],
413	},
414	];
415	return { type: 'EDITED_CELLTYPES', cellTypes };	6✔
416	}),
417
418	// Remove a specified cell type
419	removeCellType: send((ctx, evt) => {
420	let cellTypes;
421	cellTypes = ctx.cellTypes.filter((item) => !(item.id === evt.cellType));	1✔
422	return { type: 'EDITED_CELLTYPES', cellTypes };	1✔
423	}),
424
425	// Edit the color of a specified cell type
426	editColor: send((ctx, evt) => {
427	let cellTypes;
428	cellTypes = ctx.cellTypes.map((cellType) =>	1✔
429	cellType.id === evt.cellType ? { ...cellType, color: evt.color } : cellType	1!
430	);
431	return { type: 'EDITED_CELLTYPES', cellTypes };	1✔
432	}),
433
434	// Edit the name of a specified cell type
435	editName: send((ctx, evt) => {
436	let cellTypes;
437	cellTypes = ctx.cellTypes.map((cellType) =>	1✔
438	cellType.id === evt.cellType ? { ...cellType, name: evt.name } : cellType	1!
439	);
440	return { type: 'EDITED_CELLTYPES', cellTypes };	1✔
441	}),
442
443	// Toggle a specified cell type on/off for the color map
444	editIsOn: assign({
445	isOn: (ctx, evt) => {
446	let isOn = ctx.isOn;	2✔
447	isOn[evt.cellType] = !isOn[evt.cellType];	2✔
448	return isOn;	2✔
449	},
450	}),
451
452	// Make a specified edit to a row in the marker panel
453	editMarkerPanel: assign({
454	markerPanel: (ctx, evt) => {
455	const editedPanel = ctx.markerPanel.map((row) =>	×
456	row.id === evt.id ? { ...row, [evt.field]: evt.data } : row	×
457	);
458	return editedPanel;	×
459	},
460	}),
461
462	// Toggle all cell types on for the color map
463	toggleAll: assign({
464	isOn: (ctx) => {
465	let isOn = ctx.isOn.map((t) => 1);	×
466	return isOn;	×
467	},
468	}),
469
470	// Toggle all cell types off for the color map
471	untoggleAll: assign({
472	isOn: (ctx) => {
473	let isOn = ctx.isOn.map((t) => 0);	3✔
474	return isOn;	1✔
475	},
476	}),
477
478	// Edit the opacity of a specified cell type
479	editOpacities: assign({
480	opacities: (ctx, evt) => {
481	let opacities = ctx.opacities;	×
482	opacities[evt.cellType] = evt.opacity;	×
483	return opacities;	×
484	},
485	}),
486
487	// Add a new cell type to track for color map toggling
488	addIsOn: assign({
489	isOn: (ctx) => {
490	let isOn = ctx.isOn;	6✔
491	isOn.push(true);	6✔
492	return isOn;	6✔
493	},
494	}),
495
496	// Remove a cell type to track for color map toggling
497	removeIsOn: assign({
498	isOn: (ctx, evt) => {
499	const isOn = ctx.isOn.filter((e, i) => i !== evt.cellType);	2✔
500	return isOn;	1✔
501	},
502	}),
503
504	// Add a new opacity to track for color map
505	addOpacity: assign({
506	opacities: (ctx) => {
507	let opacities = ctx.opacities;	6✔
508	opacities.push(0.3);	6✔
509	return opacities;	6✔
510	},
511	}),
512
513	restore: pure((_, evt) => {
514	return [	×
515	assign({ cellTypes: evt.cellTypes }),
516	send({ type: 'CELLTYPES', cellTypes: evt.cellTypes }, { to: 'eventBus' }),
517	];
518	}),
519	},
520	}
521	);
522
523	export default createCellTypesMachine;

vanvalenlab / deepcell-label / 4985420685

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