1919805135

Build # 1919805135

Build Type

github

Committed by GitHub

Commit Message

Merge 47e00e53f into 02b12f033

Pull Request Pull Request #313: Test React component tree and state management by mocking load events

Run Details

105 of 342 branches covered (30.7%)

Branch coverage included in aggregate %.

54 of 119 new or added lines in 15 files covered. (45.38%)

8 existing lines in 2 files now uncovered.

1820 of 2951 relevant lines covered (61.67%)

5.02 hits per line

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

4.65

/visualizer/src/Canvas/Raw/ChannelCanvas.js

import { useSelector } from '@xstate/react';
import { GPU } from 'gpu.js';
import { useEffect, useRef } from 'react';
import { useArrays, useCanvas, useImage } from '../../ProjectContext';

/** Converts a hex string like #FF0000 to three element array for the RGB values. */
const hexToRGB = (hex) => {
  const r = parseInt('0x' + hex[1] + hex[2]);
  const g = parseInt('0x' + hex[3] + hex[4]);
  const b = parseInt('0x' + hex[5] + hex[6]);
  return [r, g, b];
};

export const ChannelCanvas = ({ layer, setCanvases }) => {
  const canvas = useCanvas();
  const width = useSelector(canvas, (state) => state.context.width);
  const height = useSelector(canvas, (state) => state.context.height);

  const layerIndex = useSelector(layer, (state) => state.context.layer);
  const color = useSelector(layer, (state) => state.context.color);
  const [min, max] = useSelector(layer, (state) => state.context.range);
  const on = useSelector(layer, (state) => state.context.on);
  const channel = useSelector(layer, (state) => state.context.channel);

  const image = useImage();
  const frame = useSelector(image, (state) => state.context.frame);

  const arrays = useArrays();
  const rawArray = useSelector(
    arrays,
    (state) => state.context.rawArrays && state.context.rawArrays[channel][frame]
  );

  const kernelRef = useRef();
  const canvasRef = useRef();
  useEffect(() => {
    const gpu = new GPU();
    const kernel = gpu.createKernel(
      `function (data, on, color, min, max) {
        if (on) {
          const x = this.thread.x;
          const y = this.constants.h - 1 - this.thread.y;
          const v = (data[y][x] - min) / 255;
          const diff = max - min;
          const scale = diff === 0 ? 1 : 1 / diff;
          const [r, g, b] = color;
          this.color(r * v * scale, g * v * scale, b * v * scale, 1);
        } else {
          this.color(0, 0, 0, 0);
        }
      }`,
      {
        constants: { w: width, h: height },
        output: [width, height],
        graphical: true,
      }
    );
    kernelRef.current = kernel;
    canvasRef.current = kernel.canvas;
    return () => {
      kernel.destroy();
      gpu.destroy();
    };
  }, [width, height]);

  useEffect(() => {
    if (rawArray) {
      // Rerender the canvas for this component
      kernelRef.current(rawArray, on, hexToRGB(color), min, max);
      // Rerender the parent canvas
      setCanvases((canvases) => ({ ...canvases, [layerIndex]: canvasRef.current }));
    }
  }, [rawArray, on, color, min, max, width, height, layerIndex, setCanvases]);

  // Remove canvas from canvases when layer is removed
  useEffect(() => {
    return () =>
      setCanvases((prevCanvases) => {
        delete prevCanvases[layerIndex];
        return { ...prevCanvases };
      });
  }, [setCanvases, layerIndex]);

  return null;
};

export default ChannelCanvas;

1	import { useSelector } from '@xstate/react';
2	import { GPU } from 'gpu.js';
3	import { useEffect, useRef } from 'react';
4	import { useArrays, useCanvas, useImage } from '../../ProjectContext';
5
6	/** Converts a hex string like #FF0000 to three element array for the RGB values. */
7	const hexToRGB = (hex) => {	4✔
8	const r = parseInt('0x' + hex[1] + hex[2]);	×
9	const g = parseInt('0x' + hex[3] + hex[4]);	×
10	const b = parseInt('0x' + hex[5] + hex[6]);	×
11	return [r, g, b];	×
12	};
13
14	export const ChannelCanvas = ({ layer, setCanvases }) => {	4✔
15	const canvas = useCanvas();	×
16	const width = useSelector(canvas, (state) => state.context.width);	×
17	const height = useSelector(canvas, (state) => state.context.height);	×
18
19	const layerIndex = useSelector(layer, (state) => state.context.layer);	×
20	const color = useSelector(layer, (state) => state.context.color);	×
21	const [min, max] = useSelector(layer, (state) => state.context.range);	×
22	const on = useSelector(layer, (state) => state.context.on);	×
23	const channel = useSelector(layer, (state) => state.context.channel);	×
24
25	const image = useImage();	×
26	const frame = useSelector(image, (state) => state.context.frame);	×
27
28	const arrays = useArrays();	×
29	const rawArray = useSelector(	×
30	arrays,
31	(state) => state.context.rawArrays && state.context.rawArrays[channel][frame]	×
32	);
33
34	const kernelRef = useRef();	×
35	const canvasRef = useRef();	×
36	useEffect(() => {	×
37	const gpu = new GPU();	×
38	const kernel = gpu.createKernel(	×
39	`function (data, on, color, min, max) {
40	if (on) {
41	const x = this.thread.x;
42	const y = this.constants.h - 1 - this.thread.y;
43	const v = (data[y][x] - min) / 255;
44	const diff = max - min;
45	const scale = diff === 0 ? 1 : 1 / diff;
46	const [r, g, b] = color;
47	this.color(r * v * scale, g * v * scale, b * v * scale, 1);
48	} else {
49	this.color(0, 0, 0, 0);
50	}
51	}`,
52	{
53	constants: { w: width, h: height },
54	output: [width, height],
55	graphical: true,
56	}
57	);
58	kernelRef.current = kernel;	×
59	canvasRef.current = kernel.canvas;	×
60	return () => {	×
61	kernel.destroy();	×
62	gpu.destroy();	×
63	};
64	}, [width, height]);
65
66	useEffect(() => {	×
NEW 67	if (rawArray) {	×
68	// Rerender the canvas for this component
NEW 69	kernelRef.current(rawArray, on, hexToRGB(color), min, max);	×
70	// Rerender the parent canvas
NEW 71	setCanvases((canvases) => ({ ...canvases, [layerIndex]: canvasRef.current }));	×
72	}
73	}, [rawArray, on, color, min, max, width, height, layerIndex, setCanvases]);
74
75	// Remove canvas from canvases when layer is removed
76	useEffect(() => {	×
77	return () =>	×
78	setCanvases((prevCanvases) => {	×
79	delete prevCanvases[layerIndex];	×
80	return { ...prevCanvases };	×
81	});
82	}, [setCanvases, layerIndex]);
83
84	return null;	×
85	};
86
87	export default ChannelCanvas;

vanvalenlab / deepcell-label / 1919805135

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