Merge pull request #238 from bcgsc/release/v6.13.0

Release/v6.13.0

Author: kttkjl

app/components/Sidebar/__tests__/Sidebar.test.tsx

@@ -9,8 +9,9 @@ import ResourceContext from '../../../context/ResourceContext';
 const context = {};
 const permissions = {
   germlineAccess: true,
-  reportAccess: true,
+  reportsAccess: true,
   adminAccess: true,
+  reportSettingAccess: true,
 };
 
 const theme = createTheme();

app/components/Sidebar/index.tsx

@@ -31,7 +31,7 @@ import './index.scss';
 const Sidebar = (): JSX.Element => {
   const { pathname } = useLocation();
   const { sidebarMaximized, setSidebarMaximized } = useContext(SidebarContext);
-  const { germlineAccess, reportAccess, adminAccess } = useResource();
+  const { germlineAccess, reportsAccess, adminAccess } = useResource();
 
   const handleSidebarClose = useCallback(() => {
     setSidebarMaximized(false);
@@ -48,7 +48,7 @@ const Sidebar = (): JSX.Element => {
       </div>
       <Divider />
       <List disablePadding>
-        {reportAccess && (
+        {reportsAccess && (
           <ListItem
             className={`
               sidebar__list-item

app/components/SvgImage/index.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useEffect, useState, useRef,
+  useEffect, useState, useRef, useMemo,
 } from 'react';
 import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
 import InlineSVG from 'svg-inline-react';
@@ -10,14 +10,23 @@ import './index.scss';
 type SvgImageProps = {
   image: string;
   isPrint?: boolean;
+  printOrientation: 'portrait' | 'landscape';
 };
 
+// These should be same as index.css under @page
+// Accounts for padding via magical numbers 32 and 16
+const INCH_TO_PX = 96;
+const MAX_PRINT_WIDTH = Math.floor((9 - 0.4 * 2) * INCH_TO_PX) - 32;
+const MAX_PRINT_HEIGHT = Math.floor((11.5 - 0.4 * 2) * INCH_TO_PX) - 16;
+
 const PRINT_WIDTH = 816;
 const ICON_WIDTH = 48;
 
 const SvgImage = ({
   image,
   isPrint = false,
+  // Only applicable when in print mode
+  printOrientation = 'portrait',
 }: SvgImageProps): JSX.Element => {
   const Viewer = useRef();
   const [svgHeight, setSvgHeight] = useState<number>();
@@ -56,33 +65,89 @@ const SvgImage = ({
     Viewer?.current?.fitToViewer();
   };
 
-  return (
-    <div className="svg-image">
-      {processedImage && svgHeight && svgWidth && (
+  const svgComponent = useMemo(() => {
+    if (processedImage && svgHeight && svgWidth) {
+      return (
         <AutoSizer disableHeight defaultWidth={PRINT_WIDTH} onResize={handleFit}>
-          {({ width = PRINT_WIDTH }) => (
-            <UncontrolledReactSVGPanZoom
-              ref={Viewer}
-              /*
-                 48px is removed since with a float icon to the right
-                 then the SVG is moved down too far.
-              */
-              width={width - ICON_WIDTH}
-              height={svgHeight}
-              background="#FFFFFF"
-              detectAutoPan={false}
-              defaultTool="auto"
-              customMiniature={() => null}
-              customToolbar={isPrint ? () => null : undefined}
-              toolbarProps={{ position: 'left' }}
-            >
-              <svg width={svgWidth} height={svgHeight}>
-                <InlineSVG src={processedImage} raw />
-              </svg>
-            </UncontrolledReactSVGPanZoom>
-          )}
+          {({ width = PRINT_WIDTH }) => {
+            if (isPrint) {
+              let overHeightRatio = svgHeight / MAX_PRINT_HEIGHT;
+              let overWidthRatio = svgWidth / MAX_PRINT_WIDTH;
+              if (printOrientation === 'landscape') {
+                overHeightRatio = svgHeight / MAX_PRINT_WIDTH;
+                overWidthRatio = svgHeight / MAX_PRINT_WIDTH;
+              }
+              let nextRatio = 1;
+
+              if (overHeightRatio > 1 && overWidthRatio > 1) {
+                // Both over, find higher ratio
+                nextRatio = Math.max(overHeightRatio, overWidthRatio);
+              } else if (overHeightRatio > 1) {
+                nextRatio = overHeightRatio;
+              } else if (overWidthRatio > 1) {
+                nextRatio = overWidthRatio;
+              }
+
+              const nextHeight = svgHeight / nextRatio;
+              const nextWidth = svgWidth / nextRatio;
+
+              const svgStyle = {
+                transformOrigin: 'top left',
+                transform: printOrientation === 'landscape' ? `rotate(90deg) translate(0, -${nextHeight}px)` : '',
+              };
+
+              return (
+                <div style={svgStyle}>
+                  <UncontrolledReactSVGPanZoom
+                    ref={Viewer}
+                    width={svgWidth > nextWidth ? nextWidth : svgWidth}
+                    height={svgHeight > nextHeight ? nextHeight : svgHeight}
+                    background="#FFFFFF"
+                    detectAutoPan={false}
+                    defaultTool="auto"
+                    customMiniature={() => null}
+                    customToolbar={() => null}
+                    toolbarProps={{ position: 'left' }}
+                  >
+                    <svg width={svgWidth} height={svgHeight}>
+                      <InlineSVG src={processedImage} raw />
+                    </svg>
+                  </UncontrolledReactSVGPanZoom>
+                </div>
+              );
+            }
+
+            return (
+              <UncontrolledReactSVGPanZoom
+                ref={Viewer}
+                /*
+                   48px is removed since with a float icon to the right
+                   then the SVG is moved down too far.
+                */
+                width={width - ICON_WIDTH}
+                height={svgHeight}
+                background="#FFFFFF"
+                detectAutoPan={false}
+                defaultTool="auto"
+                customMiniature={() => null}
+                customToolbar={isPrint ? () => null : undefined}
+                toolbarProps={{ position: 'left' }}
+              >
+                <svg width={svgWidth} height={svgHeight}>
+                  <InlineSVG src={processedImage} raw />
+                </svg>
+              </UncontrolledReactSVGPanZoom>
+            );
+          }}
         </AutoSizer>
-      )}
+      );
+    }
+    return null;
+  }, [isPrint, printOrientation, processedImage, svgHeight, svgWidth]);
+
+  return (
+    <div className="svg-image">
+      {svgComponent}
     </div>
   );
 };

app/context/ResourceContext/index.tsx

@@ -1,23 +1,87 @@
-import React, { createContext, ReactChild } from 'react';
+import React, {
+  createContext, ReactChild, useContext, useState, useEffect, useMemo,
+} from 'react';
+import SecurityContext from '@/context/SecurityContext';
 
-import { useResources } from '@/hooks/useResource';
+import checkAccess from '@/utils/checkAccess';
 import ResourceContextType from './types';
 
+const GERMLINE_ACCESS = ['admin', 'analyst', 'bioinformatician', 'projects', 'manager'];
+const GERMLINE_BLOCK = ['clinician', 'collaborator'];
+const REPORTS_ACCESS = ['*'];
+const REPORTS_BLOCK = [];
+const ADMIN_ACCESS = ['admin'];
+const ADMIN_BLOCK = [];
+
+type UseResourcesReturnType = {
+  germlineAccess: boolean;
+  reportsAccess: boolean;
+  adminAccess: boolean;
+  reportSettingAccess: boolean;
+};
+
+const useResources = (): UseResourcesReturnType => {
+  const { userDetails } = useContext(SecurityContext);
+
+  const [germlineAccess, setGermlineAccess] = useState(false);
+  const [reportsAccess, setReportsAccess] = useState(false);
+  const [adminAccess, setAdminAccess] = useState(false);
+  const [reportSettingAccess, setReportSettingAccess] = useState(false);
+
+  useEffect(() => {
+    if (userDetails?.groups) {
+      if (checkAccess(userDetails.groups, GERMLINE_ACCESS, GERMLINE_BLOCK)) {
+        setGermlineAccess(true);
+      }
+
+      if (checkAccess(userDetails.groups, REPORTS_ACCESS, REPORTS_BLOCK)) {
+        setReportsAccess(true);
+      }
+
+      if (checkAccess(userDetails.groups, ADMIN_ACCESS, ADMIN_BLOCK)) {
+        setAdminAccess(true);
+      }
+      if (checkAccess(userDetails.groups, [...ADMIN_ACCESS, 'manager'], ADMIN_BLOCK)) {
+        setReportSettingAccess(true);
+      }
+    }
+  }, [userDetails?.groups]);
+
+  return {
+    germlineAccess, reportsAccess, adminAccess, reportSettingAccess,
+  };
+};
+
 const ResourceContext = createContext<ResourceContextType>({
   germlineAccess: false,
-  reportAccess: false,
+  reportsAccess: false,
   adminAccess: false,
+  reportSettingAccess: false,
 });
 
 type ResourceContextProviderProps = {
   children: ReactChild,
 };
 
 const ResourceContextProvider = ({ children }: ResourceContextProviderProps): JSX.Element => {
-  const { germlineAccess, reportAccess, adminAccess } = useResources();
+  const {
+    germlineAccess, reportsAccess, adminAccess, reportSettingAccess,
+  } = useResources();
+
+  const providerValue = useMemo(() => ({
+    germlineAccess,
+    reportsAccess,
+    adminAccess,
+    reportSettingAccess,
+  }), [
+    germlineAccess,
+    reportsAccess,
+    adminAccess,
+    reportSettingAccess,
+  ]);
 
   return (
-    <ResourceContext.Provider value={{ germlineAccess, reportAccess, adminAccess }}>
+    <ResourceContext.Provider value={providerValue}>
       {children}
     </ResourceContext.Provider>
   );
@@ -29,6 +93,6 @@ export type {
 
 export {
   ResourceContextProvider,
-}
+};
 
 export default ResourceContext;

app/context/ResourceContext/types.d.ts

@@ -1,7 +1,8 @@
 type ResourceContextType = {
   germlineAccess: boolean;
-  reportAccess: boolean;
+  reportsAccess: boolean;
   adminAccess: boolean;
+  reportSettingAccess: boolean;
 };
 
 export default ResourceContextType;

app/hooks/useResource.ts

@@ -1,50 +1,7 @@
-import { useState, useEffect, useContext } from 'react';
+import { useContext } from 'react';
 
-import SecurityContext from '@/context/SecurityContext';
 import ResourceContext, { ResourceContextType } from '@/context/ResourceContext';
-import checkAccess from '@/utils/checkAccess';
-
-const GERMLINE_ACCESS = ['admin', 'analyst', 'bioinformatician', 'projects', 'manager'];
-const GERMLINE_BLOCK = ['clinician', 'collaborator'];
-const REPORT_ACCESS = ['*'];
-const REPORT_BLOCK = [];
-const ADMIN_ACCESS = ['admin'];
-const ADMIN_BLOCK = [];
-
-type UseResourcesReturnType = {
-  germlineAccess: boolean;
-  reportAccess: boolean;
-  adminAccess: boolean;
-};
-
-const useResources = (): UseResourcesReturnType => {
-  const { userDetails } = useContext(SecurityContext);
-
-  const [germlineAccess, setGermlineAccess] = useState(false);
-  const [reportAccess, setReportAccess] = useState(false);
-  const [adminAccess, setAdminAccess] = useState(false);
-
-  useEffect(() => {
-    if (userDetails) {
-      if (checkAccess(userDetails.groups, GERMLINE_ACCESS, GERMLINE_BLOCK)) {
-        setGermlineAccess(true);
-      }
-
-      if (checkAccess(userDetails.groups, REPORT_ACCESS, REPORT_BLOCK)) {
-        setReportAccess(true);
-      }
-
-      if (checkAccess(userDetails.groups, ADMIN_ACCESS, ADMIN_BLOCK)) {
-        setAdminAccess(true);
-      }
-    }
-  }, [userDetails]);
-
-  return { germlineAccess, reportAccess, adminAccess };
-};
 
 const useResource = (): ResourceContextType => useContext(ResourceContext);
 
-export { useResources };
-
 export default useResource;

app/views/ReportView/components/KbMatches/index.tsx

@@ -9,8 +9,6 @@ import {
   FilterList,
 } from '@mui/icons-material';
 
-import partition from 'lodash.partition';
-
 import api, { ApiCallSet } from '@/services/api';
 import snackbar from '@/services/SnackbarUtils';
 import DemoDescription from '@/components/DemoDescription';
@@ -75,6 +73,8 @@ const KbMatches = ({
             api.get(`${baseUri}?approvedTherapy=true&category=therapeutic&matchedCancer=true`, {}),
             api.get(`${baseUri}?approvedTherapy=true&category=therapeutic&matchedCancer=false`, {}),
             api.get(`/reports/${report.ident}/probe-results`, {}),
+            api.get(`${baseUri}?category=pharmacogenomic`, {}),
+            api.get(`${baseUri}?category=cancer predisposition`, {}),
           ]);
 
           const [
@@ -85,11 +85,11 @@ const KbMatches = ({
             unknownResp,
             thisCancerResp,
             otherCancerResp,
-            targetedGenesResp,
+            targetedSomaticGenesResp,
+            pharmacogenomicResp,
+            cancerPredisResp,
           ] = await apiCalls.request();
 
-          const [targetedGermlineGenes, targetedSomaticGenes] = partition(targetedGenesResp, (tg) => /germline/.test(tg?.sample));
-
           setGroupedMatches({
             thisCancer: coalesceEntries(thisCancerResp),
             otherCancer: coalesceEntries(otherCancerResp),
@@ -98,8 +98,11 @@ const KbMatches = ({
             diagnostic: coalesceEntries(diagnosticResp),
             prognostic: coalesceEntries(prognosticResp),
             unknown: coalesceEntries(unknownResp),
-            targetedGermlineGenes,
-            targetedSomaticGenes,
+            targetedGermlineGenes: coalesceEntries([
+              ...pharmacogenomicResp,
+              ...cancerPredisResp.filter(({ variant }) => variant?.germline),
+            ]),
+            targetedSomaticGenes: targetedSomaticGenesResp.filter((tg) => !/germline/.test(tg?.sample)),
           });
         } catch (err) {
           snackbar.error(`Network error: ${err}`);
@@ -160,9 +163,7 @@ const KbMatches = ({
       <DataTable
         canDelete={canEdit}
         canToggleColumns
-        columnDefs={(key === 'targetedSomaticGenes' || key === 'targetedGermlineGenes')
-          ? targetedColumnDefs
-          : columnDefs}
+        columnDefs={(key === 'targetedSomaticGenes') ? targetedColumnDefs : columnDefs}
         filterText={filterText}
         isPrint={isPrint}
         onDelete={handleDelete}