started generalizing search to other entity types

openml · Nov 23, 2023 · 212e95c · 212e95c
1 parent f14d1e4
commit 212e95c
Show file tree

Hide file tree

Showing 20 changed files with 366 additions and 244 deletions.
diff --git a/app/src/components/TableView.js b/app/src/components/TableView.js
diff --git a/app/src/components/search/ResultCard.js b/app/src/components/search/ResultCard.js
@@ -218,14 +218,14 @@ const ResultCard = ({ result }) => {
           subheader={result.bio.raw}
         />
       )}
-      {type !== "user" && (
+      {type !== "user" && type !== "task" && (
         <Title>
           <ColoredIcon color={color} icon={icon} fixedWidth />
           {"\u00A0\u00A0"}
           {result.name.raw}
         </Title>
       )}
-      {type !== "user" && result.description.raw && (
+      {type !== "user" && type !== "task" && result.description.raw && (
         <Teaser description={result.description.raw.toString()} limit={3} />
       )}
       {stats !== undefined && (

diff --git a/app/src/components/search/ResultTable.js b/app/src/components/search/ResultTable.js
@@ -4,9 +4,13 @@ import { Box, IconButton, Snackbar } from "@mui/material";
 import { useRouter } from "next/router";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
-import { faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faCopy, faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "next-i18next";
 
+import Teaser from "../../components/search/Teaser";
+import TimeAgo from "react-timeago";
+import Chip from "@mui/material/Chip";
+
 const MAX_CELL_LENGTH = 75;
 
 const DataGrid = styled(MuiDataGrid)`
@@ -105,6 +109,88 @@ export const copyCell = (setOpen) => {
   return CopyCellComponent;
 };
 
+// Renders chips in table view
+// Higher-order component to pass the `getChipProps` function
+export const renderChips = (getChipProps) => {
+  const RenderChips = (params) => {
+    const { label, icon, color } = getChipProps(params.value);
+    return (
+      <div title={label}>
+        <Chip
+          icon={icon}
+          label={label}
+          color={color}
+          size="small"
+          variant="outlined"
+        />
+      </div>
+    );
+  };
+
+  // Assign a display name for DevTools
+  RenderChips.displayName = `RenderChips`;
+
+  return RenderChips;
+};
+
+export const renderTags = (params) => {
+  const { value } = params;
+
+  // Return nothing if the label is empty
+  if (!value) {
+    return null;
+  }
+
+  // Split the label by commas to create an array of tags
+  const labels = value
+    .split(",")
+    .map((label) => label.trim())
+    .filter((label) => label);
+
+  // Determine if there are more than 3 labels
+  const hasMore = labels.length > 3;
+
+  // Slice the array to the first 3 labels if there are more than 3
+  const visibleLabels = hasMore ? labels.slice(0, 3) : labels;
+
+  // Map each tag to a Chip component and add a margin for spacing
+  const chips = visibleLabels.map((label, index) => (
+    <Chip
+      key={index}
+      label={label}
+      size="small"
+      variant="outlined"
+      sx={{ marginRight: "4px" }} // Add small space around the chip
+    />
+  ));
+
+  return (
+    <div title={value} style={{ display: "flex", flexWrap: "wrap" }}>
+      {chips}
+      {hasMore && (
+        <Chip
+          icon={<FontAwesomeIcon icon={faEllipsis} />}
+          size="small"
+          variant="outlined"
+          sx={{ paddingLeft: "8px" }} // Match the margin of other chips
+        />
+      )}
+    </div>
+  );
+};
+
+export const renderDate = (params) => {
+  return <TimeAgo date={new Date(params.value)} minPeriod={60} />;
+};
+
+export const renderDescription = (params) => {
+  return (
+    <div title={params.value}>
+      <Teaser description={params.value} lines={3} />
+    </div>
+  );
+};
+
 const ResultsTable = ({ results, columns }) => {
   const router = useRouter();
   const [open, setOpen] = React.useState(false); // Snackbar

diff --git a/app/src/components/sidebar/navItems.js b/app/src/components/sidebar/navItems.js
@@ -5,17 +5,17 @@ const openmlSection = [
     badge: "100",
   },
   {
-    href: "/t",
+    href: "/t/search",
     title: "sidebar.tasks",
     badge: "100",
   },
   {
-    href: "/f",
+    href: "/f/search",
     title: "sidebar.flows",
     badge: "100",
   },
   {
-    href: "/r",
+    href: "/r/search",
     title: "sidebar.runs",
     badge: "100",
   },
@@ -24,12 +24,12 @@ const openmlSection = [
     title: "sidebar.collections",
     children: [
       {
-        href: "/collections/tasks",
+        href: "/collections/tasks/search",
         title: "sidebar.tasks",
         badge: "100",
       },
       {
-        href: "/collections/runs",
+        href: "/collections/runs/search",
         title: "sidebar.runs",
         badge: "100",
       },
@@ -40,12 +40,12 @@ const openmlSection = [
     title: "sidebar.benchmarks",
     children: [
       {
-        href: "/benchmarks/tasks",
+        href: "/benchmarks/tasks/search",
         title: "sidebar.task_suites",
         badge: "100",
       },
       {
-        href: "/benchmarks/runs",
+        href: "/benchmarks/runs/search",
         title: "sidebar.run_studies",
         badge: "100",
       },
@@ -56,17 +56,17 @@ const openmlSection = [
     title: "sidebar.measures",
     children: [
       {
-        href: "/measures/data",
+        href: "/measures/data/search",
         title: "sidebar.data_qualities",
         badge: "100",
       },
       {
-        href: "/measures/evaluation",
+        href: "/measures/evaluation/search",
         title: "sidebar.model_evaluations",
         badge: "100",
       },
       {
-        href: "/measures/procedures",
+        href: "/measures/procedures/search",
         title: "sidebar.test_procedures",
         badge: "100",
       },

diff --git a/app/src/pages/collections/runs.js b/app/src/pages/collections/runs.js
@@ -1,10 +1,7 @@
 import React from "react";
 import { Helmet } from "react-helmet-async";
-
 import { Typography } from "@mui/material";
-
 import DashboardLayout from "../../layouts/Dashboard";
-import TableView from "../../components/TableView";
 
 // Server-side translation
 import { useTranslation } from "next-i18next";
@@ -18,21 +15,19 @@ export async function getStaticProps({ locale }) {
   };
 }
 
-function DatasetList() {
+function RunCollectionList() {
   return (
     <React.Fragment>
-      <Helmet title="OpenML Datasets" />
+      <Helmet title="OpenML Collections" />
       <Typography variant="h3" gutterBottom>
         Run collections
       </Typography>
-
-      <TableView />
     </React.Fragment>
   );
 }
 
-DatasetList.getLayout = function getLayout(page) {
+RunCollectionList.getLayout = function getLayout(page) {
   return <DashboardLayout>{page}</DashboardLayout>;
 };
 
-export default DatasetList;
+export default RunCollectionList;
diff --git a/app/src/pages/collections/tasks.js b/app/src/pages/collections/tasks.js
@@ -1,10 +1,7 @@
 import React from "react";
 import { Helmet } from "react-helmet-async";
-
 import { Typography } from "@mui/material";
-
 import DashboardLayout from "../../layouts/Dashboard";
-import TableView from "../../components/TableView";
 
 // Server-side translation
 import { useTranslation } from "next-i18next";
@@ -18,21 +15,19 @@ export async function getStaticProps({ locale }) {
   };
 }
 
-function DatasetList() {
+function TaskCollectionList() {
   return (
     <React.Fragment>
-      <Helmet title="OpenML Datasets" />
+      <Helmet title="OpenML Collections" />
       <Typography variant="h3" gutterBottom>
         Task collections
       </Typography>
-
-      <TableView />
     </React.Fragment>
   );
 }
 
-DatasetList.getLayout = function getLayout(page) {
+TaskCollectionList.getLayout = function getLayout(page) {
   return <DashboardLayout>{page}</DashboardLayout>;
 };
 
-export default DatasetList;
+export default TaskCollectionList;
diff --git a/app/src/pages/d/index.js b/app/src/pages/d/index.js
@@ -16,7 +16,7 @@ export async function getStaticProps({ locale }) {
   };
 }
 
-function Dataset() {
+function DatasetList() {
   return (
     <React.Fragment>
       <Helmet title="OpenML Datasets" />
@@ -27,8 +27,8 @@ function Dataset() {
   );
 }
 
-Dataset.getLayout = function getLayout(page) {
+DatasetList.getLayout = function getLayout(page) {
   return <DashboardLayout>{page}</DashboardLayout>;
 };
 
-export default Dataset;
+export default DatasetList;