Replacing the custom tables with DataGrids

app/src/components/pages/data/FeatureTable.js

@@ -0,0 +1,92 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import { DataGrid } from "@mui/x-data-grid";
+import { Card, CardContent, Typography } from "@mui/material";
+import styled from "@emotion/styled";
+
+const CellContent = styled.span`
+  font-weight: ${(props) => (props.isBold ? "bold" : "normal")};
+`;
+
+const columns = [
+  { field: "id", headerName: "Index", type: "number", width: 90 },
+  {
+    field: "name",
+    headerName: "Feature Name",
+    width: 200,
+    editable: true,
+    valueGetter: (params) =>
+      `${params.row.name} ${params.row.target === "1" ? "(target)" : ""}`,
+    renderCell: (params) => {
+      const isBold = params.row.target === "1";
+      return <CellContent isBold={isBold}>{params.value}</CellContent>;
+    },
+  },
+  {
+    field: "type",
+    headerName: "Type",
+    width: 100,
+    editable: true,
+  },
+  {
+    field: "distinct",
+    headerName: "Distinct values",
+    type: "number",
+    width: 110,
+    editable: true,
+  },
+  {
+    field: "missing",
+    headerName: "Missing values",
+    type: "number",
+    width: 110,
+    editable: true,
+  },
+];
+
+const FeatureTable = ({ data }) => {
+  // Define the rows for the grid
+  const rows = data.map((feature) => {
+    const id = feature.index; // Rename index to id
+    return {
+      id,
+      ...Object.keys(feature).reduce((acc, key) => {
+        acc[key] = feature[key];
+        return acc;
+      }, {}),
+    };
+  });
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h4" mb={6}>
+          {data.length + " Features"}
+        </Typography>
+        <Box sx={{ width: "100%" }}>
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            getRowId={(row) => row.index}
+            sortModel={[
+              {
+                field: "id",
+                sort: "asc",
+              },
+            ]}
+            initialState={{
+              pagination: {
+                paginationModel: {
+                  pageSize: 10,
+                },
+              },
+            }}
+            pageSizeOptions={[10, 20, 50, 100]}
+          />
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FeatureTable;

app/src/components/pages/data/QualityTable.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import { DataGrid } from "@mui/x-data-grid";
+import { Card, CardContent, Typography } from "@mui/material";
+
+const columns = [
+  {
+    field: "quality",
+    headerName: "Quality Name",
+    width: 400,
+    editable: true,
+  },
+  {
+    field: "value",
+    headerName: "Value",
+    width: 100,
+    editable: true,
+    type: "number",
+  },
+];
+
+const QualityTable = ({ data }) => {
+  // Define the rows for the grid
+  const rows = Object.keys(data).map((key) => ({
+    id: key,
+    quality: key,
+    value: data[key],
+  }));
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h4" mb={6}>
+          {Object.keys(data).length + " Qualities (meta-features)"}
+        </Typography>
+        <Box sx={{ width: "100%" }}>
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            initialState={{
+              pagination: {
+                paginationModel: {
+                  pageSize: 5,
+                },
+              },
+            }}
+            pageSizeOptions={[5, 10, 20, 50, 100]}
+          />
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default QualityTable;

app/src/pages/api/itemDetail.js

@@ -77,6 +77,24 @@ export class FeatureDetail extends React.Component {
   }
 }
 
+export class QualityDetail extends React.Component {
+  render() {
+    return (
+      <TableRow>
+        <TableCell className={"itemHead"}>
+          <FontAwesomeIcon icon={faChartBar} />
+        </TableCell>
+        <TableCell className={"itemName"}>
+          {fixUpperCase(this.props.item.name)}
+        </TableCell>
+        <TableCell className={"itemDetail-small"}>
+          {this.props.item.value}
+        </TableCell>
+      </TableRow>
+    );
+  }
+}
+
 // export const LightTooltip = withStyles(theme => ({
 //     tooltip: {
 //       backgroundColor: theme.palette.common.white,
@@ -131,23 +149,6 @@ export class FlowDetail extends React.Component {
     );
   }
 }
