Skip to content

Commit

Permalink
generalized result cards and better layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@joaquinvanschoren
joaquinvanschoren committed Dec 30, 2023
1 parent fde5d49 commit 9648d39
Showing 1 changed file with 93 additions and 82 deletions.
175 changes: 93 additions & 82 deletions app/src/components/search/ResultCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,23 @@ import { useTheme } from "@mui/material/styles";
import { useRouter } from "next/router";

import styled from "@emotion/styled";
import { Card, Tooltip, CardHeader, Avatar } from "@mui/material";
import { Card, Tooltip, CardHeader, Avatar, Box } 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 * as colors from "@mui/material/colors";

import {
faBars,
faCheck,
faCloudDownloadAlt,
faFlask,
faHashtag,
faHeart,
faHistory,
faTable,
faNotdef,
faTags,
faTimes,
faWrench,
} from "@fortawesome/free-solid-svg-icons";
Expand All @@ -28,7 +30,7 @@ const SearchResultCard = styled(Card)`
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
padding-bottom: 20px;
padding-bottom: 10px;
cursor: pointer;
box-shadow: none;
${(props) => props.fullwidth && `width: 100%;`}
Expand All @@ -41,10 +43,6 @@ const SlimCardHeader = styled(CardHeader)({
paddingTop: 0,
});

const ColoredIcon = styled(FontAwesomeIcon)`
cursor: 'pointer',
color: ${(props) => props.color},
`;
const Stats = styled.div`
padding-right: 8px;
display: inline-block;
Expand All @@ -66,44 +64,53 @@ const SubStats = styled.div`
font-size: 12px;
color: ${(props) => props.color};
`;
const ID = styled.div`
font-size: 12px;
font-weight: 400;
color: ${(props) => props.color};
`;
const RightStats = styled.div`
float: right;
font-size: 12px;
`;
const ColoredIcon = styled(FontAwesomeIcon)`
color: ${(props) => props.color};
align-self: center;
`;
const VersionStats = styled.div`
float: right;
font-size: 12px;
padding-right: 8px;
font-weight: 400;
padding-left: 8px;
padding-right: 2px;
color: ${grey[400]};
`;
const Title = styled.div`
padding-bottom: 5px;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: baseline;
`;

