Release/v6.8.0

IPR Client v6.8.0 Release Notes Bugfixes [DEVSU-1701] - Notification of erasing signature pops up in unsigned reports [DEVSU-1717] - Update storybook to use webpack 5 New Features [DEVSU-1650] - export single germline report [DEVSU-1675] - use backend storage of appendix text instead of storing it in client Improvements [DEVSU-1699] - Update babelrc with updated settings [DEVSU-1714] - Update client columns in germline_small_mutations [DEVSU-1702] - Update to work with new expDensity images
bcgsc · Feb 1, 2022 · 2f234b7 · 2f234b7
2 parents 8fadc8a + 8656c83
commit 2f234b7
Show file tree

Hide file tree

Showing 24 changed files with 30,328 additions and 57,411 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,74 +1,14 @@
 {
-  "presets": [["@babel/preset-env", {
-    "useBuiltIns": "usage",
-    "modules": "auto",
-    "corejs": 3
-  }],
-  "@babel/preset-react",
-  "@babel/preset-typescript"],
-  "plugins": [
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-syntax-dynamic-import"
-  ],
-  "env": {
-    "test": {
-      "plugins": ["@babel/plugin-transform-modules-commonjs"]
-    },
-    "production": {
-      "plugins": [
-        ["transform-imports", {
-          "@material-ui/core": {
-            "transform": "@material-ui/core/esm/${member}",
-            "preventFullImport": true
-          },
-          "@material-ui/icons": {
-            "transform": "@material-ui/icons/esm/${member}",
-            "preventFullImport": true
-          }
-        }]
-      ]
-    },
-    "staging": {
-      "plugins": [
-        ["transform-imports", {
-          "@material-ui/core": {
-            "transform": "@material-ui/core/esm/${member}",
-            "preventFullImport": true
-          },
-          "@material-ui/icons": {
-            "transform": "@material-ui/icons/esm/${member}",
-            "preventFullImport": true
-          }
-        }]
-      ]
-    },
-    "development": {
-      "plugins": [
-        ["transform-imports", {
-          "@material-ui/core": {
-            "transform": "@material-ui/core/esm/${member}",
-            "preventFullImport": true
-          },
-          "@material-ui/icons": {
-            "transform": "@material-ui/icons/esm/${member}",
-            "preventFullImport": true
-          }
-        }]
-      ]
-    },
-    "local": {
-      "plugins": [
-        ["transform-imports", {
-          "@material-ui/core": {
-            "transform": "@material-ui/core/esm/${member}",
-            "preventFullImport": true
-          },
-          "@material-ui/icons": {
-            "transform": "@material-ui/icons/esm/${member}",
-            "preventFullImport": true
-          }
-        }]
-      ]
-    }
-  }
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "modules": "auto",
+        "corejs": 3
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
 }
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,4 @@ builds/*
 dist/*
 coverage/*
 app/ipr-env-config.js
+storybook-static/*
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,9 @@
 const custom = require('../config/webpack/webpack.config');
 
 module.exports = {
+  core: {
+    builder: "webpack5",
+  },
   stories: [
     "../app/**/*.stories.@(js|jsx|ts|tsx)",
   ],

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,13 @@
+<script>
+  var _env_ = {
+    KEYCLOAK_CLIENT_ID: "IPR",
+    KEYCLOAK_REALM: "GSC",
+    KEYCLOAK_URL: "https://keycloakdev.bcgsc.ca/auth",
+    GRAPHKB_URL: "https://graphkbstaging.bcgsc.ca",
+    API_BASE_URL: "https://iprdev-api.bcgsc.ca/api",
+    CONTACT_EMAIL: "[email protected]",
+    CONTACT_TICKET_URL: "https://www.bcgsc.ca/jira/projects/IPR",
+    IS_DEMO: false,
+    PUBLIC_PATH: "/",
+  }
+</script>
diff --git a/app/common.d.ts b/app/common.d.ts
@@ -22,6 +22,7 @@ declare global {
       CONTACT_EMAIL: string;
       CONTACT_TICKET_URL: string;
       IS_DEMO: boolean;
+      PUBLIC_PATH: string;
     };
   }
 }

