improved table view for search and various other fixes

app/src/components/Card.js

@@ -27,7 +27,6 @@ const Card = styled(MuiCard)`
   ${spacing};
   position: relative;
   box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.05);
-  display: flex;
   flex-direction: column;
   &:after {
     content: " ";

app/src/components/navbar/Navbar.js

@@ -2,7 +2,7 @@ import React, { memo, useState } from "react";
 import styled from "@emotion/styled";
 import { darken } from "polished";
 import { useTranslation } from "next-i18next";
-import searchConfig from "../../pages/d/searchConfig";
+import dataSearchConfig from "../../pages/d/searchConfig";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
@@ -177,6 +177,8 @@ const SearchBar = memo(({ config }) => {
 });
 
 const SearchContainer = ({ ecolor }) => {
+  const searchConfig = dataSearchConfig;
+
   return (
     <SearchWrapper
       ecolor={ecolor}

app/src/components/search/ResultTable.js

@@ -1,9 +1,18 @@
-import { DataGrid } from "@mui/x-data-grid";
+import { DataGrid as MuiDataGrid } from "@mui/x-data-grid";
 import { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { Box } from "@mui/material";
 
 const MAX_CELL_LENGTH = 75;
-const BASE_PADDING = 10;
+const BASE_PADDING = 1;
 
+const DataGrid = styled(MuiDataGrid)`
+  & .MuiDataGrid-columnHeaders {
+    background-color: rgba(255, 255, 255, 0.16);
+  }
+`;
+
+// Calculate a good table column width based on the content
 const useAutoWidthColumns = (rows, columnOrder) => {
   const [columnWidths, setColumnWidths] = useState({});
   const context = document.createElement("canvas").getContext("2d");
@@ -34,9 +43,47 @@ const useAutoWidthColumns = (rows, columnOrder) => {
   return columnWidths;
 };
 
-const stripQuotes = (value) => {
-  // This will remove all instances of double quotes from the string
-  return value.replace(/["]+/g, "");
+// Map the way ElasticSearch returns the data to the way the DataGrid expects it
+const valueGetter = (fieldName) => (params) => {
+  let value = params.row[fieldName]?.raw ?? params.row[fieldName];
+  if (typeof value === "string") {
+    // Remove quotes from string values
+    return value.replace(/^"(.*)"$/, "$1");
+  } else if (Array.isArray(value)) {
+    // Process the array and remove quotes from each string element
+    return value
+      .map((item) => {
+        if (item.tag && typeof item.tag === "string") {
+          // Remove quotes from string
+          return item.tag.replace(/^"(.*)"$/, "$1");
+        } else if (typeof item === "string") {
+          // Remove quotes from string
+          return item.replace(/^"(.*)"$/, "$1");
+        }
+        // Stringify non-string items
+        return JSON.stringify(item);
+      })
+      .join(", ");
+  } else if (value && typeof value === "object") {
+    // Stringify object values
+    return JSON.stringify(value);
+  }
+  // Return the value if it's not a string or an object
+  return value;
+};
+
+// Controls how each cell is rendered
+const renderCell = (params) => {
+  const value = params.value; // This should be a string after valueGetter's processing
+  const displayValue =
+    typeof value === "string" && value.length > MAX_CELL_LENGTH
+      ? `${value.substring(0, MAX_CELL_LENGTH)}…`
+      : value;
+  return (
+    <div title={typeof value === "string" ? value : "Complex Object"}>
+      {displayValue}
+    </div>
+  );
 };
 
 const ResultsTable = ({ results, columnOrder }) => {
@@ -53,20 +100,8 @@ const ResultsTable = ({ results, columnOrder }) => {
       field: fieldName,
       headerName: fieldName.charAt(0).toUpperCase() + fieldName.slice(1),
       width: columnWidths[fieldName] || 150, // Use the calculated width or a default value
-      valueGetter: (params) => {
-        const rawValue = params.row[fieldName]?.raw ?? params.row[fieldName];
-        // Convert to string and strip quotes if it's a string
-        return typeof rawValue === "string" ? stripQuotes(rawValue) : rawValue;
-      },
-      renderCell: (params) => {
-        // Assume params.value is already a string here
-        const value = params.value ? stripQuotes(params.value.toString()) : "";
-        const truncatedValue =
-          value.length > MAX_CELL_LENGTH
-            ? `${value.substring(0, MAX_CELL_LENGTH)}…`
-            : value;
-        return <div title={value}>{truncatedValue}</div>;
-      },
+      valueGetter: valueGetter(fieldName),
+      renderCell: renderCell,
     };
   });
 
@@ -88,15 +123,25 @@ const ResultsTable = ({ results, columnOrder }) => {
     };
   });
 
+  // Do something with the selected rows
+  // Could be used to e.g. tag a number of datasets or add them to a collection
+  const onRowsSelectionHandler = (ids) => {
+    const selectedRowsData = ids.map((id) => rows.find((row) => row.id === id));
+    console.log(selectedRowsData);
+  };
+
   return (
-    <DataGrid
-      rows={rows}
-      columns={columns}
-      pageSize={rows.length} // Set to the total number of rows
-      rowsPerPageOptions={[]}
-      hideFooter
-      // checkboxSelection
-    />
+    <Box sx={{ height: "calc(100vh - 192px)", width: "100%" }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        pageSize={rows.length} // Set to the total number of rows
+        rowsPerPageOptions={[]}
+        hideFooter
+        //checkboxSelection // Disabled for now because we don't do anything useful with it yet
+        onRowSelectionModelChange={(ids) => onRowsSelectionHandler(ids)}
+      />
+    </Box>
   );
 };
 

app/src/components/sidebar/navItems.js

@@ -1,6 +1,6 @@
 const openmlSection = [
   {
-    href: "/d/search?size=n_20_n&sort%5B0%5D%5Bfield%5D=date&sort%5B0%5D%5Bdirection%5D=desc",
+    href: "/d/search",
     title: "sidebar.datasets",
     badge: "100",
   },

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

@@ -6,6 +6,24 @@ import { Typography } from "@mui/material";
 
 import DashboardLayout from "../../layouts/Dashboard";
 
+// Server-side translation
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+export async function getStaticPaths() {
+  // No paths are pre-rendered
+  return { paths: [], fallback: "blocking" }; // or fallback: true, if you prefer
+}
+
+export async function getStaticProps({ params, locale }) {
+  // Fetch necessary data for the dataset page using params.dataId
+  return {
+    props: {
+      // pass the translation props to the page component
+      ...(await serverSideTranslations(locale)),
+    },
+  };
+}
+
 function Dataset() {
   const router = useRouter();
   const dataId = router.query.dataId;

app/src/pages/d/searchConfig.js

@@ -5,6 +5,7 @@ const searchConfig = {
   apiConnector: apiConnector,
   alwaysSearchOnInitialLoad: true,
   searchQuery: {
+    resultsPerPage: 100,
     search_fields: {
       description: {},
     },
@@ -72,7 +73,7 @@ const searchConfig = {
   },
   autocompleteQuery: {
     results: {
-      resultsPerPage: 5,
+      resultsPerPage: 100,
       result_fields: {
         // specify the fields you want from the index to display the results
         name: { snippet: { size: 100, fallback: true } },
@@ -84,8 +85,6 @@ const searchConfig = {
       },
     },
   },
-  //This doesn't work yet.
-  //initialState: { searchTerm: "", sort: { field: "date" } },
 };
 
 export default searchConfig;