const getStats = (stats, result) => {
if (stats === undefined) {
return undefined;
} else {
return stats.map((stat) => ({
value: result[stat.param] ? result[stat.param].raw : 0,
unit: stat.unit,
color: stat.color,
icon: stat.icon,
}));
}
// Helper function to get nested properties like 'qualities.raw.NumberOfClasses'
const getNestedProperty = (obj, path) => {
return path.split(".").reduce((currentObject, key) => {
return currentObject?.[key];
}, obj);
};

const getStats2 = (stats, result) => {
if (result.qualities) {
result = result.qualities.raw;
}
const getStats = (stats, result) => {
console.log("result", result);
console.log("result", stats[5].param);
console.log("result", result[stats[5].param]);
if (stats === undefined) {
return undefined;
} else {
return stats.map((stat) => ({
value: result[stat.param],
value: getNestedProperty(result, stat.param),
unit: stat.unit,
color: stat.color,
rotation: stat.rotation ? stat.rotation : 0,
icon: stat.icon,
}));
}
Expand All @@ -127,27 +134,46 @@ const dataStatus = {
},
};

// TODO: move to data config?
const data_stats = [
{ param: "runs", unit: "runs", color: red[500], icon: faFlask },
{ param: "runs.raw", unit: "runs", color: red[500], icon: faFlask },
{
param: "nr_of_likes",
param: "nr_of_likes.raw",
unit: "likes",
color: purple[500],
icon: faHeart,
},
{
param: "nr_of_downloads",
param: "nr_of_downloads.raw",
unit: "downloads",
color: blue[500],
icon: faCloudDownloadAlt,
},
];

const data_stats2 = [
{ param: "NumberOfInstances", unit: "instances" },
{ param: "NumberOfFeatures", unit: "fields" },
{ param: "NumberOfClasses", unit: "classes" },
{ param: "NumberOfMissingValues", unit: "missing" },
{
param: "qualities.raw.NumberOfInstances",
unit: "instances (rows)",
color: grey[500],
icon: faBars,
},
{
param: "qualities.raw.NumberOfFeatures",
unit: "features (columns)",
color: grey[500],
icon: faBars,
rotation: 90,
},
{
param: "qualities.raw.NumberOfClasses",
unit: "classes",
color: grey[500],
icon: faTags,
},
{
param: "qualities.raw.NumberOfMissingValues",
unit: "missing values",
color: grey[500],
icon: faNotdef,
},
];

const colorNames = Object.keys(colors).filter(
Expand Down Expand Up @@ -184,9 +210,7 @@ const ResultCard = ({ result }) => {
const type = result._meta.rawHit._type;
const color = theme.palette.entity[type];
const icon = theme.palette.icon[type];

const stats = getStats(data_stats, result);
const stats2 = getStats2(data_stats2, result);

// TODO: get from state
const selected = false;
Expand Down Expand Up @@ -221,8 +245,24 @@ const ResultCard = ({ result }) => {
{type !== "user" && type !== "task" && (
<Title>
<ColoredIcon color={color} icon={icon} fixedWidth />
{"\u00A0\u00A0"}
{result.name.raw}
<Box sx={{ pl: 2 }}>{result.name.raw}</Box>
{result.version !== undefined && (
<VersionStats>v.{result.version.raw}</VersionStats>
)}
{dataStatus[result.status.raw] !== undefined && (
<Tooltip
title={dataStatus[result.status.raw]["title"]}
placement="top-start"
>
<Stats>
<ColoredIcon
color={dataStatus[result.status.raw]["color"]}
icon={dataStatus[result.status.raw].icon}
fixedWidth
/>
</Stats>
</Tooltip>
)}
</Title>
)}
{type !== "user" && type !== "task" && result.description.raw && (
Expand All @@ -233,61 +273,32 @@ const ResultCard = ({ result }) => {
{stats.map((stat, index) => (
<Tooltip key={index} title={stat.unit} placement="top-start">
<Stats>
<ColoredIcon color={stat.color} icon={stat.icon} fixedWidth />
<ColoredIcon
color={stat.color}
icon={stat.icon}
rotation={stat.rotation}
fixedWidth
/>
{" " + abbreviateNumber(stat.value ? stat.value : 0)}
</Stats>
</Tooltip>
))}
</React.Fragment>
)}
{stats2 !== undefined && type === "data" && (
<Tooltip
title="dimensions (rows x columns)"
placement="top-start"
style={{
display: !stats2[0].value ? "none" : "inline-block",
}}
>
<Stats>
<ColoredIcon color={grey[400]} icon={faTable} fixedWidth />{" "}
{abbreviateNumber(stats2[0].value)} x{" "}
{abbreviateNumber(stats2[1].value)}
</Stats>
</Tooltip>
)}
<Tooltip title={type + " ID"} placement="top-start">
<Stats>
<ColoredIcon color={grey[400]} icon={faHashtag} fixedWidth />{" "}
{result.id.raw}
</Stats>
</Tooltip>
{stats2 !== undefined && type === "run" && scores}

{type !== "user" && (
<ColorStats color={grey[400]}>
<ColoredIcon icon={faHistory} fixedWidth />
<TimeAgo date={new Date(result.date.raw)} minPeriod={60} />
</ColorStats>
)}
<SubStats color={grey[400]}>
{dataStatus[result.status] !== undefined && (
<Tooltip
title={dataStatus[result.status.raw]["title"]}
placement="top-start"
>
<RightStats>
<ColoredIcon
color={dataStatus[result.status.raw]["color"]}
icon={dataStatus[result.status.raw]["icon"]}
fixedWidth
/>
</RightStats>
</Tooltip>
)}
{result.version !== undefined && (
<VersionStats>v.{result.version.raw}</VersionStats>
)}
</SubStats>
<ID color={grey[400]}>
<Tooltip title={type + " ID"} placement="top-start">
<RightStats>
<ColoredIcon color={grey[400]} icon={faHashtag} fixedWidth />{" "}
{result.id.raw}
</RightStats>
</Tooltip>
</ID>
</SearchResultCard>
);
};
Expand Down

0 comments on commit 9648d39

Please sign in to comment.