diff --git a/app/public/locales/en/common.yml b/app/public/locales/en/common.yml index f4dfb202..c9acdadc 100644 --- a/app/public/locales/en/common.yml +++ b/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" + diff --git a/app/src/components/search/Filter.js b/app/src/components/search/Filter.js index 12913004..4c081895 100644 --- a/app/src/components/search/Filter.js +++ b/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 ( diff --git a/app/src/components/search/ResultCard.js b/app/src/components/search/ResultCard.js index 0af6f0d3..ed7fe2c9 100644 --- a/app/src/components/search/ResultCard.js +++ b/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 }) => { </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) => ( diff --git a/app/src/components/search/SearchContainer.js b/app/src/components/search/SearchContainer.js index 61b6ac6e..6202210a 100644 --- a/app/src/components/search/SearchContainer.js +++ b/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 + ")" diff --git a/app/src/components/search/Teaser.js b/app/src/components/search/Teaser.js index 20785c2b..5685a069 100644 --- a/app/src/components/search/Teaser.js +++ b/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 }) => { diff --git a/app/src/pages/api/autocomplete.js b/app/src/pages/api/autocomplete.js index b8c91ffb..8e378c33 100644 --- a/app/src/pages/api/autocomplete.js +++ b/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); diff --git a/app/src/pages/api/search.js b/app/src/pages/api/search.js index 2f2512cc..82b1f484 100644 --- a/app/src/pages/api/search.js +++ b/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); } diff --git a/app/src/pages/d/dataCard.js b/app/src/pages/d/dataCard.js index 576d6de9..5986cf9b 100644 --- a/app/src/pages/d/dataCard.js +++ b/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} />; +}; diff --git a/app/src/pages/t/search.js b/app/src/pages/t/search.js index 765f7fb7..1b1166cd 100644 --- a/app/src/pages/t/search.js +++ b/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", }, ]; diff --git a/app/src/pages/t/searchConfig.js b/app/src/pages/t/searchConfig.js index c2ed83ae..a78322b4 100644 --- a/app/src/pages/t/searchConfig.js +++ b/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: {} } }, diff --git a/app/src/pages/t/taskCard.js b/app/src/pages/t/taskCard.js index 9bc0f307..d39e6d03 100644 --- a/app/src/pages/t/taskCard.js +++ b/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} />; +};