added support for tasks and task filters in search

app/public/locales/en/common.yml

@@ -631,9 +631,16 @@ filters:
     1000s: "1000s"
     10000s: "10000s"
     100000s: "100000s"
-    Millions: "Millions"    
+    Millions: "Millions"
     Public: "Public Domain Mark"
     public: "Public Domain Mark"
     public domain: "Public Domain Mark"
     CC0: "CC0"
+    tasktype: "Task type"
+    Clustering: "Clustering"
+    Supervised_Regression: "Supervised Regression"
+    Supervised_Classification: "Supervised Classification"
+    Learning_curve: "Learning curve"
+    Subgroup_Discovery: "Subgroup Discovery"
+
 

app/src/components/search/Filter.js

@@ -1,14 +1,9 @@
 import React from "react";
-import { useTheme } from "@mui/material/styles";
 
 import styled from "@emotion/styled";
-import { Link as MuiLink, Chip as MuiChip } from "@mui/material";
+import { Chip as MuiChip } from "@mui/material";
 
-import TimeAgo from "react-timeago";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { blue, orange, red, green, grey, purple } from "@mui/material/colors";
-import { SubscriptionsOutlined } from "@mui/icons-material";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 
 const FilterChip = styled(MuiChip)`
   margin-left: 10px;
@@ -19,10 +14,6 @@ const FilterPanel = styled.div`
   border-right: 1px solid rgba(0, 0, 0, 0.12);
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 `;
-const FilterIcon = styled(FontAwesomeIcon)`
-  cursor: "pointer";
-  padding-left: 5px;
-`;
 
 const Filter = ({ label, options, values, onRemove, onSelect }) => {
   return (

app/src/components/search/ResultCard.js

@@ -10,11 +10,18 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { grey } from "@mui/material/colors";
 import * as colors from "@mui/material/colors";
 
-import { Title as DataTitle, stats as dataStats } from "../../pages/d/dataCard";
-import { Title as TaskTitle, stats as taskStats } from "../../pages/t/taskCard";
+import {
+  Title as DataTitle,
+  Description as DataDescription,
+  stats as dataStats,
+} from "../../pages/d/dataCard";
+import {
+  Title as TaskTitle,
+  Description as TaskDescription,
+  stats as taskStats,
+} from "../../pages/t/taskCard";
 
 import { faHashtag, faHistory } from "@fortawesome/free-solid-svg-icons";
-import Teaser from "./Teaser";
 
 const SearchResultCard = styled(Card)`
   border-radius: 0px;
@@ -102,6 +109,12 @@ const titles = {
   // Add other mappings as needed
 };
 
