Skip to content

Commit 8b8849e

Browse files
kttkjlkttkjl
authored
Merge pull request #192 from bcgsc/release/v6.10.0
Release/v6.10.0
2 parents 9188e12 + 21d8fdc commit 8b8849e

File tree

41 files changed

+1017
-520
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1017
-520
lines changed

‎app/common.d.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,9 +189,20 @@ type ExpOutliersType = {
189189
tpm: number | null;
190190
} & RecordDefaults;
191191

192+
type TemplateType = {
193+
ident: string;
194+
name: string;
195+
};
196+
197+
type AppendixType = RecordDefaults & {
198+
text: string;
199+
};
200+
192201
export {
193202
RecordDefaults,
194203
UserType,
204+
TemplateType,
205+
AppendixType,
195206
GroupType,
196207
UserProjectsType,
197208
UserGroupMemberType,

‎app/views/ReportView/components/Appendices/components/AppendixEditor/AppendixEditor.stories.tsx renamed to ‎app/components/AppendixEditor/AppendixEditor.stories.tsx

File renamed without changes.

‎app/views/ReportView/components/Appendices/components/AppendixEditor/index.scss renamed to ‎app/components/AppendixEditor/index.scss

File renamed without changes.

‎app/views/ReportView/components/Appendices/components/AppendixEditor/index.tsx renamed to ‎app/components/AppendixEditor/index.tsx

File renamed without changes.

‎app/components/DataTable/components/ImageViewer/index.tsx

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@ import Image, { ImageType } from '@/components/Image';
1010

1111
import './index.scss';
1212

13+
type ImageDataProp = { image: ImageType } | { image: ImageType[] };
14+
1315
type ImageViewerProps = {
1416
/** Handles dialog close */
1517
onClose: () => void;
1618
/** Row object selected from table */
17-
selectedRow: { image: ImageType },
19+
selectedRow: ImageDataProp,
1820
/** Dialog open state */
1921
isOpen: boolean;
2022
};
@@ -28,21 +30,37 @@ const ImageViewer = ({
2830
onClose();
2931
}, [onClose]);
3032

33+
let renderedImage;
34+
if (selectedRow.image) {
35+
if (Array.isArray(selectedRow.image)) {
36+
renderedImage = selectedRow.image.map((img) => (
37+
<Image
38+
image={img}
39+
showTitle
40+
showCaption
41+
isZoomable={false}
42+
/>
43+
));
44+
} else {
45+
renderedImage = (
46+
<Image
47+
image={selectedRow.image}
48+
showTitle
49+
showCaption
50+
isZoomable={false}
51+
/>
52+
);
53+
}
54+
}
55+
3156
return (
3257
<Dialog
3358
onClose={handleClose}
3459
open={isOpen}
3560
maxWidth="xl"
3661
>
3762
<DialogContent>
38-
{selectedRow.image && (
39-
<Image
40-
image={selectedRow.image}
41-
showTitle
42-
showCaption
43-
isZoomable={false}
44-
/>
45-
)}
63+
{renderedImage}
4664
</DialogContent>
4765
<DialogActions>
4866
<Button color="primary" onClick={handleClose}>

‎app/components/Image/index.tsx

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ import './index.scss';
77

88
type ImageProps = {
99
image?: ImageType;
10-
height?: number;
11-
width?: number;
10+
height?: number | string;
11+
width?: number | string;
1212
showTitle?: boolean;
1313
showCaption?: boolean;
1414
isZoomable?: boolean;
15+
/** Style to apply to img tag */
16+
imgStyle?: React.ComponentPropsWithoutRef<'img'>['style'];
1517
};
1618

1719
const Image = ({
@@ -22,11 +24,12 @@ const Image = ({
2224
format,
2325
key,
2426
} = {} as ImageType,
25-
height = 0,
26-
width = 0,
27+
height = undefined,
28+
width = undefined,
2729
showTitle = false,
2830
showCaption = false,
2931
isZoomable = true,
32+
imgStyle = {},
3033
}: ImageProps): JSX.Element => {
3134
const [isZoomed, setIsZoomed] = useState(false);
3235

@@ -37,68 +40,67 @@ const Image = ({
3740
}, [isZoomable]);
3841

3942
return (
40-
<>
41-
{data && (
42-
<>
43-
<div className="image">
44-
{showTitle && title && (
45-
<Typography variant="h3">
46-
{title}
47-
</Typography>
48-
)}
49-
<Button
50-
classes={{ root: 'image__button' }}
51-
component="label"
43+
data && (
44+
<>
45+
<div className="image">
46+
{showTitle && title && (
47+
<Typography variant="h3">
48+
{title}
49+
</Typography>
50+
)}
51+
<Button
52+
classes={{ root: 'image__button' }}
53+
component="label"
54+
onClick={handleZoom}
55+
>
56+
<img
57+
className={`image ${isZoomable && !isZoomed ? 'image__zoom--in' : ''}`}
58+
src={`data:image/${format};base64,${data}`}
59+
alt={title}
60+
key={key}
61+
height={Number.isInteger(height) ? `${height}px` : height}
62+
width={Number.isInteger(width) ? `${height}px` : width}
63+
style={imgStyle}
64+
/>
65+
</Button>
66+
{showCaption && caption && (
67+
<Typography className="image__caption" variant="caption">
68+
{caption}
69+
</Typography>
70+
)}
71+
</div>
72+
{isZoomed && (
73+
<Fade in={isZoomed}>
74+
<button
75+
className="image__dialog-background"
5276
onClick={handleZoom}
77+
type="button"
5378
>
54-
<img
55-
className={`image ${isZoomable && !isZoomed ? 'image__zoom--in' : ''}`}
56-
src={`data:image/${format};base64,${data}`}
57-
alt={title}
58-
key={key}
59-
height={height ? `${height}px` : undefined}
60-
width={width ? `${width}px` : undefined}
61-
/>
62-
</Button>
63-
{showCaption && caption && (
64-
<Typography className="image__caption" variant="caption">
65-
{caption}
66-
</Typography>
67-
)}
68-
</div>
69-
{isZoomed && (
70-
<Fade in={isZoomed}>
71-
<button
72-
className="image__dialog-background"
73-
onClick={handleZoom}
74-
type="button"
79+
<div
80+
className="image__dialog-button"
7581
>
76-
<div
77-
className="image__dialog-button"
78-
>
79-
{showTitle && title && (
80-
<Typography variant="h3">
81-
{title}
82-
</Typography>
83-
)}
84-
<img
85-
className={`image__data ${isZoomable && isZoomed ? 'image__zoom--out' : ''}`}
86-
src={`data:image/${format};base64,${data}`}
87-
alt={title}
88-
key={key}
89-
/>
90-
{showCaption && caption && (
91-
<Typography className="image__caption" variant="caption">
92-
{caption}
93-
</Typography>
94-
)}
95-
</div>
96-
</button>
97-
</Fade>
98-
)}
99-
</>
100-
)}
101-
</>
82+
{showTitle && title && (
83+
<Typography variant="h3">
84+
{title}
85+
</Typography>
86+
)}
87+
<img
88+
className={`image__data ${isZoomable && isZoomed ? 'image__zoom--out' : ''}`}
89+
src={`data:image/${format};base64,${data}`}
90+
alt={title}
91+
key={key}
92+
/>
93+
{showCaption && caption && (
94+
<Typography className="image__caption" variant="caption">
95+
{caption}
96+
</Typography>
97+
)}
98+
</div>
99+
</button>
100+
</Fade>
101+
)}
102+
</>
103+
)
102104
);
103105
};
104106

0 commit comments

Comments
 (0)