From 1b1a8aad938f15400a9087df8f2d19561929e724 Mon Sep 17 00:00:00 2001 From: joaquinvanschoren Date: Sun, 14 Jan 2024 01:12:34 +0100 Subject: [PATCH] Replacing the custom tables with DataGrids --- app/src/components/pages/data/FeatureTable.js | 92 +++++++++++++++++++ app/src/components/pages/data/QualityTable.js | 55 +++++++++++ app/src/pages/api/itemDetail.js | 35 +++---- app/src/pages/d/[dataId].js | 58 ++---------- 4 files changed, 173 insertions(+), 67 deletions(-) create mode 100644 app/src/components/pages/data/FeatureTable.js create mode 100644 app/src/components/pages/data/QualityTable.js diff --git a/app/src/components/pages/data/FeatureTable.js b/app/src/components/pages/data/FeatureTable.js new file mode 100644 index 0000000..6ecbfdc --- /dev/null +++ b/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 {params.value}; + }, + }, + { + 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 ( + + + + {data.length + " Features"} + + + row.index} + sortModel={[ + { + field: "id", + sort: "asc", + }, + ]} + initialState={{ + pagination: { + paginationModel: { + pageSize: 10, + }, + }, + }} + pageSizeOptions={[10, 20, 50, 100]} + /> + + + + ); +}; + +export default FeatureTable; diff --git a/app/src/components/pages/data/QualityTable.js b/app/src/components/pages/data/QualityTable.js new file mode 100644 index 0000000..eae5f0e --- /dev/null +++ b/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 ( + + + + {Object.keys(data).length + " Qualities (meta-features)"} + + + + + + + ); +}; + +export default QualityTable; diff --git a/app/src/pages/api/itemDetail.js b/app/src/pages/api/itemDetail.js index f67128b..3f1f4e3 100644 --- a/app/src/pages/api/itemDetail.js +++ b/app/src/pages/api/itemDetail.js @@ -77,6 +77,24 @@ export class FeatureDetail extends React.Component { } } +export class QualityDetail extends React.Component { + render() { + return ( + + + + + + {fixUpperCase(this.props.item.name)} + + + {this.props.item.value} + + + ); + } +} + // 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 ( - - - - - - {fixUpperCase(this.props.item.name)} - - - {this.props.item.value} - - - ); - } -} export class EvaluationDetail extends React.Component { render() { diff --git a/app/src/pages/d/[dataId].js b/app/src/pages/d/[dataId].js index 1efc570..0089c61 100644 --- a/app/src/pages/d/[dataId].js +++ b/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 }) { - {/* Features */} + {/* Feature and Quality tables */} - - - ( - - )} - maxLength={7} - /> - - + - - {/* Qualities */} - - - ( - - )} - columns={qualityTableColumns} - maxLength={7} - /> - - +