Added support for flows, cleaned up the processing of facet filters, …

…some layout improvements
openml · Jan 5, 2024 · 529361f · 529361f
1 parent e380cfd
commit 529361f
Show file tree

Hide file tree

Showing 13 changed files with 421 additions and 75 deletions.
diff --git a/app/public/locales/en/common.yml b/app/public/locales/en/common.yml
@@ -676,7 +676,12 @@ filters:
     root_relative_squared_error: "Root relative squared error"
     c_index: "C-index"
     f_measure: "F-measure"
-
+    dependencies: "Libraries"
+    sklearn: "sklearn {{version}}"
+    torch: "Torch {{version}}"
+    Weka: "Weka {{version}}"
+    mlr: "MLR {{version}}"
+    Moa: "Moa {{version}}"
 
 
 

diff --git a/app/src/components/navbar/NavbarSearch.js b/app/src/components/navbar/NavbarSearch.js
@@ -18,6 +18,7 @@ import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { Box, InputBase, MenuItem, Select } from "@mui/material";
 
 import { SearchProvider, SearchBox } from "@elastic/react-search-ui";
+import { useTheme } from "@mui/system";
 
 const SearchWrapper = styled(Box)`
   border-radius: 2px;
@@ -150,7 +151,8 @@ const SearchBar = memo(() => {
           PaperProps: {
             sx: {
               boxShadow: 2,
-              border: "1px solid #d3d4d5",
+              border: `1px solid rgba(0, 0, 0, 0.12);
+              `,
             },
           },
         }}

diff --git a/app/src/components/search/CoreFilter.js b/app/src/components/search/CoreFilter.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { withSearch } from "@elastic/react-search-ui";
 
 const CoreFilter = ({ addFilter, removeFilter, setSort }) => {

diff --git a/app/src/components/search/Filter.js b/app/src/components/search/Filter.js
@@ -1,24 +1,63 @@
-import React from "react";
-
+import { Chip } from "@mui/material";
 import styled from "@emotion/styled";
-import { Chip as MuiChip } from "@mui/material";
+import { i18n } from "next-i18next";
+import React from "react";
 
-const FilterChip = styled(MuiChip)`
-  margin-left: 10px;
+const FilterChip = styled(Chip)`
+  margin-right: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
-`;
-const FilterPanel = styled.div`
-  border-right: 1px solid rgba(0, 0, 0, 0.12);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 50px;
 `;
 
