Merge pull request #473 from dgidb/staging

Staging
dgidb · Jan 30, 2024 · 25bb790 · 25bb790
2 parents 012b75f + e56f84a
commit 25bb790
Show file tree

Hide file tree

Showing 42 changed files with 431 additions and 282 deletions.
diff --git a/client/.env.local b/client/.env.local
@@ -1,3 +1,3 @@
 REACT_APP_API_URI='http://127.0.0.1:3000/api/graphql'
-
+REACT_APP_ANALYTICS='false'
 PORT=3001
diff --git a/client/.env.prod b/client/.env.prod
@@ -1,3 +1,3 @@
 REACT_APP_API_URI="https://beta.dgidb.org/api/graphql"
-
+REACT_APP_ANALYTICS='true'
 PORT=443
diff --git a/client/.env.production b/client/.env.production
@@ -1,3 +1,3 @@
 REACT_APP_API_URI="https://beta.dgidb.org/api/graphql"
-
+REACT_APP_ANALYTICS='true'
 PORT=443
diff --git a/client/.env.staging b/client/.env.staging
@@ -1,3 +1,3 @@
 REACT_APP_API_URI="https://staging.dgidb.org/api/graphql"
-
+REACT_APP_ANALYTICS='false'
 PORT=443
diff --git a/client/package.json b/client/package.json
@@ -35,6 +35,7 @@
     "react-chartjs-2": "^4.1.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-hook-form": "^7.14.1",
     "react-query": "^3.34.0",
     "react-router-dom": "^6.2.2",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,7 +1,16 @@
 import { AppProvider } from './providers/app';
 import { AppRoutes } from './routes';
