Dev (#442)

* fix: use correct indication attribute name (#408) * fix: add URL cites back (#409) * add release information component for footer * run prettier * cleanup: make about links consistent (#413) * make footer no longer sticky * fix: correct source versioning (#421) * fix: clean up GtoP import (#419) * fix: use latest GO address (#424) * feat: bump drugbank version (#422) * feat: alphabetize sources * refactor: alphabetize sources * style: running prettier to prettify the sort data function * fix: sort on pmid and source columns * feat: add sources to interaction page * feat: reduce precision of interaction score on interaction page to 2 decimal places --------- Co-authored-by: James Stevenson <james.stevenson@nationwidechildrens.org> Co-authored-by: Adam Coffman <acoffman@wustl.edu>
dgidb · Oct 10, 2023 · ace432d · ace432d
1 parent b00b120
commit ace432d
Show file tree

Hide file tree

Showing 26 changed files with 439 additions and 175 deletions.
diff --git a/client/src/components/Browse/Sources/BrowseSources.tsx b/client/src/components/Browse/Sources/BrowseSources.tsx
@@ -27,10 +27,17 @@ export const BrowseSources = () => {
     'POTENTIALLY_DRUGGABLE'
   );
 
-  let geneSources = geneData?.sources?.nodes;
-  let drugSources = drugData?.sources?.nodes;
-  let interactionSources = interactionData?.sources?.nodes;
-  let potentiallyDruggableSources = potentiallyDruggableData?.sources?.nodes;
+  const getSortedData = (data: any) => {
+    return data?.sources?.nodes?.sort(
+      (a: { sourceDbName: string }, b: { sourceDbName: any }) =>
+        a.sourceDbName.localeCompare(b.sourceDbName)
+    );
+  };
+
+  let geneSources = getSortedData(geneData);
+  let drugSources = getSortedData(drugData);
+  let interactionSources = getSortedData(interactionData);
+  let potentiallyDruggableSources = getSortedData(potentiallyDruggableData);
 
   const sectionsMap = [
     {

diff --git a/client/src/components/Interaction/InteractionRecord/InteractionRecord.tsx b/client/src/components/Interaction/InteractionRecord/InteractionRecord.tsx
@@ -15,6 +15,7 @@ import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import { truncateDecimals } from 'utils/format';
 
 export const InteractionRecord: React.FC = () => {
   const interactionId = useParams().id;
@@ -61,7 +62,7 @@ export const InteractionRecord: React.FC = () => {
                   Interaction Score:
                 </TableCell>
                 <TableCell className="attribute-value">
-                  {data?.interaction?.interactionScore}
+                  {truncateDecimals(data?.interaction?.interactionScore, 2)}
                 </TableCell>
               </TableRow>
 
@@ -116,6 +117,30 @@ export const InteractionRecord: React.FC = () => {
         </Box>
       ),
     },
+    {
+      name: 'Sources',
+      sectionContent: (
+        <Box className="box-content">
+          <Table>
+            <TableBody>
+              {data?.interaction?.sources.length
+                ? data?.interaction?.sources?.map(
+                    (source: any, index: number) => {
+                      return (
+                        <TableRow key={index}>
+                          <TableCell className="attribute-name">
+                            {source.fullName}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    }
+                  )
+                : noData}
+            </TableBody>
+          </Table>
+        </Box>
+      ),
+    },
   ];
 
   return (

diff --git a/client/src/components/Layout/MainLayout.scss b/client/src/components/Layout/MainLayout.scss
@@ -100,8 +100,6 @@ header {
 
 footer {
   background-color: var(--theme-primary);
-  position: fixed;
-  bottom: 0;
   color: white;
   margin-top: auto;
   width: 100%;

diff --git a/client/src/components/Layout/MainLayout.tsx b/client/src/components/Layout/MainLayout.tsx
@@ -10,6 +10,7 @@ import { GlobalClientContext } from 'stores/Global/GlobalClient';
 import './MainLayout.scss';
 import { Box, Button, IconButton, Menu, MenuItem } from '@mui/material';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import ReleaseInformation from 'components/Shared/ReleaseInformation/ReleaseInformation';
 
 type MainLayoutProps = {
   children: React.ReactNode;
@@ -80,24 +81,29 @@ const Header: React.FC = () => {
 };
 
 const Footer: React.FC = () => {
-  const { dispatch } = useContext(GlobalClientContext);
+  const { state, dispatch } = useContext(GlobalClientContext);
 
   return (
     <footer>
-      Disclaimer: This resource is intended for purely research purposes. It
-      should not be used for emergencies or medical or professional advice.
-      <IconButton
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          marginLeft: '10px',
-          fontSize: '25px',
-        }}
-        onClick={() => dispatch({ type: ActionTypes.HideDisclaimer })}
-      >
-        <HighlightOffIcon />
-      </IconButton>
+      {state.themeSettings.showDisclaimer && (
+        <div>
+          Disclaimer: This resource is intended for purely research purposes. It
+          should not be used for emergencies or medical or professional advice.
+          <IconButton
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              marginLeft: '10px',
+              fontSize: '25px',
+            }}
+            onClick={() => dispatch({ type: ActionTypes.HideDisclaimer })}
+          >
+            <HighlightOffIcon />
+          </IconButton>
+        </div>
+      )}
+      <ReleaseInformation />
     </footer>
   );
 };
@@ -127,7 +133,7 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
       <div className="content-container">
         <Box className="content">{children}</Box>
       </div>
-      {state.themeSettings.showDisclaimer && <Footer />}
+      <Footer />
     </div>
   );
 };
diff --git a/client/src/components/Shared/InteractionTable/InteractionTable.tsx b/client/src/components/Shared/InteractionTable/InteractionTable.tsx
@@ -115,6 +115,9 @@ export const InteractionTable: React.FC<Props> = ({
       headerName: 'PMIDs',
       flex: 0.4,
       minWidth: 0,
+      valueGetter: (params: any) => {
+        return params.row.pmids?.length;
+      },
       renderCell: (params: any) => (
         <PublicationsTooltip
           displayText={params.row.pmids?.length}
@@ -127,6 +130,9 @@ export const InteractionTable: React.FC<Props> = ({
       headerName: 'Sources',
       flex: 0.4,
       minWidth: 0,
+      valueGetter: (params: any) => {
+        return params.row.sources?.length;
+      },
       renderCell: (params: any) => (
         <SourcesTooltip
           hoverTexts={params.row.sources}
@@ -200,8 +206,6 @@ export const InteractionTable: React.FC<Props> = ({
     }
   );
 
-  console.log(rows);
-
   return !isLoading ? (
     <Box className="interaction-table-container">
       <Box width="100%" height="500px" display="flex">

diff --git a/client/src/components/Shared/ReleaseInformation/ReleaseInformation.scss b/client/src/components/Shared/ReleaseInformation/ReleaseInformation.scss
@@ -0,0 +1,8 @@
+.release-info {
+  font-size: 16px;
+
+  a {
+    color: white;
+    text-decoration: underline;
+  }
+}
diff --git a/client/src/components/Shared/ReleaseInformation/ReleaseInformation.tsx b/client/src/components/Shared/ReleaseInformation/ReleaseInformation.tsx
@@ -0,0 +1,51 @@
+import './ReleaseInformation.scss';
+import React, { useState, useEffect } from 'react';
+
+const ReleaseInformation: React.FC = () => {
+  interface GithubRelease {
+    html_url: string;
+    name: string;
+    published_at: string;
+  }
+
+  const [currentRelease, setCurrentRelease] = useState<
+    GithubRelease | undefined
+  >(undefined);
+
+  const fetchRelease = async () => {
+    const response = await fetch(
+      'https://api.github.com/repos/dgidb/dgidb-v5/releases?per_page=1'
+    );
+    if (response.ok) {
+      const body = await response.json();
+      setCurrentRelease(body[0]);
+    } else {
+      setCurrentRelease(undefined);
+    }
+  };
+
+  useEffect(() => {
+    fetchRelease();
+  }, []);
+
+  return (
+    <div>
+      {currentRelease && (
+        <div className="release-info">
+          DGIdb {currentRelease.name} (
+          {new Date(currentRelease.published_at).toLocaleString().split(',')[0]}
+          )&nbsp; &bull; &nbsp;
+          <a href={currentRelease.html_url} target="_blank">
+            Release Notes
+          </a>
+          &nbsp; &bull; &nbsp;
+          <a href="https://github.com/dgidb/dgidb-v5/releases/" target="_blank">
+            History
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ReleaseInformation;
diff --git a/client/src/hooks/queries/useGetInteractionRecord.ts b/client/src/hooks/queries/useGetInteractionRecord.ts
@@ -23,6 +23,9 @@ const getInteractionRecordQuery = gql`
         pmid
         citation
       }
+      sources {
+        fullName
+      }
       interactionAttributes {
         name
         value

diff --git a/client/src/index.css b/client/src/index.css
@@ -41,6 +41,7 @@
   --header-gradient-2: #180a20;
   --logo-gradient-1: #f7f7f8;
   --logo-gradient-2: #ada7bd;
+  --link: #2589bd;
 }
 
 [data-theme='light-home'] {

diff --git a/client/src/pages/About/About.scss b/client/src/pages/About/About.scss
@@ -1,4 +1,8 @@
 .about-page-container {
+  a {
+    color: var(--link) !important;
+  }
+
   h3 {
     font-size: 2rem;
     margin-bottom: 15px;
@@ -42,17 +46,12 @@
       }
 
       .about-citation {
-        color: #8075ff;
         font-size: 0.8rem;
         font-weight: 400;
       }
     }
   }
 
-  .ant-anchor-link-title {
-    color: var(--text-content) !important;
-  }
-
   span {
     color: red !important;
   }
@@ -61,6 +60,12 @@
     font-size: 0.89rem;
   }
 
+  .publications-section-container {
+    .about-pub-item {
+      padding-bottom: 0.5em;
+    }
+  }
+
   .contact-section-container {
     .left-section {
       float: left;
@@ -75,6 +80,9 @@
     .spacing {
       min-height: 700px;
     }
+    svg {
+      fill: var(--text-primary);
+    }
   }
 
   .faq-section-container {
@@ -91,8 +99,5 @@
     li {
       list-style-type: none;
     }
-    a {
-      color: var(--text-accent);
-    }
   }
 }