1924268229

Build # 1924268229

Build Type

github

Committed by GitHub

Commit Message

Merge 9d032fddd 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%)

2.81 hits per line

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

18.92

/visualizer/src/App.js

import { Box, createTheme, StyledEngineProvider, ThemeProvider, Typography } from '@mui/material';
import { styled } from '@mui/system';
import { useMachine, useSelector } from '@xstate/react';
import { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { interpret } from 'xstate';
import Footer from './Footer/Footer';
import Label from './Label';
import Load from './Load/Load';
import NavBar from './Navbar';
import ProjectContext from './ProjectContext';
import QualityControlContext from './QualityControlContext';
import createLoadMachine from './service/loadMachine';
import createProjectMachine from './service/projectMachine';
import { isProjectId, qualityControl } from './service/service';

// import service from './service/service';

// inspect({
//   // options
//   // url: 'https://statecharts.io/inspect', // (default)
//   iframe: false // open in new window
// });

const Div = styled('div')``;

const theme = createTheme();

function Review() {
  const project = useSelector(qualityControl, (state) => {
    const { projectId, projects } = state.context;
    return projects[projectId];
  });

  return (
    <QualityControlContext qualityControl={qualityControl}>
      <ProjectContext project={project}>
        <Label review={true} />
      </ProjectContext>
    </QualityControlContext>
  );
}

function getProjectId() {
  const location = window.location;
  const search = new URLSearchParams(location.search);
  const projectId = search.get('projectId');
  if (!projectId || projectId.split(',').length > 1) {
    return;
  }
  return projectId;
}

function LabelProject() {
  const projectId = getProjectId();
  const [loadState] = useMachine(createLoadMachine(projectId));
  const [project] = useState(interpret(createProjectMachine(projectId)).start());

  useEffect(() => {
    if (loadState.matches('loaded')) {
      const { rawArrays, labeledArrays, labels } = loadState.context;
      project.send({
        type: 'LOADED',
        rawArrays,
        labeledArrays,
        labels,
      });
    }
  }, [loadState, project]);

  return (
    project && (
      <ProjectContext project={project}>
        <Label review={false} />
      </ProjectContext>
    )
  );
}

function InvalidProjectId() {
  const id = new URLSearchParams(window.location.search).get('projectId');

  return (
    <Box
      sx={{
        boxSizing: 'border-box',
        display: 'flex',
        flexGrow: 1,
        flexDirection: 'column',
        p: 2,
        alignItems: 'center',
      }}
    >
      <Typography>
        <tt>{id}</tt> is not a valid project ID.
      </Typography>
      <Typography>
        Use a 12 character ID in your URL with only <tt>_</tt>, <tt>-</tt>, letters or numbers like{' '}
        <tt>projectId=abc-ABC_1234</tt>.
      </Typography>
    </Box>
  );
}

function DeepCellLabel() {
  const id = new URLSearchParams(window.location.search).get('projectId');

  return (
    <Div
      sx={{
        boxSizing: 'border-box',
        display: 'flex',
        minHeight: '100vh',
        flexDirection: 'column',
      }}
    >
      <NavBar />
      <Router>
        <Routes>
          <Route path='/' element={<Load />} />
          <Route
            path='/project'
            element={
              isProjectId(id) ? (
                <LabelProject />
              ) : id?.split(',')?.every(isProjectId) ? (
                <Review />
              ) : (
                <InvalidProjectId />
              )
            }
          />
        </Routes>
      </Router>
      <Footer />
    </Div>
  );
}

function App() {
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <DeepCellLabel />
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

export default App;

1	import { Box, createTheme, StyledEngineProvider, ThemeProvider, Typography } from '@mui/material';
2	import { styled } from '@mui/system';
3	import { useMachine, useSelector } from '@xstate/react';
4	import { useEffect, useState } from 'react';
5	import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
6	import { interpret } from 'xstate';
7	import Footer from './Footer/Footer';
8	import Label from './Label';
9	import Load from './Load/Load';
10	import NavBar from './Navbar';
11	import ProjectContext from './ProjectContext';
12	import QualityControlContext from './QualityControlContext';
13	import createLoadMachine from './service/loadMachine';
14	import createProjectMachine from './service/projectMachine';
15	import { isProjectId, qualityControl } from './service/service';
16
17	// import service from './service/service';
18
19	// inspect({
20	// // options
21	// // url: 'https://statecharts.io/inspect', // (default)
22	// iframe: false // open in new window
23	// });
24
25	const Div = styled('div')``;	1✔
26
27	const theme = createTheme();	1✔
28
29	function Review() {
30	const project = useSelector(qualityControl, (state) => {	×
31	const { projectId, projects } = state.context;	×
32	return projects[projectId];	×
33	});
34
35	return (	×
36	<QualityControlContext qualityControl={qualityControl}>
37	<ProjectContext project={project}>
38	<Label review={true} />
39	</ProjectContext>
40	</QualityControlContext>
41	);
42	}
43
44	function getProjectId() {
NEW 45	const location = window.location;	×
NEW 46	const search = new URLSearchParams(location.search);	×
NEW 47	const projectId = search.get('projectId');	×
NEW 48	if (!projectId \|\| projectId.split(',').length > 1) {	×
NEW 49	return;	×
50	}
NEW 51	return projectId;	×
52	}
53
54	function LabelProject() {
NEW 55	const projectId = getProjectId();	×
NEW 56	const [loadState] = useMachine(createLoadMachine(projectId));	×
NEW 57	const [project] = useState(interpret(createProjectMachine(projectId)).start());	×
58
59	useEffect(() => {	×
NEW 60	if (loadState.matches('loaded')) {	×
NEW 61	const { rawArrays, labeledArrays, labels } = loadState.context;	×
NEW 62	project.send({	×
63	type: 'LOADED',
64	rawArrays,
65	labeledArrays,
66	labels,
67	});
68	}
69	}, [loadState, project]);
70
71	return (	×
72	project && (	×
73	<ProjectContext project={project}>
74	<Label review={false} />
75	</ProjectContext>
76	)
77	);
78	}
79
80	function InvalidProjectId() {
81	const id = new URLSearchParams(window.location.search).get('projectId');	×
82
83	return (	×
84	<Box
85	sx={{
86	boxSizing: 'border-box',
87	display: 'flex',
88	flexGrow: 1,
89	flexDirection: 'column',
90	p: 2,
91	alignItems: 'center',
92	}}
93	>
94	<Typography>
95	<tt>{id}</tt> is not a valid project ID.
96	</Typography>
97	<Typography>
98	Use a 12 character ID in your URL with only <tt>_</tt>, <tt>-</tt>, letters or numbers like{' '}
99	<tt>projectId=abc-ABC_1234</tt>.
100	</Typography>
101	</Box>
102	);
103	}
104
105	function DeepCellLabel() {
106	const id = new URLSearchParams(window.location.search).get('projectId');	1✔
107
108	return (	1✔
109	<Div
110	sx={{
111	boxSizing: 'border-box',
112	display: 'flex',
113	minHeight: '100vh',
114	flexDirection: 'column',
115	}}
116	>
117	<NavBar />
118	<Router>
119	<Routes>
120	<Route path='/' element={<Load />} />
121	<Route
122	path='/project'
123	element={
124	isProjectId(id) ? (	1!
125	<LabelProject />
126	) : id?.split(',')?.every(isProjectId) ? (	1!
127	<Review />
128	) : (
129	<InvalidProjectId />
130	)
131	}
132	/>
133	</Routes>
134	</Router>
135	<Footer />
136	</Div>
137	);
138	}
139
140	function App() {
141	return (	1✔
142	<StyledEngineProvider injectFirst>
143	<ThemeProvider theme={theme}>
144	<DeepCellLabel />
145	</ThemeProvider>
146	</StyledEngineProvider>
147	);
148	}
149
150	export default App;

vanvalenlab / deepcell-label / 1924268229

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