+import ReactGA from 'react-ga4';
+
+const sendAnalytics = process.env.REACT_APP_ANALYTICS === 'true';
+
+const TRACKING_ID = 'G-B03N45K7C1';
 
 function App() {
+  if (sendAnalytics) {
+    ReactGA.initialize(TRACKING_ID);
+  }
+
   return (
     <AppProvider>
       <AppRoutes />

diff --git a/client/src/components/Browse/Sources/BrowseSources.scss b/client/src/components/Browse/Sources/BrowseSources.scss
@@ -6,7 +6,7 @@
   padding: 15px;
   .sources-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     grid-template-rows: repeat(1, 1fr);
     grid-column-gap: 15px;
     grid-row-gap: 15px;
@@ -38,6 +38,7 @@
     }
   }
   .filter-buttons {
+    flex-wrap: wrap;
     .MuiButton-outlined {
       color: var(--theme-primary) !important;
       border-color: var(--theme-primary) !important;

diff --git a/client/src/components/Drug/DrugRecord/DrugRecord.scss b/client/src/components/Drug/DrugRecord/DrugRecord.scss
@@ -9,6 +9,7 @@
 
   .drug-record-header {
     display: flex;
+    flex-wrap: wrap;
     flex-direction: row;
     align-items: end; // isn't aligning name object correctly
     margin-bottom: 0.5em;

diff --git a/client/src/components/Drug/DrugRecord/DrugRecord.tsx b/client/src/components/Drug/DrugRecord/DrugRecord.tsx
@@ -23,8 +23,10 @@ import { useGetDrugInteractions } from 'hooks/queries/useGetDrugInteractions';
 import { generateXrefLink } from 'utils/generateXrefLink';
 import { ResultTypes } from 'types/types';
 import { NotFoundError } from 'components/Shared/NotFoundError/NotFoundError';
+import { useGetIsMobile } from 'hooks/shared/useGetIsMobile';
 
 export const DrugRecord: React.FC = () => {
+  const isMobile = useGetIsMobile();
   const drugId = useParams().drug as string;
 
   // get drug attributes
@@ -217,8 +219,8 @@ export const DrugRecord: React.FC = () => {
           {generateXrefLink(drugId, ResultTypes.Drug, 'concept-id-link')}
         </Box>
       </Box>
-      <Box display="flex">
-        <Box display="block" width="35%">
+      <Box display={isMobile ? 'block' : 'flex'}>
+        <Box display="block" width={isMobile ? '100%' : '35%'}>
           {sectionsMap.map((section) => {
             return (
               <Accordion key={section.name} defaultExpanded>
@@ -246,7 +248,11 @@ export const DrugRecord: React.FC = () => {
             );
           })}
         </Box>
-        <Box ml={1} width="65%">
+        <Box
+          ml={isMobile ? 0 : 1}
+          mt={isMobile ? 2 : 0}
+          width={isMobile ? '100%' : '65%'}
+        >
           <Accordion defaultExpanded>
             <AccordionSummary
               style={{

diff --git a/client/src/components/Drug/DrugSummary/DrugSummary.scss b/client/src/components/Drug/DrugSummary/DrugSummary.scss
@@ -13,15 +13,33 @@
     color: var(--text-content);
   }
 
+  @media screen and (max-width: 768px) {
+    .drug-summary-content {
+      display: block !important;
+    }
+    .interaction-count-container {
+      max-width: 100% !important;
+      border: none !important;
+      margin-bottom: 20px;
+    }
+    .summary-infographic-container {
+      max-width: 100% !important;
+      border: none !important;
+      margin-bottom: 20px;
+      margin-left: 0 !important;
+    }
+    .chart-section {
+      flex-direction: column;
+    }
+  }
+
   .drug-summary-content {
     display: flex;
 
     .interaction-count-container {
       border: 1px var(--text-content) solid;
-      margin-right: 7px;
       padding: 10px;
-      min-height: 400px;
-      width: 100px;
+      max-width: fit-content;
       flex-grow: 1;
 
       .interaction-count-header {
@@ -50,16 +68,17 @@
     }
 
     .summary-infographic-container {
+      margin-left: 5px;
       border: 1px var(--text-content) solid;
       padding: 10px;
-      width: 80%;
-      justify-content: space-between;
       display: flex;
       flex-direction: column;
-      height: 500px;
+      width: 100%;
+      overflow-x: scroll;
 
       .tabbed-view {
         align-items: flex-start !important;
+        min-width: fit-content;
       }
 
       .chart-section {

diff --git a/client/src/components/Drug/DrugSummary/DrugSummary.tsx b/client/src/components/Drug/DrugSummary/DrugSummary.tsx
@@ -13,14 +13,16 @@ import {
 import { InteractionTypeDrug } from 'components/Drug/DrugCharts';
 import { DirectionalityDrug } from 'components/Drug/DrugCharts';
 import { GeneCategories } from 'components/Drug/DrugCharts';
-import { Tab, Tabs } from '@mui/material';
+import { Alert, IconButton, Tab, Tabs } from '@mui/material';
 import TabPanel from 'components/Shared/TabPanel/TabPanel';
 
 // styles
 import './DrugSummary.scss';
 import Box from '@mui/material/Box';
 import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
 import TableDownloader from 'components/Shared/TableDownloader/TableDownloader';
+import CloseIcon from '@mui/icons-material/Close';
+import { useGetIsMobile } from 'hooks/shared/useGetIsMobile';
 
 ChartJS.register(
   CategoryScale,
@@ -42,6 +44,13 @@ const InteractionCountDrug: React.FC<CountProps> = ({
   selectedDrugs,
   setSelectedDrugs,
 }) => {
+  const [hideAlert, setHideAlert] = React.useState(
+    window.localStorage.getItem('interaction-filter-tip-alert')
+  );
+  const handleCloseAlertTip = () => {
+    setHideAlert('true');
+    window.localStorage.setItem('interaction-filter-tip-alert', 'true');
+  };
   const toggleFilter = (drugName: string) => {
     if (selectedDrugs.includes(drugName)) {
       setSelectedDrugs(
@@ -54,6 +63,23 @@ const InteractionCountDrug: React.FC<CountProps> = ({
 
   return (
     <div className="interaction-count-container">
+      {!hideAlert && (
+        <Alert
+          severity="info"
+          action={
+            <IconButton
+              aria-label="close"
+              color="inherit"
+              size="small"
+              onClick={handleCloseAlertTip}
+            >
+              <CloseIcon fontSize="inherit" />
+            </IconButton>
+          }
+        >
+          You can filter by selecting the rows below
+        </Alert>
+      )}
       <div className="interaction-count-header">
         <div className="interaction-count-drug">
           <h2>
@@ -91,6 +117,7 @@ const SummaryInfoDrug: React.FC<InfoProps> = ({
   drugMatches,
   selectedDrugs,
 }) => {
+  const isMobile = useGetIsMobile();
   const [windowSize, setWindowSize] = useState(getWindowSize());
   const [value, setValue] = useState(0);
 
@@ -134,7 +161,7 @@ const SummaryInfoDrug: React.FC<InfoProps> = ({
           <Tabs
             value={value}
             onChange={handleChange}
-            orientation="vertical"
+            orientation={isMobile ? 'horizontal' : 'vertical'}
             textColor="secondary"
             indicatorColor="secondary"
           >
@@ -221,7 +248,7 @@ export const DrugSummary: React.FC<SummaryProps> = ({ drugs, isLoading }) => {
         alignItems="center"
         justifyContent="space-between"
       >
-        <Box display="flex" alignItems="center">
+        <Box display="flex" alignItems="center" flexWrap="wrap" mb={1}>
           <h1>Interaction Results</h1>
           <Box id="interaction-count" ml={2}>
             {interactionResults.length} total interactions

diff --git a/client/src/components/Gene/GeneRecord/GeneRecord.scss b/client/src/components/Gene/GeneRecord/GeneRecord.scss
@@ -9,6 +9,7 @@
 
   .gene-record-header {
     display: flex;
+    flex-wrap: wrap;
     flex-direction: row;
     align-items: end; // isn't aligning name object correctly
     margin-bottom: 0.5em;

diff --git a/client/src/components/Gene/GeneRecord/GeneRecord.tsx b/client/src/components/Gene/GeneRecord/GeneRecord.tsx
@@ -22,8 +22,10 @@ import { dropRedundantCites } from 'utils/dropRedundantCites';
 import { generateXrefLink } from 'utils/generateXrefLink';
 import { ResultTypes } from 'types/types';
 import { NotFoundError } from 'components/Shared/NotFoundError/NotFoundError';
+import { useGetIsMobile } from 'hooks/shared/useGetIsMobile';
 
 export const GeneRecord: React.FC = () => {
+  const isMobile = useGetIsMobile();
   const geneId: any = useParams().gene;
 
   // get gene attributes
@@ -215,8 +217,8 @@ export const GeneRecord: React.FC = () => {
           {generateXrefLink(geneId, ResultTypes.Gene, 'concept-id-link')}
         </Box>
       </Box>
-      <Box display="flex">
-        <Box display="block" width="35%">
+      <Box display={isMobile ? 'block' : 'flex'}>
+        <Box display="block" width={isMobile ? '100%' : '35%'}>
           {sectionsMap.map((section) => {
             return (
               <Accordion key={section.name} defaultExpanded>
@@ -244,7 +246,11 @@ export const GeneRecord: React.FC = () => {
             );
           })}
         </Box>
-        <Box ml={1} width="65%">
+        <Box
+          ml={isMobile ? 0 : 1}
+          mt={isMobile ? 2 : 0}
+          width={isMobile ? '100%' : '65%'}
+        >
           <Accordion defaultExpanded>
             <AccordionSummary
               style={{

diff --git a/client/src/components/Gene/GeneSummary/GeneSummary.scss b/client/src/components/Gene/GeneSummary/GeneSummary.scss
@@ -14,15 +14,34 @@
     color: var(--text-content);
   }
 
+  @media screen and (max-width: 768px) {
+    .gene-summary-content {
+      display: block !important;
+    }
+    .interaction-count-container {
+      max-width: 100% !important;
+      border: none !important;
+      margin-bottom: 20px;
+    }
+    .summary-infographic-container {
+      max-width: 100% !important;
+      border: none !important;
+      margin-bottom: 20px;
+      margin-left: 0 !important;
+    }
+    .chart-section {
+      flex-direction: column;
+    }
+  }
+
   .gene-summary-content {
     display: flex;
     background-color: var(--background);
 
     .interaction-count-container {
       border: 1px var(--text-content) solid;
-      margin-right: 7px;
       padding: 10px;
-      min-height: 400px;
+      max-width: fit-content;
       flex-grow: 1;
 
       .interaction-count-header {
@@ -52,17 +71,19 @@
     }
 
     .summary-infographic-container {
+      margin-left: 5px;
       border: 1px var(--text-content) solid;
       padding: 10px;
-      width: 80%;
-      justify-content: space-between;
       display: flex;
       flex-direction: column;
-      height: 500px;
+      min-height: 500px;
+      width: 100%;
+      overflow-x: scroll;
 
       .tabbed-view {
         align-items: flex-start !important;
         justify-content: center;
+        min-width: fit-content;
       }
 
       .chart-section {