visual fix for dataset table (#163)

qdrant · Mar 6, 2024 · 752358c · 752358c
1 parent 56df34b
commit 752358c
Showing 1 changed file with 46 additions and 18 deletions.
diff --git a/src/components/Datasets/DatasetsTableRow.jsx b/src/components/Datasets/DatasetsTableRow.jsx
@@ -2,7 +2,17 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import prettyBytes from 'pretty-bytes';
 import { useTheme } from '@mui/material/styles';
-import { Box, CircularProgress, IconButton, TableCell, TableRow, Tooltip, Typography } from '@mui/material';
+import {
+  Box,
+  Card,
+  CircularProgress,
+  Grid,
+  IconButton,
+  TableCell,
+  TableRow,
+  Tooltip,
+  Typography,
+} from '@mui/material';
 import { Download, FolderZip } from '@mui/icons-material';
 import ImportDatasetDialog from './ImportDatasetDialog';
 
@@ -62,23 +72,41 @@ export const DatasetsTableRow = ({ dataset, importDataset }) => {
 
       <TableCell align="center">{prettyBytes(dataset.size)}</TableCell>
 
-      {dataset.vectors.size && (
-        <TableRow>
-          <TableCell align="center">default</TableCell>
-          <TableCell align="center">{dataset.vectors.size}</TableCell>
-          <TableCell align="center">{dataset.vectors.distance}</TableCell>
-          <TableCell align="center">{dataset.vectors.model}</TableCell>
-        </TableRow>
-      )}
-      {!dataset.vectors.size &&
-        Object.keys(dataset.vectors).map((vector) => (
-          <TableRow key={vector}>
-            <TableCell align="center">{vector}</TableCell>
-            <TableCell align="center">{dataset.vectors[vector].size}</TableCell>
-            <TableCell align="center">{dataset.vectors[vector].distance}</TableCell>
-            <TableCell align="center">{dataset.vectors[vector].model}</TableCell>
-          </TableRow>
-        ))}
+      <TableCell>
+        {dataset.vectors.size && (
+          <Grid container component={Card} variant={'heading'} p={1}>
+            <Grid item align="center" mr={2}>
+              default
+            </Grid>
+            <Grid item align="center" mr={2}>
+              {dataset.vectors.size}
+            </Grid>
+            <Grid item align="center" mr={2}>
+              {dataset.vectors.distance}
+            </Grid>
+            <Grid item align="center">
+              {dataset.vectors.model}
+            </Grid>
+          </Grid>
+        )}
+        {!dataset.vectors.size &&
+          Object.keys(dataset.vectors).map((vector) => (
+            <Grid key={vector} container component={Card} variant={'heading'} p={1}>
+              <Grid item align="center">
+                {vector}
+              </Grid>
+              <Grid item align="center">
+                {dataset.vectors[vector].size}
+              </Grid>
+              <Grid item align="center">
+                {dataset.vectors[vector].distance}
+              </Grid>
+              <Grid item align="center">
+                {dataset.vectors[vector].model}
+              </Grid>
+            </Grid>
+          ))}
+      </TableCell>
 
       <TableCell align="center">{dataset.vectorCount}</TableCell>
       <TableCell align="center">