+// Handles special cases in the filter options
+const processOption = (option) => {
+  // Homogenize notation for library reporting and versioning
+  const libraries = [
+    "sklearn",
+    "torch",
+    "Weka",
+    "tensorflow",
+    "keras",
+    "mlr",
+    "Moa",
+  ];
+  if (libraries.some((library) => option.includes(library))) {
+    const segments = option.split(/,|\n/);
+    let lib = segments.find((segment) =>
+      libraries.some((library) => segment.includes(library)),
+    );
+    if (lib.startsWith(" ")) {
+      lib = lib.replace(" ", "");
+    }
+    if (
+      lib.startsWith("Weka_") ||
+      lib.startsWith("R_") ||
+      lib.startsWith("Moa_") ||
+      lib.startsWith("mlr_")
+    ) {
+      lib = lib.replace("_", "==");
+    }
+    // If the option has versioning, return it separately
+    const values = lib.split("==");
+    if (values.length > 1) {
+      return [`filters.${values[0]}`, { version: values[1] }];
+    } else {
+      return [`filters.${lib}`];
+    }
+  } else {
+    return [`filters.${option}`];
+  }
+};
+
 const Filter = ({ label, options, values, onRemove, onSelect }) => {
   return (
-    <FilterPanel>
+    <React.Fragment>
       {options.map((option) => (
         <FilterChip
-          label={option.value + "  (" + option.count + ")"}
+          label={
+            i18n.t(...processOption(option.value)) + "  (" + option.count + ")"
+          }
           key={option.value}
           clickable
           onClick={() =>
@@ -28,7 +67,7 @@ const Filter = ({ label, options, values, onRemove, onSelect }) => {
           variant={option.selected ? "default" : "outlined"}
         />
       ))}
-    </FilterPanel>
+    </React.Fragment>
   );
 };
 

diff --git a/app/src/components/search/ResultCard.js b/app/src/components/search/ResultCard.js
@@ -20,6 +20,11 @@ import {
   Description as TaskDescription,
   stats as taskStats,
 } from "../../pages/t/taskCard";
+import {
+  Title as FlowTitle,
+  Description as FlowDescription,
+  stats as flowStats,
+} from "../../pages/f/flowCard";
 
 import { faHashtag, faHistory } from "@fortawesome/free-solid-svg-icons";
 
@@ -106,18 +111,21 @@ const abbreviateNumber = (value) => {
 const titles = {
   data: DataTitle,
   task: TaskTitle,
+  flow: FlowTitle,
   // Add other mappings as needed
 };
 
 const descriptions = {
   data: DataDescription,
   task: TaskDescription,
+  flow: FlowDescription,
   // Add other mappings as needed
 };
 
 const statistics = {
   data: dataStats,
   task: taskStats,
+  flow: flowStats,
   // Add other mappings as needed
 };
 

diff --git a/app/src/components/search/SearchContainer.js b/app/src/components/search/SearchContainer.js
@@ -10,7 +10,6 @@ import {
   FormControl,
   InputLabel,
   Tab,
-  Chip,
   Tabs,
   Card,
 } from "@mui/material";
@@ -40,6 +39,7 @@ import {
 import Wrapper from "../Wrapper";
 import { i18n } from "next-i18next";
 import ResultsTable from "./ResultTable";
+import Filter from "./Filter";
 import TagFilter from "./TagFilter";
 
 const SearchResults = styled(Results)`
@@ -178,61 +178,9 @@ const PagingView = ({ current, totalPages, onChange }) => (
   />
 );
 
-// Allows overriding the filter option text
-const facet_aliases = {
-  Status: {
-    active: "verified",
-    in_preparation: "in preparation",
-    deactivated: "deprecated",
-  },
-};
-
-const FilterChip = styled(Chip)`
-  margin-right: 10px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  border-radius: 50px;
-`;
-
-const FilterPanel = styled.div``;
-
-const Filter = ({ label, options, values, onRemove, onSelect }) => {
-  return (
-    <FilterPanel>
-      {options.map((option) => (
-        <FilterChip
-          label={
-            (label in facet_aliases && option.value in facet_aliases[label]
-              ? facet_aliases[label][option.value]
-              : i18n.t(`filters.${option.value}`)) +
-            "  (" +
-            option.count +
-            ")"
-          }
-          key={option.value}
-          clickable
-          onClick={() =>
-            option.selected ? onRemove(option.value) : onSelect(option.value)
-          }
-          color={option.selected ? "primary" : "default"}
-          variant={option.selected ? "default" : "outlined"}
-        />
-      ))}
-    </FilterPanel>
-  );
-};
-
 // This is the Search UI component. The config contains the search state and actions.
 const SearchContainer = memo(
-  ({
-    config,
-    sort_options,
-    search_facets,
-    columns,
-    facet_aliases,
-    title,
-    type,
-  }) => {
+  ({ config, sort_options, search_facets, columns }) => {
     const [filter, setFilter] = React.useState("hide");
     const handleFilterChange = (event, newFilter) => {
       console.log(filter, newFilter);
@@ -287,6 +235,7 @@ const SearchContainer = memo(
                   view={Filter}
                   value={filter}
                   index={index}
+                  show={25}
                 />
               </FilterTabPanel>
             ))}

diff --git a/app/src/pages/d/search.js b/app/src/pages/d/search.js
@@ -13,7 +13,6 @@ import {
   renderChips,
 } from "../../components/search/ResultTable";
 
-import Chip from "@mui/material/Chip";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCheck,
@@ -260,8 +259,6 @@ function DataSearchContainer() {
       sort_options={sort_options}
       search_facets={search_facets}
       columns={columns}
-      title="Datasets"
-      type="Dataset"
     />
   );
 }

diff --git a/app/src/pages/d/searchConfig.js b/app/src/pages/d/searchConfig.js
@@ -70,7 +70,7 @@ const searchConfig = {
     facets: {
       "status.keyword": { type: "value" },
       "name.keyword": { type: "value" },
-      "licence.keyword": { type: "value" },
+      "licence.keyword": { type: "value", size: 10 },
       "qualities.NumberOfInstances": {
         type: "range",
         ranges: [

diff --git a/app/src/pages/f/flowCard.js b/app/src/pages/f/flowCard.js
@@ -0,0 +1,67 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { blue, green, orange, purple, red } from "@mui/material/colors";
+import {
+  faCheck,
+  faCloudDownloadAlt,
+  faFlask,
+  faHeart,
+  faTimes,
+  faWrench,
+} from "@fortawesome/free-solid-svg-icons";
+import Teaser from "../../components/search/Teaser";
+
+const status = {
+  active: {
+    title: "verified",
+    icon: faCheck,
+    color: green[500],
+  },
+  deactivated: {
+    title: "deactivated",
+    icon: faTimes,
+    color: red[500],
+  },
+  in_preparation: {
+    title: "unverified",
+    icon: faWrench,
+    color: orange[500],
+  },
+};
+
+export const Title = ({ result }) => {
+  return (
+    <React.Fragment>
+      <Box sx={{ pl: 2 }}>{result.name.raw}</Box>
+    </React.Fragment>
+  );
+};
+
+export const stats = [
+  { param: "runs.raw", unit: "runs", color: red[500], icon: faFlask },
+  {
+    param: "nr_of_likes.raw",
+    unit: "likes",
+    color: purple[500],
+    icon: faHeart,
+  },
+  {
+    param: "nr_of_downloads.raw",
+    unit: "downloads",
+    color: blue[500],
+    icon: faCloudDownloadAlt,
+  },
+];
+
+export const Description = ({ result }) => {
+  return (
+    <Teaser
+      description={
+        result.description.raw
+          ? result.description.raw.toString()
+          : "Description missing"
+      }
+      limit={3}
+    />
+  );
+};