Final data view styling

Signed-off-by: Emil Balitzki <emil.balitzki@gmail.com>
amosproj · Jul 12, 2024 · 4f9f45a · 4f9f45a
1 parent 06b87af
commit 4f9f45a
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 20 deletions.
diff --git a/frontend/src/components/DataView/DataRow.css b/frontend/src/components/DataView/DataRow.css
@@ -4,8 +4,22 @@
 
 .data-row {
   height: 40px;
+  background-color: rgb(251, 251, 251);
+}
+
+.data-row-title-container {
+  padding-left: 0 !important;
+}
+
+.data-row-title {
+  display: flex !important;
+  gap: 0.5rem;
 }
 
 .data-row-value {
   text-align: end !important;
 }
+
+.subdata-rows-container > *:last-child > * {
+  border-bottom: none;
+}
diff --git a/frontend/src/components/DataView/DataRow.tsx b/frontend/src/components/DataView/DataRow.tsx
@@ -2,7 +2,6 @@ import { Fragment, useState, useEffect } from "react";
 import { DatasetItem } from "../../types/LocationDataTypes";
 import { useContext } from "react";
 import {
-  Box,
   Collapse,
   IconButton,
   Table,
@@ -94,6 +93,13 @@ const DataRow: React.FC<RowProps> = ({ row, currentDatasets }) => {
     }
   };
 
+  const getIconByDatasetID = (datasetID: string | null) => {
+    const dataset = currentDatasets.find((ds) => ds.datasetId === datasetID);
+    return (
+      dataset?.icon && <CustomSvgIcon svgString={dataset.icon} size={20} />
+    );
+  };
+
   return (
     <Fragment>
       <TableRow className="data-row">
@@ -113,10 +119,13 @@ const DataRow: React.FC<RowProps> = ({ row, currentDatasets }) => {
         <TableCell
           component="th"
           scope="row"
-          className="data-row-title"
           size="small"
+          className="data-row-title-container"
         >
-          {row.displayName}
+          <div className="data-row-title">
+            {getIconByDatasetID(row.datasetID)}
+            {row.displayName}
+          </div>
         </TableCell>
         {row.value && row.value !== "" ? (
           <TableCell
@@ -130,7 +139,7 @@ const DataRow: React.FC<RowProps> = ({ row, currentDatasets }) => {
         ) : (
           <TableCell />
         )}
-        {row.datasetID && row.datasetID != "" ? (
+        {row.datasetID && row.datasetID !== "" ? (
           <TableCell className="toggle-column" size="small">
             <Tooltip title="Locate on the map" arrow placement="left">
               <IconButton
@@ -151,20 +160,18 @@ const DataRow: React.FC<RowProps> = ({ row, currentDatasets }) => {
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
-              <Table size="small" aria-label="subdata">
-                <TableBody>
-                  {row.subdata.map((subItem) => (
-                    <TableRow key={subItem.key}>
-                      <TableCell component="th" scope="row" size="small">
-                        {subItem.key}
-                      </TableCell>
-                      <TableCell size="small">{subItem.value}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </Box>
+            <Table size="small" aria-label="subdata">
+              <TableBody className="subdata-rows-container">
+                {row.subdata.map((subItem) => (
+                  <TableRow key={subItem.key}>
+                    <TableCell component="th" scope="row" size="small">
+                      {subItem.key}
+                    </TableCell>
+                    <TableCell size="small">{subItem.value}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
           </Collapse>
         </TableCell>
       </TableRow>

diff --git a/frontend/src/components/DataView/DataView.css b/frontend/src/components/DataView/DataView.css
@@ -120,6 +120,10 @@
   max-height: 100%;
   display: flex;
   flex-direction: column;
-  overflow-y: scroll;
+  overflow-y: auto;
   margin-bottom: 1rem;
 }
+
+.data-collapse-table {
+  min-height: auto !important;
+}
diff --git a/frontend/src/components/DataView/DataView.tsx b/frontend/src/components/DataView/DataView.tsx
@@ -205,7 +205,12 @@ const DataView = () => {
                 {showSelectionData ? <CaretUp /> : <CaretDown />}
                 Selection Data
               </p>
-              <Collapse in={showSelectionData} timeout="auto" unmountOnExit>
+              <Collapse
+                in={showSelectionData}
+                timeout="auto"
+                unmountOnExit
+                className="data-collapse-table"
+              >
                 <TableContainer>
                   <Table>
                     <TableBody>