Skip to content

Commit

Permalink
a
Browse files Browse the repository at this point in the history
  • Loading branch information
@jfkonecn
jfkonecn committed Dec 30, 2024
1 parent e3038fd commit 3d36d62
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 73 deletions.
28 changes: 26 additions & 2 deletions src/main/webapp/app/pages/somaticGermlineAlterationPage/AlterationTile.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,15 @@
color: #878d96;
}

.alterationTileContainer {
container-type: inline-size;
width: 100%;
}

.alterationTile {
padding: 16px;
padding-bottom: 24px;
min-width: 347px;
max-width: 392px;
width: 100%;
gap: 8px;
box-shadow: $default-box-shadow;
border-radius: 8px;
Expand All @@ -29,3 +33,23 @@
grid-auto-rows: 1fr;
height: 100%;
}

@container (min-width: 500px) {
.alterationTile {
height: 140px;
}
.alterationTileItems {
display: flex;
gap: 16px;
flex-direction: row;
}
.alterationTileItems > * {
border-right: 1px solid #e5e0df;
padding-right: 16px;
flex-grow: 1;
}

.alterationTileItems > *:last-child {
border-right: none;
}
}
41 changes: 25 additions & 16 deletions src/main/webapp/app/pages/somaticGermlineAlterationPage/AlterationTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,22 +52,31 @@ export default function AlterationTile({
items,
}: AlterationTileProps): JSX.Element {
return (
<div className={classNames('d-flex', 'flex-column', styles.alterationTile)}>
<h3 className="h6">{title}</h3>
<div className={classNames(styles.alterationTileItems)}>
{items.map((parent, i) => {
if (Array.isArray(parent)) {
return parent.map((child, j) => {
return <AlterationItem key={`${i}:${j}`} {...child} />;
});
} else {
return (
<div className={classNames(styles.alterationTileColumnMerge)}>
<AlterationItem key={i} {...parent} />
</div>
);
}
})}
<div className={classNames(styles.alterationTileContainer)}>
<div
className={classNames(
'd-flex',
'flex-column',
'alterationTileItems',
styles.alterationTile
)}
>
<h3 className="h6">{title}</h3>
<div className={classNames(styles.alterationTileItems)}>
{items.map((parent, i) => {
if (Array.isArray(parent)) {
return parent.map((child, j) => {
return <AlterationItem key={`${i}:${j}`} {...child} />;
});
} else {
return (
<div className={classNames(styles.alterationTileColumnMerge)}>
<AlterationItem key={i} {...parent} />
</div>
);
}
})}
</div>
</div>
</div>
);
Expand Down
6 changes: 6 additions & 0 deletions .../webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,12 @@
flex-wrap: wrap;
}

@media (min-width: 576px) {
.alterationTiles {
flex-wrap: nowrap;
}
}

.descriptionContainer {
margin-bottom: 1rem;
}
122 changes: 67 additions & 55 deletions src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -615,71 +615,83 @@ export class SomaticGermlineAlterationPage extends React.Component<
/>
</>
)}
<AlterationTile
title="Highest level of evidence"
items={[
[
{
title: 'Therapeutic',
value: (
<div className={classNames('d-flex', 'flex-row')}>
{(this.store.geneNumber.result.highestSensitiveLevel ||
this.store.geneNumber.result.highestResistanceLevel ||
this.store.geneNumber.result
.highestDiagnosticImplicationLevel ||
this.store.geneNumber.result
.highestPrognosticImplicationLevel ||
this.store.geneNumber.result
.highestPrognosticImplicationLevel ||
this.store.geneNumber.result.highestFdaLevel) && (
<AlterationTile
title="Highest level of evidence"
items={[
[
{
title: 'Therapeutic',
value: (
<div
className={classNames('d-flex', 'flex-row')}
>
<HighestLevelEvidence
type="Sensitive"
level={
this.store.geneNumber.result
.highestSensitiveLevel
}
/>
<HighestLevelEvidence
type="Resistance"
level={
this.store.geneNumber.result
.highestResistanceLevel
}
/>
</div>
),
},
{
title: 'Diagnostic',
value: (
<HighestLevelEvidence
type="Sensitive"
type="DiagnosticImplication"
level={
this.store.geneNumber.result
.highestSensitiveLevel
.highestDiagnosticImplicationLevel
}
/>
),
},
],
[
{
title: 'Prognostic',
value: (
<HighestLevelEvidence
type="Resistance"
type="PrognosticImplication"
level={
this.store.geneNumber.result
.highestResistanceLevel
.highestPrognosticImplicationLevel
}
/>
</div>
),
},
{
title: 'Diagnostic',
value: (
<HighestLevelEvidence
type="DiagnosticImplication"
level={
this.store.geneNumber.result
.highestDiagnosticImplicationLevel
}
/>
),
},
],
[
{
title: 'Prognostic',
value: (
<HighestLevelEvidence
type="PrognosticImplication"
level={
this.store.geneNumber.result
.highestPrognosticImplicationLevel
}
/>
),
},
{
title: 'FDA',
value: (
<HighestLevelEvidence
type="Fda"
level={
this.store.geneNumber.result.highestFdaLevel
}
/>
),
},
],
]}
/>
),
},
{
title: 'FDA',
value: (
<HighestLevelEvidence
type="Fda"
level={
this.store.geneNumber.result.highestFdaLevel
}
/>
),
},
],
]}
/>
)}
</div>
</Col>
</Row>
Expand Down

0 comments on commit 3d36d62

Please sign in to comment.