diff --git a/app/views/GermlineView/components/Report/columnDefs.ts b/app/views/GermlineView/components/Report/columnDefs.ts
@@ -56,8 +56,16 @@ const columnDefs = [
     hide: false,
   },
   {
-    headerName: 'dbSNP',
-    field: 'dbSnp',
+    field: 'dbSnpIds',
+    hide: false,
+  },
+  {
+    field: 'clinvarIds',
+    minWidth: 80,
+    hide: false,
+  },
+  {
+    field: 'cosmicIds',
     hide: false,
   },
   {

diff --git a/app/views/GermlineView/components/Report/index.tsx b/app/views/GermlineView/components/Report/index.tsx
@@ -1,13 +1,16 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import {
-  Button,
   Checkbox,
   FormControlLabel,
   Typography,
+  IconButton,
+  Menu,
+  MenuItem,
+  DialogProps,
 } from '@mui/material';
 import { AgGridReact } from '@ag-grid-community/react';
-
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import useGrid from '@/hooks/useGrid';
 import api from '@/services/api';
 import GermlineReportContext from '@/context/GermlineReportContext';
@@ -20,7 +23,7 @@ import StrikethroughCell from './components/StrikethroughCell';
 import EditDialog from './components/EditDialog';
 import Reviews from './components/Reviews';
 import columnDefs from './columnDefs';
-
+import { getDate } from '@/utils/date';
 import './index.scss';
 
 type GermlineReportProps = WithLoadingInjectedProps;
@@ -29,8 +32,8 @@ const GermlineReport = ({
   isLoading,
   setIsLoading,
 }: GermlineReportProps): JSX.Element => {
-  const { ident } = useParams();
-  const { colApi, onGridReady } = useGrid();
+  const { ident } = useParams<{ ident: string }>();
+  const { gridApi, colApi, onGridReady } = useGrid();
   const history = useHistory();
   const [report, setReport] = useState<GermlineReportType>();
 
@@ -39,6 +42,8 @@ const GermlineReport = ({
   const [showAlertDialog, setShowAlertDialog] = useState(false);
   const [editData, setEditData] = useState();
 
+  const [menuAnchor, setMenuAnchor] = useState<HTMLElement>();
+
   useEffect(() => {
     if (ident) {
       const getData = async () => {
@@ -98,8 +103,9 @@ const GermlineReport = ({
     />
   ), [onEdit]);
 
-  const handleConfirmDelete = useCallback(async (confirm) => {
+  const handleDeleteAlertClose = useCallback(async (confirm) => {
     setShowAlertDialog(false);
+    setMenuAnchor(null);
     if (confirm) {
       try {
         await api.del(`/germline-small-mutation-reports/${report.ident}`, {}).request();
@@ -111,6 +117,20 @@ const GermlineReport = ({
     }
   }, [report, history]);
 
+  const handleTSVExport = useCallback(() => {
+    setMenuAnchor(null);
+    const date = getDate();
+    gridApi.exportDataAsCsv({
+      suppressQuotes: true,
+      columnSeparator: '\t',
+      columnKeys: colApi.getAllDisplayedColumns()
+        .filter((col) => col.colDef.headerName !== 'Actions' && col.colDef.headerName)
+        .map((col) => col.colId),
+      fileName: `ipr_${report.patientId}_${report.ident}_germline_${date}.tsv`,
+      processCellCallback: (({ value }) => (typeof value === 'string' ? value?.replace(/,/g, '') : value)),
+    });
+  }, [colApi, gridApi, report]);
+
   return (
     <GermlineReportContext.Provider value={{ report, setReport }}>
       <div className="germline-report">
@@ -122,17 +142,33 @@ const GermlineReport = ({
                 <Typography display="inline" variant="h5">
                   {`${report.patientId} - ${report.normalLibrary}`}
                 </Typography>
-                <Button
-                  color="secondary"
-                  onClick={() => setShowAlertDialog(true)}
-                  variant="outlined"
-                >
-                  Remove report
-                </Button>
+                <>
+                  <span className="data-table__action">
+                    <IconButton
+                      onClick={(event) => setMenuAnchor(event.currentTarget)}
+                      className="data-table__icon-button"
+                      size="large"
+                    >
+                      <MoreHorizIcon />
+                    </IconButton>
+                    <Menu
+                      anchorEl={menuAnchor}
+                      open={Boolean(menuAnchor)}
+                      onClose={() => setMenuAnchor(null)}
+                    >
+                      <MenuItem onClick={() => setShowAlertDialog(true)}>
+                        Remove report
+                      </MenuItem>
+                      <MenuItem onClick={() => handleTSVExport()}>
+                        Export to TSV
+                      </MenuItem>
+                    </Menu>
+                  </span>
+                </>
               </div>
               <AlertDialog
                 isOpen={showAlertDialog}
-                onClose={handleConfirmDelete}
+                onClose={handleDeleteAlertClose}
                 title="Confirm"
                 text="Are you sure you want to delete this report?"
                 confirmText="Confirm"
@@ -169,6 +205,9 @@ const GermlineReport = ({
                 }}
                 gridOptions={{
                   rowClass: 'center-text',
+                  defaultColDef: {
+                    resizable: true,
+                  },
                 }}
                 frameworkComponents={{
                   'strikethroughCell': StrikethroughCell,

diff --git a/app/views/ReportView/components/AnalystComments/components/TextEditor/index.tsx b/app/views/ReportView/components/AnalystComments/components/TextEditor/index.tsx
@@ -40,6 +40,11 @@ const modules = {
 
     ['link'],
   ],
+  clipboard: {
+    // https://github.com/zenoamaro/react-quill/issues/281
+    // https://stackoverflow.com/questions/63678128/how-to-prevent-react-quill-to-insert-a-new-line-before-list-when-re-loading-cont
+    matchVisual: false,
+  }
 };
 
 const TextEditor = ({
@@ -54,7 +59,7 @@ const TextEditor = ({
   }, [analystComments]);
 
   return (
-    <Dialog maxWidth="lg" open={isOpen} onClose={onClose}>
+    <Dialog fullWidth maxWidth="lg" open={isOpen} onClose={onClose}>
       <DialogTitle>Edit Comments</DialogTitle>
       <DialogContent>
         <ReactQuill

diff --git a/app/views/ReportView/components/AnalystComments/index.tsx b/app/views/ReportView/components/AnalystComments/index.tsx
@@ -22,11 +22,13 @@ import './index.scss';
 
 type AnalystCommentsProps = {
   isPrint?: boolean;
+  isSigned?: boolean;
 } & WithLoadingInjectedProps;
 
 const AnalystComments = ({
   isPrint = false,
   isLoading,
+  isSigned,
   setIsLoading,
 }: AnalystCommentsProps): JSX.Element => {
   const { report } = useContext(ReportContext);
@@ -98,15 +100,19 @@ const AnalystComments = ({
       const commentsResp = await api.put(
         `/reports/${report.ident}/summary/analyst-comments`,
         { comments: editedComments },
-      ).request(true);
-      setComments(sanitizeHtml(commentsResp?.comments, {
-        allowedSchemes: [],
-        allowedAttributes: {
-          '*': ['style'],
-        },
-      }));
+      ).request(isSigned);
+
+      // If signed, the dialog that opens up will refesh the page instead
+      if (!isSigned) {
+        setComments(sanitizeHtml(commentsResp?.comments, {
+          allowedSchemes: [],
+          allowedAttributes: {
+            '*': ['style'],
+          },
+        }));
+      }
     }
-  }, [report]);
+  }, [report, isSigned]);
 
   return (
     <div className="analyst-comments">

diff --git a/...ews/ReportView/components/Appendices/components/AppendixEditor/AppendixEditor.stories.tsx b/...ews/ReportView/components/Appendices/components/AppendixEditor/AppendixEditor.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Story } from '@storybook/react/types-6-0';
+import AppendixEditor, { AppendixEditorProps } from '.';
+
+export default {
+  title: 'components/AppendixEditor',
+  component: AppendixEditor,
+};
+
+const Template = (args) => <AppendixEditor {...args} />;
+
+export const Empty: Story<AppendixEditorProps> = Template.bind({});
+Empty.args = {
+  isOpen: true,
+  text: null,
+};
+
+export const WithDefaultText: Story<AppendixEditorProps> = Template.bind({});
+WithDefaultText.args = {
+  isOpen: true,
+  text: 'Default loaded text',
+};
diff --git a/app/views/ReportView/components/Appendices/components/AppendixEditor/index.scss b/app/views/ReportView/components/Appendices/components/AppendixEditor/index.scss
@@ -0,0 +1,11 @@
+.AppendixEditor {
+  &__container {
+    .ql-container {
+      font-size: 1rem;
+      font-family: inherit;
+    }
+    .ql-editor {
+      min-height: 10rem;
+    }
+  }
+}