-export class QualityDetail extends React.Component {
-  render() {
-    return (
-      <TableRow>
-        <TableCell className={"itemHead"}>
-          <FontAwesomeIcon icon={faChartBar} />
-        </TableCell>
-        <TableCell className={"itemName"}>
-          {fixUpperCase(this.props.item.name)}
-        </TableCell>
-        <TableCell className={"itemDetail-small"}>
-          {this.props.item.value}
-        </TableCell>
-      </TableRow>
-    );
-  }
-}
 
 export class EvaluationDetail extends React.Component {
   render() {

app/src/pages/d/[dataId].js

@@ -7,6 +7,8 @@ import DashboardLayout from "../../layouts/Dashboard";
 import { getItem } from "../api/getItem";
 import Wrapper from "../../components/Wrapper";
 import CroissantButton from "../../components/pages/data/CroissantButton";
+import FeatureTable from "../../components/pages/data/FeatureTable";
+import QualityTable from "../../components/pages/data/QualityTable";
 
 import styled from "@emotion/styled";
 import {
@@ -35,13 +37,7 @@ import {
 import { MetaTag } from "../../components/MetaItems";
 import ReactMarkdown from "react-markdown";
 
-import { CollapsibleDataTable } from "../api/sizeLimiter";
-import {
-  FeatureDetail,
-  QualityDetail,
-  updateTag,
-  TagChip,
-} from "../api/itemDetail";
+import { updateTag, TagChip } from "../api/itemDetail";
 export async function getStaticPaths() {
   // No paths are pre-rendered
   return { paths: [], fallback: "blocking" }; // or fallback: true, if you prefer
@@ -63,6 +59,8 @@ const UserChip = styled(Chip)`
   margin-bottom: 5px;
 `;
 
+// Loads the information about the dataset from ElasticSearch
+// Also loads the translations for the page
 export async function getStaticProps({ params, locale }) {
   try {
     // Fetch necessary data for the dataset page using params.dataId
@@ -89,13 +87,6 @@ export async function getStaticProps({ params, locale }) {
 }
 
 function Dataset({ data, error }) {
-  const featureTableColumns = [
-    "",
-    "Feature Name",
-    "Type",
-    "Distinct/Missing Values",
-  ];
-  const qualityTableColumns = ["", "Quality Name", "Value"];
   const did = data.data_id;
   const did_padded = did.toString().padStart(4, "0");
   const bucket_url = "https://openml1.win.tue.nl/datasets/";
@@ -305,45 +296,12 @@ function Dataset({ data, error }) {
           </Card>
         </Grid>
 
-        {/* Features */}
+        {/* Feature and Quality tables */}
         <Grid item xs={12}>
-          <Card>
-            <CardContent>
-              <CollapsibleDataTable
-                title={data.features.length + " Features"}
-                columns={featureTableColumns}
-                data={data.features}
-                rowrenderer={(m) => (
-                  <FeatureDetail
-                    key={"fd_" + m.name}
-                    item={m}
-                    type={m.type}
-                  ></FeatureDetail>
-                )}
-                maxLength={7}
-              />
-            </CardContent>
-          </Card>
+          <FeatureTable data={data.features} />
         </Grid>
-
-        {/* Qualities */}
         <Grid item xs={12}>
-          <Card>
-            <CardContent>
-              <CollapsibleDataTable
-                title={Object.keys(data.qualities).length + " Qualities"}
-                data={Object.keys(data.qualities)}
-                rowrenderer={(m) => (
-                  <QualityDetail
-                    key={"q_" + m}
-                    item={{ name: m, value: data.qualities[m] }}
-                  />
-                )}
-                columns={qualityTableColumns}
-                maxLength={7}
-              />
-            </CardContent>
-          </Card>
+          <QualityTable data={data.qualities} />
         </Grid>
       </Grid>
     </Wrapper>