Adds multi-page viewing options for patient tab modal

ACED-IDP · Jun 17, 2024 · f3653a1 · f3653a1
1 parent 474103d
commit f3653a1
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 24 deletions.
diff --git a/packages/sampleCommons/.env.production b/packages/sampleCommons/.env.production
@@ -1,3 +1,4 @@
-GEN3_COMMONS_NAME=gen3
+GEN3_COMMONS_NAME=aced
 #NEXT_PUBLIC_GEN3_API=https://development.compbio.ohsu.edu
-NEXT_PUBLIC_GEN3_API=https://aced-training.compbio.ohsu.edu:3010
+NEXT_PUBLIC_GEN3_API=https://development.aced-idp.org
+NEXT_PUBLIC_GEN3_GUPPY_API=https://development.aced-idp.org/guppy
diff --git a/packages/sampleCommons/config/aced/explorer.json b/packages/sampleCommons/config/aced/explorer.json
@@ -42,7 +42,6 @@
         "nodeType": "file"
       },
       "fields": [
-        "id",
         "Gleason_grade",
         "Maximum_Cancer_Core_Length_in_mm",
         "UCL_Definition",
@@ -53,7 +52,8 @@
         "Sampled_area_level_Base_Midtogland_Apex_or_combinations",
         "us_core_birthsex",
         "us_core_ethnicity",
-        "us_core_race"
+        "us_core_race",
+        "id"
       ]
     },
     "guppyConfig": {
@@ -90,8 +90,8 @@
           "title": "File",
           "fields": [
             "project_id",
-            "category",
             "type",
+            "category",
             "title",
             "subject",
             "contentType"
@@ -108,16 +108,16 @@
         "title": "File Details"
       },
       "fields": [
-        "id",
         "title",
-        "subject",
         "source_url",
-        "md5",
         "size",
-        "contentType",
         "creation",
-        "url",
-        "category"
+        "subject",
+        "md5",
+        "type",
+        "category",
+        "contentType",
+        "url"
       ]
     },
     "guppyConfig": {

diff --git a/packages/sampleCommons/src/lib/CohortBuilder/PatientDetailsPanel.tsx b/packages/sampleCommons/src/lib/CohortBuilder/PatientDetailsPanel.tsx
@@ -21,12 +21,17 @@ import {
   MdCheck as IconCheck,
 } from 'react-icons/md';
 import { table } from 'console';
+import { useState } from 'react';
 
 // a definition of the query response
 interface QueryResponse {
   data?: Record<string, Array<any>>;
 }
 
+interface FileData {
+  [key: string]: any;
+}
+
 /**
  * Checks if the given object is a QueryResponse.
  *
@@ -41,17 +46,14 @@ const isQueryResponse = (obj: any): obj is QueryResponse => {
   );
 };
 
-const extractData = (
-  data: QueryResponse,
-  index: string,
-): Record<string, any> => {
+const extractData = (data: QueryResponse, index: string): FileData[] => {
   console.log('QUERY INDEX: ', index, 'QUERY DATA: ', data);
-  if (data === undefined || data === null) return {};
-  if (data.data === undefined || data.data === null) return {};
+  if (data === undefined || data === null) return [];
+  if (data.data === undefined || data.data === null) return [];
 
   return Array.isArray(data.data['file']) && data.data['file'].length > 0
-    ? data.data['file'][0]
-    : {};
+    ? data.data['file']
+    : [];
 };
 
 export const PatientDetailsPanel = ({
@@ -60,7 +62,7 @@ export const PatientDetailsPanel = ({
   tableConfig,
   onClose,
 }: TableDetailsPanelProps) => {
-  //const [queryGuppy, { data, isLoading, isError }] = useLazyGeneralGQLQuery();
+  const [currentFileIndex, setCurrentFileIndex] = useState(0);
   const idField = tableConfig.detailsConfig?.idField;
   const nodeType = tableConfig.detailsConfig?.nodeType;
   const { data, isLoading, isError } = useGeneralGQLQuery({
@@ -100,11 +102,14 @@ export const PatientDetailsPanel = ({
   if (isError) {
     return <ErrorCard message={'Error occurred while fetching data'} />;
   }
+  const queryData = isQueryResponse(data) ? extractData(data, index) : [];
 
-  const queryData = isQueryResponse(data) ? extractData(data, index) : {};
+  const totalFiles = queryData.length;
+  const currentFileData = queryData[currentFileIndex] || {};
 
-  const rows = Object.entries(queryData).map(([field, value]) => (
-    <tr key={field}>
+  // Render rows for the current file index
+  const rows = Object.entries(currentFileData).map(([field, value]) => (
+    <tr key={`${currentFileIndex}-${field}`}>
       <td>
         <Text weight="bold">{field}</Text>
       </td>
@@ -124,6 +129,21 @@ export const PatientDetailsPanel = ({
       </td>
     </tr>
   ));
+
+  // Handle previous file index
+  const handlePrevFile = () => {
+    if (currentFileIndex > 0) {
+      setCurrentFileIndex(currentFileIndex - 1);
+    }
+  };
+
+  // Handle next file index
+  const handleNextFile = () => {
+    if (currentFileIndex < totalFiles - 1) {
+      setCurrentFileIndex(currentFileIndex + 1);
+    }
+  };
+
   return (
     <Stack>
       <LoadingOverlay visible={isLoading} />
@@ -138,7 +158,22 @@ export const PatientDetailsPanel = ({
         <tbody>{rows}</tbody>
       </Table>
       <Group position="right">
-        <CopyButton value={JSON.stringify(queryData)} timeout={2000}>
+        <Button onClick={handlePrevFile} disabled={currentFileIndex === 0}>
+          Previous
+        </Button>
+        <Text>{`${currentFileIndex + 1} / ${totalFiles}`}</Text>
+        <Button
+          onClick={handleNextFile}
+          disabled={currentFileIndex === totalFiles - 1}
+        >
+          Next
+        </Button>
+      </Group>
+      <Group position="right">
+        <CopyButton
+          value={JSON.stringify(queryData[currentFileIndex])}
+          timeout={2000}
+        >
           {({ copied, copy }) => (
             <Tooltip
               label={copied ? 'Copied' : 'Copy'}