+const descriptions = {
+  data: DataDescription,
+  task: TaskDescription,
+  // Add other mappings as needed
+};
+
 const statistics = {
   data: dataStats,
   task: taskStats,
@@ -116,7 +129,9 @@ const ResultCard = ({ result }) => {
   const color = theme.palette.entity[type];
   const icon = theme.palette.icon[type];
 
+  // Select the result card contents depending on the entity type
   const Title = titles[type];
+  const Description = descriptions[type];
   const stats = getStats(statistics[type], result);
 
   // TODO: get from state
@@ -135,9 +150,7 @@ const ResultCard = ({ result }) => {
         <ColoredIcon color={color} icon={icon} fixedWidth />
         <Title result={result} />
       </TitleWrapper>
-      {type !== "task" && result.description.raw && (
-        <Teaser description={result.description.raw.toString()} limit={3} />
-      )}
+      <Description result={result} />
       {stats !== undefined && (
         <React.Fragment>
           {stats.map((stat, index) => (

app/src/components/search/SearchContainer.js

@@ -203,7 +203,7 @@ const Filter = ({ label, options, values, onRemove, onSelect }) => {
           label={
             (label in facet_aliases && option.value in facet_aliases[label]
               ? facet_aliases[label][option.value]
-              : i18n.t(`filters.${option.value}`)) +
+              : i18n.t(`filters.${option.value.replace(/ /g, "_")}`)) +
             "  (" +
             option.count +
             ")"

app/src/components/search/Teaser.js

@@ -12,6 +12,14 @@ const Markdown = styled(ReactMarkdown)`
   white-space: normal; // Override the default 'nowrap'
   word-break: break-word; // To prevent overflow
   max-height: none;
+
+  code {
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 2px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: "Roboto Mono", monospace;
+  }
 `;
 
 const Teaser = ({ description, limit }) => {

app/src/pages/api/autocomplete.js

@@ -17,7 +17,7 @@ export default async function handler(req, res) {
   console.log("OnAutoComplete", indexName, requestState, queryConfig);
   const response = await connectorsCache[indexName].onAutocomplete(
     requestState,
-    queryConfig
+    queryConfig,
   );
   console.log(response);
   res.json(response);

app/src/pages/api/search.js

@@ -19,6 +19,6 @@ export default async function handler(req, res) {
     requestState,
     queryConfig,
   );
-  //console.log(response);
+  console.log(response);
   res.json(response);
 }

app/src/pages/d/dataCard.js

@@ -14,6 +14,7 @@ import {
   faTimes,
   faWrench,
 } from "@fortawesome/free-solid-svg-icons";
+import Teaser from "../../components/search/Teaser";
 
 const ColoredIcon = styled(FontAwesomeIcon)`
   color: ${(props) => props.color};
@@ -108,3 +109,7 @@ export const stats = [
     icon: faNotdef,
   },
 ];
+
+export const Description = ({ result }) => {
+  return <Teaser description={result.description.raw.toString()} limit={3} />;
+};

app/src/pages/t/search.js

@@ -25,6 +25,18 @@ const sort_options = [
     name: "search.relevance",
     value: [],
   },
+  {
+    name: "search.most_runs",
+    value: [{ field: "runs", direction: "desc" }],
+  },
+  {
+    name: "search.most_likes",
+    value: [{ field: "nr_of_likes", direction: "desc" }],
+  },
+  {
+    name: "search.most_downloads",
+    value: [{ field: "nr_of_downloads", direction: "desc" }],
+  },
   {
     name: "search.most_recent",
     value: [{ field: "date", direction: "desc" }],
@@ -33,8 +45,8 @@ const sort_options = [
 
 const search_facets = [
   {
-    label: "filters.status",
-    field: "status.keyword",
+    label: "filters.tasktype",
+    field: "tasktype.name.keyword",
   },
 ];
 

app/src/pages/t/searchConfig.js

@@ -15,9 +15,15 @@ const searchConfig = {
       date: { raw: {} },
       tasktype: { raw: {} },
       source_data: { raw: {} },
+      target_feature: { raw: {} },
+      target_values: { raw: {} },
+      estimation_procedure: { raw: {} },
+      evaluation_measures: { raw: {} },
+    },
+    disjunctiveFacets: ["tasktype"],
+    facets: {
+      "tasktype.name.keyword": { type: "value" },
     },
-    disjunctiveFacets: [],
-    facets: {},
     group: {
       //This doesn't work yet. TODO: figure out how to group.
       field: { name: { raw: {} } },

app/src/pages/t/taskCard.js

@@ -6,9 +6,9 @@ import {
   faFlask,
   faHeart,
 } from "@fortawesome/free-solid-svg-icons";
+import Teaser from "../../components/search/Teaser";
 
 export const Title = ({ result }) => {
-  console.log(result);
   return (
     <React.Fragment>
       <Box sx={{ pl: 2 }}>
@@ -33,3 +33,20 @@ export const stats = [
     icon: faCloudDownloadAlt,
   },
 ];
+
+export const Description = ({ result }) => {
+  let description = "";
+  if (result.target_feature) {
+    description += `Predict feature \`${result.target_feature.raw}\`. `;
+  }
+  if (result.target_values) {
+    description += `Possible values are \`${result.target_values.raw}\`. `;
+  }
+  if (result.estimation_procedure) {
+    description += `Evaluate models using \`${result.estimation_procedure.raw.name}\`. `;
+  }
+  if (result.evaluation_measures) {
+    description += `The evaluation measure is \`${result.evaluation_measures.raw}\`. `;
+  }
+  return <Teaser description={description} limit={3} />;
+};