From d06e08c28970387f9b0aa2b21d144fce909dbed4 Mon Sep 17 00:00:00 2001
From: Hamsini Malli Sivakumar <hmallisi@broadinstitute.org>
Date: Wed, 15 Nov 2023 14:39:32 -0500
Subject: [PATCH 1/3] style updates

---
 src/components/CollapsibleTable.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/CollapsibleTable.js b/src/components/CollapsibleTable.js
index 01f6129e0..c8beb2fbb 100644
--- a/src/components/CollapsibleTable.js
+++ b/src/components/CollapsibleTable.js
@@ -131,6 +131,15 @@ const TruncatedTableCell = styled(StyledTableCell)(() => ({
       wordBreak: 'break-all'
     },
   },
+  '&:nth-child(3)': {
+    maxWidth: '37ch'
+  }
+}));
+
+const StyledSubtableCell = styled(StyledTableCell)(() => ({
+  '&:nth-child(2)': {
+    maxWidth: '15ch'
+  }
 }));
 
 const CollapsibleRow = (props) => {
@@ -202,9 +211,9 @@ const CollapsibleRow = (props) => {
                         />
                       </StyledTableCell>
                       {subRow.data.map((cell, k) => (
-                        <StyledTableCell key={k}>
+                        <StyledSubtableCell key={k}>
                           {cell.value}
-                        </StyledTableCell>
+                        </StyledSubtableCell>
                       ))}
                     </TableRow>
                   ))}

From a7d0614e247c17c87b8002cd578b88321720a59e Mon Sep 17 00:00:00 2001
From: Hamsini Malli Sivakumar <hmallisi@broadinstitute.org>
Date: Mon, 27 Nov 2023 09:12:16 -0500
Subject: [PATCH 2/3] created components to render table cells by type

---
 src/components/CollapsibleTable.js            | 64 +++++++++++++------
 .../data_search/DatasetSearchTable.js         |  2 +
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/components/CollapsibleTable.js b/src/components/CollapsibleTable.js
index c8beb2fbb..9233449be 100644
--- a/src/components/CollapsibleTable.js
+++ b/src/components/CollapsibleTable.js
@@ -136,12 +136,6 @@ const TruncatedTableCell = styled(StyledTableCell)(() => ({
   }
 }));
 
-const StyledSubtableCell = styled(StyledTableCell)(() => ({
-  '&:nth-child(2)': {
-    maxWidth: '15ch'
-  }
-}));
-
 const CollapsibleRow = (props) => {
   const { row, row: { subtable: { rows: subrows } }, selected, selectHandler } = props;
 
@@ -173,15 +167,7 @@ const CollapsibleRow = (props) => {
           </IconButton>
         </StyledTableCell>
         {row.data.map((cell, i) => {
-          return cell?.truncate ? (
-            <TruncatedTableCell key={i}>
-              {cell.value}
-            </TruncatedTableCell>
-          ) : (
-            <StyledTableCell key={i}>
-              {cell.value}
-            </StyledTableCell>
-          );
+          return <TableCellRenderer key={i} cell={cell} />;
         })}
       </TableRow>
       {/* subtable */}
@@ -210,11 +196,9 @@ const CollapsibleRow = (props) => {
                           checked={isSelected(subRow.id)}
                         />
                       </StyledTableCell>
-                      {subRow.data.map((cell, k) => (
-                        <StyledSubtableCell key={k}>
-                          {cell.value}
-                        </StyledSubtableCell>
-                      ))}
+                      {subRow.data.map((cell, k) => {
+                        return <SubtableCellRenderer key={k} cell={cell} />;
+                      })}
                     </TableRow>
                   ))}
                 </TableBody>
@@ -277,3 +261,43 @@ export const CollapsibleTable = (props) => {
 };
 
 export default CollapsibleTable;
+
+const TableCellRenderer = ({ cell }) => {
+
+  if (cell?.truncate && cell?.increaseWidth) {
+    return <TruncatedTableCell style={{ maxWidth: '30ch' }}>
+      {cell.value}
+    </TruncatedTableCell>;
+  }
+
+  if (cell?.truncate) {
+    return <TruncatedTableCell>
+      {cell.value}
+    </TruncatedTableCell>;
+  }
+
+  if (cell?.increaseWidth) {
+    return <StyledTableCell style={{ width: '37ch' }}>
+      {cell.value}
+    </StyledTableCell>;
+  }
+
+  // Default case:
+  return <StyledTableCell>
+    {cell.value}
+  </StyledTableCell>;
+};
+
+const SubtableCellRenderer = ({ cell }) => {
+
+  if (cell?.increaseWidth) {
+    return <StyledTableCell style={{ width: '15ch' }}>
+      {cell.value}
+    </StyledTableCell>;
+  }
+
+  // Default case:
+  return <StyledTableCell>
+    {cell.value}
+  </StyledTableCell>;
+};
\ No newline at end of file
diff --git a/src/components/data_search/DatasetSearchTable.js b/src/components/data_search/DatasetSearchTable.js
index 565ef24d3..79545488e 100644
--- a/src/components/data_search/DatasetSearchTable.js
+++ b/src/components/data_search/DatasetSearchTable.js
@@ -115,6 +115,7 @@ export const DatasetSearchTable = (props) => {
             {
               value: entry[0].study.studyName,
               truncate: true,
+              increaseWidth: true
             },
             {
               value: entry[0].study.description,
@@ -152,6 +153,7 @@ export const DatasetSearchTable = (props) => {
                 data: [
                   {
                     value: dataset.datasetIdentifier,
+                    increaseWidth: true
                   },
                   {
                     value: dataset.dataUse?.primary.map((use) => use.code).join(', ')

From 233fde5143b983c87687205e02361fff36fd2ab8 Mon Sep 17 00:00:00 2001
From: Hamsini Malli <hmallisi@broadinstitute.org>
Date: Mon, 27 Nov 2023 09:19:31 -0500
Subject: [PATCH 3/3] Update CollapsibleTable.js

---
 src/components/CollapsibleTable.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/CollapsibleTable.js b/src/components/CollapsibleTable.js
index 9233449be..8f84199e0 100644
--- a/src/components/CollapsibleTable.js
+++ b/src/components/CollapsibleTable.js
@@ -131,9 +131,6 @@ const TruncatedTableCell = styled(StyledTableCell)(() => ({
       wordBreak: 'break-all'
     },
   },
-  '&:nth-child(3)': {
-    maxWidth: '37ch'
-  }
 }));
 
 const CollapsibleRow = (props) => {
@@ -300,4 +297,4 @@ const SubtableCellRenderer = ({ cell }) => {
   return <StyledTableCell>
     {cell.value}
   </StyledTableCell>;
-};
\ No newline at end of file
+};