Merge pull request #192 from bcgsc/release/v6.10.0

Release/v6.10.0
bcgsc · Mar 30, 2022 · 8b8849e · 8b8849e
2 parents 9188e12 + 21d8fdc
commit 8b8849e
Show file tree

Hide file tree

Showing 41 changed files with 1,017 additions and 520 deletions.
diff --git a/app/common.d.ts b/app/common.d.ts
@@ -189,9 +189,20 @@ type ExpOutliersType = {
   tpm: number | null;
 } & RecordDefaults;
 
+type TemplateType = {
+  ident: string;
+  name: string;
+};
+
+type AppendixType = RecordDefaults & {
+  text: string;
+};
+
 export {
   RecordDefaults,
   UserType,
+  TemplateType,
+  AppendixType,
   GroupType,
   UserProjectsType,
   UserGroupMemberType,

diff --git a/...AppendixEditor/AppendixEditor.stories.tsx → ...AppendixEditor/AppendixEditor.stories.tsx b/...AppendixEditor/AppendixEditor.stories.tsx → ...AppendixEditor/AppendixEditor.stories.tsx
diff --git a/...ices/components/AppendixEditor/index.scss → app/components/AppendixEditor/index.scss b/...ices/components/AppendixEditor/index.scss → app/components/AppendixEditor/index.scss
diff --git a/...dices/components/AppendixEditor/index.tsx → app/components/AppendixEditor/index.tsx b/...dices/components/AppendixEditor/index.tsx → app/components/AppendixEditor/index.tsx
diff --git a/app/components/DataTable/components/ImageViewer/index.tsx b/app/components/DataTable/components/ImageViewer/index.tsx
@@ -10,11 +10,13 @@ import Image, { ImageType } from '@/components/Image';
 
 import './index.scss';
 
+type ImageDataProp = { image: ImageType } | { image: ImageType[] };
+
 type ImageViewerProps = {
   /** Handles dialog close */
   onClose: () => void;
   /** Row object selected from table */
-  selectedRow: { image: ImageType },
+  selectedRow: ImageDataProp,
   /** Dialog open state */
   isOpen: boolean;
 };
@@ -28,21 +30,37 @@ const ImageViewer = ({
     onClose();
   }, [onClose]);
 
+  let renderedImage;
+  if (selectedRow.image) {
+    if (Array.isArray(selectedRow.image)) {
+      renderedImage = selectedRow.image.map((img) => (
+        <Image
+          image={img}
+          showTitle
+          showCaption
+          isZoomable={false}
+        />
+      ));
+    } else {
+      renderedImage = (
+        <Image
+          image={selectedRow.image}
+          showTitle
+          showCaption
+          isZoomable={false}
+        />
+      );
+    }
+  }
+
   return (
     <Dialog
       onClose={handleClose}
       open={isOpen}
       maxWidth="xl"
     >
       <DialogContent>
-        {selectedRow.image && (
-          <Image
-            image={selectedRow.image}
-            showTitle
-            showCaption
-            isZoomable={false}
-          />
-        )}
+        {renderedImage}
       </DialogContent>
       <DialogActions>
         <Button color="primary" onClick={handleClose}>

diff --git a/app/components/Image/index.tsx b/app/components/Image/index.tsx
@@ -7,11 +7,13 @@ import './index.scss';
 
 type ImageProps = {
   image?: ImageType;
-  height?: number;
-  width?: number;
+  height?: number | string;
+  width?: number | string;
   showTitle?: boolean;
   showCaption?: boolean;
   isZoomable?: boolean;
+  /** Style to apply to img tag */
+  imgStyle?: React.ComponentPropsWithoutRef<'img'>['style'];
 };
 
 const Image = ({
@@ -22,11 +24,12 @@ const Image = ({
     format,
     key,
   } = {} as ImageType,
-  height = 0,
-  width = 0,
+  height = undefined,
+  width = undefined,
   showTitle = false,
   showCaption = false,
   isZoomable = true,
+  imgStyle = {},
 }: ImageProps): JSX.Element => {
   const [isZoomed, setIsZoomed] = useState(false);
 
@@ -37,68 +40,67 @@ const Image = ({
   }, [isZoomable]);
 
   return (
-    <>
-      {data && (
-        <>
-          <div className="image">
-            {showTitle && title && (
-              <Typography variant="h3">
-                {title}
-              </Typography>
-            )}
-            <Button
-              classes={{ root: 'image__button' }}
-              component="label"
+    data && (
+      <>
+        <div className="image">
+          {showTitle && title && (
+            <Typography variant="h3">
+              {title}
+            </Typography>
+          )}
+          <Button
+            classes={{ root: 'image__button' }}
+            component="label"
+            onClick={handleZoom}
+          >
+            <img
+              className={`image ${isZoomable && !isZoomed ? 'image__zoom--in' : ''}`}
+              src={`data:image/${format};base64,${data}`}
+              alt={title}
+              key={key}
+              height={Number.isInteger(height) ? `${height}px` : height}
+              width={Number.isInteger(width) ? `${height}px` : width}
+              style={imgStyle}
+            />
+          </Button>
+          {showCaption && caption && (
+            <Typography className="image__caption" variant="caption">
+              {caption}
+            </Typography>
+          )}
+        </div>
+        {isZoomed && (
+          <Fade in={isZoomed}>
+            <button
+              className="image__dialog-background"
               onClick={handleZoom}
+              type="button"
             >
-              <img
-                className={`image ${isZoomable && !isZoomed ? 'image__zoom--in' : ''}`}
-                src={`data:image/${format};base64,${data}`}
-                alt={title}
-                key={key}
-                height={height ? `${height}px` : undefined}
-                width={width ? `${width}px` : undefined}
-              />
-            </Button>
-            {showCaption && caption && (
-              <Typography className="image__caption" variant="caption">
-                {caption}
-              </Typography>
-            )}
-          </div>
-          {isZoomed && (
-            <Fade in={isZoomed}>
-              <button
-                className="image__dialog-background"
-                onClick={handleZoom}
-                type="button"
+              <div
+                className="image__dialog-button"
               >
-                <div
-                  className="image__dialog-button"
-                >
-                  {showTitle && title && (
-                    <Typography variant="h3">
-                      {title}
-                    </Typography>
-                  )}
-                  <img
-                    className={`image__data ${isZoomable && isZoomed ? 'image__zoom--out' : ''}`}
-                    src={`data:image/${format};base64,${data}`}
-                    alt={title}
-                    key={key}
-                  />
-                  {showCaption && caption && (
-                    <Typography className="image__caption" variant="caption">
-                      {caption}
-                    </Typography>
-                  )}
-                </div>
-              </button>
-            </Fade>
-          )}
-        </>
-      )}
-    </>
+                {showTitle && title && (
+                  <Typography variant="h3">
+                    {title}
+                  </Typography>
+                )}
+                <img
+                  className={`image__data ${isZoomable && isZoomed ? 'image__zoom--out' : ''}`}
+                  src={`data:image/${format};base64,${data}`}
+                  alt={title}
+                  key={key}
+                />
+                {showCaption && caption && (
+                  <Typography className="image__caption" variant="caption">
+                    {caption}
+                  </Typography>
+                )}
+              </div>
+            </button>
+          </Fade>
+        )}
+      </>
+    )
   );
 };