Skip to content

Commit b6361bb

Browse files
illusionalillusional
committed
Previous commit I forgot?
1 parent 2541cbd commit b6361bb

File tree

3 files changed

+265
-216
lines changed

3 files changed

+265
-216
lines changed

‎web/src/pages/project/ParticipantGridRow.tsx

+250
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
import * as React from 'react'
2+
3+
import _ from 'lodash'
4+
5+
import FamilyLink from '../../shared/components/links/FamilyLink'
6+
import SampleLink from '../../shared/components/links/SampleLink'
7+
import SequencingGroupLink from '../../shared/components/links/SequencingGroupLink'
8+
import sanitiseValue from '../../shared/utilities/sanitiseValue'
9+
import { Assay, NestedParticipant, NestedSample, NestedSequencingGroup } from '../../sm-api/api'
10+
import { ProjectGridField } from './ProjectColumnOptions'
11+
12+
interface IProjectGridParticipantRowProps {
13+
projectName: string
14+
15+
participant: NestedParticipant
16+
familyFields: ProjectGridField[]
17+
participantFields: ProjectGridField[]
18+
sampleFields: ProjectGridField[]
19+
sequencingGroupFields: ProjectGridField[]
20+
assayFields: ProjectGridField[]
21+
22+
backgroundColor?: string
23+
}
24+
25+
const maxOr1 = (v: number) => Math.max(1, v)
26+
27+
const nRowsForParticipant = (participant: NestedParticipant) => {
28+
const res = participant.samples.map((s) => nRowsForSample(s)).reduce((a, b) => a + b, 0)
29+
30+
return maxOr1(res)
31+
}
32+
33+
const nRowsForSample = (sample: NestedSample) => {
34+
const res = (sample.sequencing_groups || [])
35+
.map((sg) => maxOr1((sg.assays || []).length))
36+
.reduce((a, b) => a + b, 0)
37+
return maxOr1(res)
38+
}
39+
40+
const border = '1px solid #dee2e6'
41+
42+
const FamilyCells: React.FC<{
43+
fields: ProjectGridField[]
44+
participant: NestedParticipant
45+
backgroundColor?: string
46+
projectName: string
47+
participantRowSpan?: number
48+
}> = ({ fields, participant, backgroundColor, projectName, participantRowSpan }) => (
49+
<>
50+
{fields.map((field) => (
51+
<td
52+
key={`${participant.id}family.${field.name}`}
53+
style={{
54+
display: field.isVisible ? 'table-cell' : 'none',
55+
backgroundColor,
56+
borderRight: border,
57+
borderBottom: border,
58+
borderTop: border,
59+
borderLeft: '2px solid var(--color-border-color)',
60+
}}
61+
rowSpan={participantRowSpan}
62+
>
63+
{field.name == 'external_id' ? (
64+
<FamilyLink
65+
id={`${participant.families.map((f) => f.id)[0]}`}
66+
projectName={projectName}
67+
>
68+
{participant.families.map((f) => f.external_id).join(', ')}
69+
</FamilyLink>
70+
) : (
71+
participant.families
72+
.map((fam) => sanitiseValue(_.get(fam, field.name)))
73+
.join(', ')
74+
)}
75+
</td>
76+
))}
77+
</>
78+
)
79+
80+
const ParticipantCells: React.FC<{
81+
fields: ProjectGridField[]
82+
participant: NestedParticipant
83+
backgroundColor?: string
84+
projectName: string
85+
participantRowSpan?: number
86+
}> = ({ fields, participant, backgroundColor, projectName, participantRowSpan }) => (
87+
<>
88+
{fields.map((field, i) => (
89+
<td
90+
style={{
91+
display: field.isVisible ? 'table-cell' : 'none',
92+
backgroundColor,
93+
borderRight: border,
94+
borderBottom: border,
95+
borderTop: border,
96+
borderLeft:
97+
i === 0
98+
? '2px solid var(--color-border-color)'
99+
: '1px solid var(--color-border-default)',
100+
}}
101+
key={`${participant.id}participant.${field.name}`}
102+
rowSpan={participantRowSpan}
103+
>
104+
{sanitiseValue(_.get(participant, field.name))}
105+
</td>
106+
))}
107+
</>
108+
)
109+
110+
export const ProjectGridParticipantRows: React.FC<IProjectGridParticipantRowProps> = ({
111+
participant,
112+
backgroundColor,
113+
projectName,
114+
participantFields,
115+
sampleFields,
116+
sequencingGroupFields,
117+
assayFields,
118+
familyFields,
119+
...props
120+
}) => {
121+
const lengthOfParticipant = nRowsForParticipant(participant)
122+
const rows = participant.samples.flatMap((s, sidx) => {
123+
// const border = '1px solid #dee2e6'
124+
125+
const lengthOfSample = nRowsForSample(s)
126+
127+
const participantRowSpan = lengthOfParticipant > 0 ? lengthOfParticipant : undefined
128+
const samplesRowSpan = lengthOfSample > 0 ? lengthOfSample : undefined
129+
130+
let sgs: Partial<NestedSequencingGroup>[] = s.sequencing_groups || []
131+
if (sgs.length === 0) {
132+
sgs = [{}]
133+
}
134+
return sgs.flatMap((sg, sgidx) => {
135+
let assays: Partial<Assay>[] = sg.assays || []
136+
if (assays.length === 0) {
137+
assays = [{}]
138+
}
139+
140+
return assays.map((assay, assayidx) => {
141+
const isFirstOfGroup = sidx === 0 && sgidx === 0 && assayidx === 0
142+
return (
143+
<tr key={`${participant.external_id}-${s.id}-${sg.id}-${assay.id}`} {...props}>
144+
{isFirstOfGroup && (
145+
<>
146+
<FamilyCells
147+
fields={familyFields}
148+
participant={participant}
149+
projectName={projectName}
150+
backgroundColor={backgroundColor}
151+
participantRowSpan={participantRowSpan}
152+
/>
153+
<ParticipantCells
154+
fields={participantFields}
155+
participant={participant}
156+
projectName={projectName}
157+
backgroundColor={backgroundColor}
158+
participantRowSpan={participantRowSpan}
159+
/>
160+
</>
161+
)}
162+
{sgidx === 0 &&
163+
assayidx === 0 &&
164+
sampleFields.map((field, i) => (
165+
<td
166+
style={{
167+
display: field.isVisible ? 'table-cell' : 'none',
168+
backgroundColor,
169+
borderRight: border,
170+
borderBottom: border,
171+
borderTop: border,
172+
borderLeft:
173+
i === 0
174+
? '2px solid var(--color-border-color)'
175+
: '1px solid var(--color-border-default)',
176+
// border,
177+
}}
178+
key={`${s.id}sample.${field.name}`}
179+
rowSpan={samplesRowSpan}
180+
>
181+
{field.name === 'external_id' || field.name === 'id' ? (
182+
<SampleLink id={s.id} projectName={projectName}>
183+
{sanitiseValue(_.get(s, field.name))}
184+
</SampleLink>
185+
) : (
186+
sanitiseValue(_.get(s, field.name))
187+
)}
188+
</td>
189+
))}
190+
{assayidx === 0 &&
191+
sequencingGroupFields.map((field, i) => (
192+
<td
193+
style={{
194+
display: field.isVisible ? 'table-cell' : 'none',
195+
borderRight: border,
196+
borderBottom: border,
197+
borderTop: border,
198+
borderLeft:
199+
i === 0
200+
? '2px solid var(--color-border-color)'
201+
: '1px solid var(--color-border-default)',
202+
backgroundColor,
203+
}}
204+
key={`${s.id}sequencing_group.${field.name}`}
205+
rowSpan={
206+
(sg.assays ?? []).length > 0
207+
? (sg.assays ?? []).length
208+
: undefined
209+
}
210+
>
211+
{field.name === 'id' ? (
212+
<SequencingGroupLink
213+
projectName={projectName}
214+
id={s.id}
215+
sg_id={_.get(sg, 'id')?.toString()}
216+
>
217+
{sanitiseValue(_.get(sg, field.name))}
218+
</SequencingGroupLink>
219+
) : (
220+
sanitiseValue(_.get(sg, field.name))
221+
)}
222+
</td>
223+
))}
224+
{assayFields.map((field, i) => (
225+
<td
226+
style={{
227+
display: field.isVisible ? 'table-cell' : 'none',
228+
backgroundColor,
229+
borderRight: border,
230+
borderBottom: border,
231+
borderTop: border,
232+
borderLeft:
233+
i === 0
234+
? '2px solid var(--color-border-color)'
235+
: '1px solid var(--color-border-default)',
236+
// border,
237+
}}
238+
key={`${s.id}assay.${field.name}`}
239+
>
240+
{sanitiseValue(_.get(assay, field.name))}
241+
</td>
242+
))}
243+
</tr>
244+
)
245+
})
246+
})
247+
})
248+
// return rows
249+
return <>{rows}</>
250+
}

0 commit comments

Comments
 (0)