dashAI/DashAI/front/src/components/experiments/metrics/MetricCard.jsx at c4e0f97d101f5f597358bbfc28f6434e50b2a201 · DashAISoftware/dashAI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { Card, CardActionArea, Box, Typography, Chip } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import CheckIcon from "@mui/icons-material/Check";
import TrendingUpIcon from "@mui/icons-material/TrendingUp";
import TrendingDownIcon from "@mui/icons-material/TrendingDown";

export default function MetricCard({
  metric,
  isSelected,
  onToggle,
  splitType,
  disabled = false,
}) {
  const theme = useTheme();

  const splitColors = {
    train: {
      border: theme.palette.chart.train,
      bg: `${theme.palette.chart.train}14`, // ~8% opacity
    },
    test: {
      border: theme.palette.chart.test,
      bg: `${theme.palette.chart.test}14`,
    },
    validation: {
      border: theme.palette.chart.validation,
      bg: `${theme.palette.chart.validation}14`,
    },
  };

  const colors = splitColors[splitType];

  return (
    <Card
      variant="outlined"
      sx={{
        borderWidth: 2,
        borderColor: isSelected ? colors.border : "divider",
        backgroundColor: isSelected ? colors.bg : "background.paper",
        opacity: disabled ? 0.6 : 1,
        transition: "all 0.2s",
        "&:hover": disabled
          ? {}
          : {
              transform: "scale(1.02)",
            },
      }}
    >
      <CardActionArea
        onClick={disabled ? undefined : onToggle}
        disabled={disabled}
        sx={{ p: 2 }}
      >
        {/* Selection indicator */}
        <Box
          sx={{
            position: "absolute",
            top: 12,
            right: 12,
            width: 20,
            height: 20,
            borderRadius: "50%",
            border: "2px solid",
            borderColor: isSelected ? colors.border : "divider",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          {isSelected && <CheckIcon fontSize="small" />}
        </Box>

        <Box sx={{ pr: 3 }}>
          <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
            <Typography
              variant="h6"
              sx={{ fontFamily: "monospace", fontWeight: 600 }}
            >
              {metric.name}
            </Typography>

            <Chip
              icon={
                metric.metadata.maximize ? (
                  <TrendingUpIcon />
                ) : (
                  <TrendingDownIcon />
                )
              }
              label={metric.metadata.maximize ? "maximize" : "minimize"}
              size="small"
              variant="outlined"
            />
          </Box>

          <Typography variant="body2" color="text.secondary">
            {metric.description || "No description available"}
          </Typography>
        </Box>
      </CardActionArea>
    </Card>
  );
}