|
|
import React, { useState } from "react"; |
|
|
import { |
|
|
Box, |
|
|
Typography, |
|
|
Link, |
|
|
Tooltip, |
|
|
IconButton, |
|
|
Badge, |
|
|
Chip, |
|
|
Menu, |
|
|
MenuItem, |
|
|
} from "@mui/material"; |
|
|
import { getModelTypeIcon } from "../constants/modelTypes"; |
|
|
import TrendingUpIcon from "@mui/icons-material/TrendingUp"; |
|
|
import TrendingDownIcon from "@mui/icons-material/TrendingDown"; |
|
|
import RemoveIcon from "@mui/icons-material/Remove"; |
|
|
import PushPinIcon from "@mui/icons-material/PushPin"; |
|
|
import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined"; |
|
|
import { TABLE_DEFAULTS, HIGHLIGHT_COLORS } from "../constants/defaults"; |
|
|
import { looksLikeRegex, extractTextSearch } from "./searchUtils"; |
|
|
import { commonStyles } from "../styles/common"; |
|
|
import { typeColumnSort } from "../components/Table/hooks/useSorting"; |
|
|
import { |
|
|
COLUMN_TOOLTIPS, |
|
|
getTooltipStyle, |
|
|
TABLE_TOOLTIPS, |
|
|
} from "../constants/tooltips"; |
|
|
import OpenInNewIcon from "@mui/icons-material/OpenInNew"; |
|
|
import { alpha } from "@mui/material/styles"; |
|
|
import InfoIconWithTooltip from "../../../../../components/shared/InfoIconWithTooltip"; |
|
|
import { useSubscoreStore } from "../hooks/useSubscoreStore"; |
|
|
|
|
|
const DatabaseIcon = () => ( |
|
|
<svg |
|
|
className="mr-1.5 text-gray-400 group-hover:text-red-500" |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
aria-hidden="true" |
|
|
focusable="false" |
|
|
role="img" |
|
|
width="1.4em" |
|
|
height="1.4em" |
|
|
preserveAspectRatio="xMidYMid meet" |
|
|
viewBox="0 0 25 25" |
|
|
> |
|
|
<ellipse |
|
|
cx="12.5" |
|
|
cy="5" |
|
|
fill="currentColor" |
|
|
fillOpacity="0.25" |
|
|
rx="7.5" |
|
|
ry="2" |
|
|
></ellipse> |
|
|
<path |
|
|
d="M12.5 15C16.6421 15 20 14.1046 20 13V20C20 21.1046 16.6421 22 12.5 22C8.35786 22 5 21.1046 5 20V13C5 14.1046 8.35786 15 12.5 15Z" |
|
|
fill="currentColor" |
|
|
opacity="0.5" |
|
|
></path> |
|
|
<path |
|
|
d="M12.5 7C16.6421 7 20 6.10457 20 5V11.5C20 12.6046 16.6421 13.5 12.5 13.5C8.35786 13.5 5 12.6046 5 11.5V5C5 6.10457 8.35786 7 12.5 7Z" |
|
|
fill="currentColor" |
|
|
opacity="0.5" |
|
|
></path> |
|
|
<path |
|
|
d="M5.23628 12C5.08204 12.1598 5 12.8273 5 13C5 14.1046 8.35786 15 12.5 15C16.6421 15 20 14.1046 20 13C20 12.8273 19.918 12.1598 19.7637 12C18.9311 12.8626 15.9947 13.5 12.5 13.5C9.0053 13.5 6.06886 12.8626 5.23628 12Z" |
|
|
fill="currentColor" |
|
|
></path> |
|
|
</svg> |
|
|
); |
|
|
|
|
|
const HighlightedText = ({ text, searchValue }) => { |
|
|
if (!searchValue) return text; |
|
|
|
|
|
const searches = searchValue |
|
|
.split(";") |
|
|
.map((s) => s.trim()) |
|
|
.filter(Boolean); |
|
|
let result = text; |
|
|
let fragments = [{ text: result, isMatch: false }]; |
|
|
|
|
|
searches.forEach((search, searchIndex) => { |
|
|
if (!search) return; |
|
|
|
|
|
try { |
|
|
let regex; |
|
|
if (looksLikeRegex(search)) { |
|
|
regex = new RegExp(search, "gi"); |
|
|
} else { |
|
|
regex = new RegExp( |
|
|
search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), |
|
|
"gi" |
|
|
); |
|
|
} |
|
|
|
|
|
const newFragments = []; |
|
|
fragments.forEach((fragment) => { |
|
|
if (fragment.isMatch) { |
|
|
newFragments.push(fragment); |
|
|
return; |
|
|
} |
|
|
|
|
|
const parts = fragment.text.split(regex); |
|
|
const matches = fragment.text.match(regex); |
|
|
|
|
|
if (!matches) { |
|
|
newFragments.push(fragment); |
|
|
return; |
|
|
} |
|
|
|
|
|
parts.forEach((part, i) => { |
|
|
if (part) newFragments.push({ text: part, isMatch: false }); |
|
|
if (i < parts.length - 1) { |
|
|
newFragments.push({ |
|
|
text: matches[i], |
|
|
isMatch: true, |
|
|
colorIndex: searchIndex % HIGHLIGHT_COLORS.length, |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
fragments = newFragments; |
|
|
} catch (e) { |
|
|
console.warn("Invalid regex:", search); |
|
|
} |
|
|
}); |
|
|
|
|
|
return ( |
|
|
<> |
|
|
{fragments.map((fragment, i) => |
|
|
fragment.isMatch ? ( |
|
|
<Box |
|
|
key={i} |
|
|
component="span" |
|
|
sx={{ |
|
|
backgroundColor: |
|
|
HIGHLIGHT_COLORS[fragment.colorIndex], |
|
|
color: (theme) => |
|
|
theme.palette.getContrastText( |
|
|
HIGHLIGHT_COLORS[fragment.colorIndex] |
|
|
), |
|
|
fontWeight: 500, |
|
|
px: 0.5, |
|
|
py: "2px", |
|
|
borderRadius: "3px", |
|
|
mx: "1px", |
|
|
overflow: "visible", |
|
|
display: "inline-block", |
|
|
}} |
|
|
> |
|
|
{fragment.text} |
|
|
</Box> |
|
|
) : ( |
|
|
<React.Fragment key={i}>{fragment.text}</React.Fragment> |
|
|
) |
|
|
)} |
|
|
</> |
|
|
); |
|
|
}; |
|
|
|
|
|
const MEDAL_STYLES = { |
|
|
1: { |
|
|
color: "#B58A1B", |
|
|
background: "linear-gradient(135deg, #FFF7E0 0%, #FFD700 100%)", |
|
|
borderColor: "rgba(212, 160, 23, 0.35)", |
|
|
shadowColor: "rgba(212, 160, 23, 0.8)", |
|
|
}, |
|
|
2: { |
|
|
color: "#667380", |
|
|
background: "linear-gradient(135deg, #FFFFFF 0%, #D8E3ED 100%)", |
|
|
borderColor: "rgba(124, 139, 153, 0.35)", |
|
|
shadowColor: "rgba(124, 139, 153, 0.8)", |
|
|
}, |
|
|
3: { |
|
|
color: "#B85C2F", |
|
|
background: "linear-gradient(135deg, #FDF0E9 0%, #FFBC8C 100%)", |
|
|
borderColor: "rgba(204, 108, 61, 0.35)", |
|
|
shadowColor: "rgba(204, 108, 61, 0.8)", |
|
|
}, |
|
|
}; |
|
|
|
|
|
const getMedalStyle = (rank) => { |
|
|
if (rank <= 3) { |
|
|
const medalStyle = MEDAL_STYLES[rank]; |
|
|
return { |
|
|
color: medalStyle.color, |
|
|
fontWeight: 900, |
|
|
fontStretch: "150%", |
|
|
fontFamily: '"Inter", -apple-system, sans-serif', |
|
|
width: "24px", |
|
|
height: "24px", |
|
|
background: medalStyle.background, |
|
|
border: "1px solid", |
|
|
borderColor: medalStyle.borderColor, |
|
|
borderRadius: "50%", |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
justifyContent: "center", |
|
|
fontSize: "0.95rem", |
|
|
lineHeight: 1, |
|
|
padding: 0, |
|
|
boxShadow: `1px 1px 0 ${medalStyle.shadowColor}`, |
|
|
position: "relative", |
|
|
}; |
|
|
} |
|
|
return { |
|
|
color: "inherit", |
|
|
fontWeight: rank <= 10 ? 600 : 400, |
|
|
}; |
|
|
}; |
|
|
|
|
|
const getRankStyle = (rank) => getMedalStyle(rank); |
|
|
|
|
|
const RankIndicator = ({ rank, previousRank, mode }) => { |
|
|
const rankChange = previousRank ? previousRank - rank : 0; |
|
|
|
|
|
const RankChangeIndicator = ({ change }) => { |
|
|
if (!change || mode === "dynamic") return null; |
|
|
|
|
|
const getChangeColor = (change) => { |
|
|
if (change > 0) return "success.main"; |
|
|
if (change < 0) return "error.main"; |
|
|
return "grey.500"; |
|
|
}; |
|
|
|
|
|
const getChangeIcon = (change) => { |
|
|
if (change > 0) return <TrendingUpIcon sx={{ fontSize: "1rem" }} />; |
|
|
if (change < 0) |
|
|
return <TrendingDownIcon sx={{ fontSize: "1rem" }} />; |
|
|
return <RemoveIcon sx={{ fontSize: "1rem" }} />; |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<Tooltip |
|
|
title={`${Math.abs(change)} position${ |
|
|
Math.abs(change) > 1 ? "s" : "" |
|
|
} ${change > 0 ? "up" : "down"}`} |
|
|
arrow |
|
|
placement="right" |
|
|
> |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
color: getChangeColor(change), |
|
|
ml: 0.5, |
|
|
fontSize: "0.75rem", |
|
|
}} |
|
|
> |
|
|
{getChangeIcon(change)} |
|
|
</Box> |
|
|
</Tooltip> |
|
|
); |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
justifyContent: "center", |
|
|
width: "100%", |
|
|
}} |
|
|
> |
|
|
<Typography |
|
|
sx={{ |
|
|
...getRankStyle(rank), |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
lineHeight: 1, |
|
|
position: "relative", |
|
|
}} |
|
|
> |
|
|
{rank <= 3 ? ( |
|
|
<> |
|
|
<Box |
|
|
component="span" |
|
|
sx={{ position: "relative", zIndex: 1 }} |
|
|
> |
|
|
{rank} |
|
|
</Box> |
|
|
<RankChangeIndicator change={rankChange} /> |
|
|
</> |
|
|
) : ( |
|
|
<> |
|
|
<Box |
|
|
component="span" |
|
|
sx={{ position: "relative", zIndex: 1 }} |
|
|
> |
|
|
{rank} |
|
|
</Box> |
|
|
<RankChangeIndicator change={rankChange} /> |
|
|
</> |
|
|
)} |
|
|
</Typography> |
|
|
</Box> |
|
|
); |
|
|
}; |
|
|
|
|
|
const getDetailsUrl = (modelName) => { |
|
|
const formattedName = modelName.replace("/", "__"); |
|
|
return `https://huggingface.co/datasets/TheFinAI/lm-eval-results-private`; |
|
|
}; |
|
|
|
|
|
const HeaderLabel = ({ label, tooltip, className, isSorted }) => ( |
|
|
<Tooltip |
|
|
title={label} |
|
|
arrow |
|
|
placement="top" |
|
|
enterDelay={1000} |
|
|
componentsProps={getTooltipStyle} |
|
|
> |
|
|
<Typography |
|
|
className={className} |
|
|
sx={{ |
|
|
fontWeight: 600, |
|
|
color: isSorted ? "primary.main" : "grey.700", |
|
|
flex: 1, |
|
|
transition: "max-width 0.2s ease", |
|
|
maxWidth: "100%", |
|
|
...(label === "Rank" || label === "Type" |
|
|
? { |
|
|
overflow: "visible", |
|
|
whiteSpace: "normal", |
|
|
textOverflow: "clip", |
|
|
textAlign: "center", |
|
|
} |
|
|
: { |
|
|
overflow: "hidden", |
|
|
textOverflow: "ellipsis", |
|
|
whiteSpace: "nowrap", |
|
|
}), |
|
|
"@media (hover: hover)": { |
|
|
".MuiTableCell-root:hover &": { |
|
|
maxWidth: tooltip ? "calc(100% - 48px)" : "100%", |
|
|
}, |
|
|
}, |
|
|
}} |
|
|
> |
|
|
{label} |
|
|
</Typography> |
|
|
</Tooltip> |
|
|
); |
|
|
|
|
|
const InfoIcon = ({ tooltip }) => ( |
|
|
<Box |
|
|
component="span" |
|
|
sx={{ |
|
|
opacity: 0.5, |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
ml: 0.5, |
|
|
}} |
|
|
> |
|
|
<InfoIconWithTooltip tooltip={tooltip} /> |
|
|
</Box> |
|
|
); |
|
|
|
|
|
const metricsMap = { |
|
|
"evaluations.bc5cdr_chemical.normalized_score": ["Exact F1 entity"], |
|
|
"evaluations.ncbi_disease.normalized_score": ["Exact F1 entity"], |
|
|
"evaluations.chemprot.normalized_score": ["Macro F1", "Weighted F1"], |
|
|
"evaluations.ddi2013.normalized_score": ["Macro F1", "Weighted F1"], |
|
|
"evaluations.hoc.normalized_score": ["Macro F1", "Weighted F1"], |
|
|
"evaluations.litcovid.normalized_score": ["Macro F1", "Weighted F1"], |
|
|
"evaluations.pubmedqa.normalized_score": ["Accuracy", "Macro-F1"], |
|
|
"evaluations.medqa.normalized_score": ["Accuracy", "Macro-F1"], |
|
|
"evaluations.pubmed.normalized_score": [ |
|
|
|
|
|
"bert", |
|
|
"rouge1", |
|
|
"rougeL", |
|
|
"rough2", |
|
|
], |
|
|
"evaluations.ms2.normalized_score": [ |
|
|
|
|
|
"bert", |
|
|
"rouge1", |
|
|
"rougeL", |
|
|
"rough2", |
|
|
], |
|
|
"evaluations.cochrane_pls.normalized_score": [ |
|
|
|
|
|
"bert", |
|
|
"dcr", |
|
|
"fkg", |
|
|
"rouge1", |
|
|
"rougeL", |
|
|
"rough2", |
|
|
], |
|
|
"evaluations.plos.normalized_score": [ |
|
|
|
|
|
"bert", |
|
|
"dcr", |
|
|
"fkg", |
|
|
"rouge1", |
|
|
"rougeL", |
|
|
"rough2", |
|
|
], |
|
|
}; |
|
|
|
|
|
const createHeaderCell = (label, tooltip, accessorKey) => (header) => { |
|
|
const [anchorEl, setAnchorEl] = useState(null); |
|
|
const selected = useSubscoreStore( |
|
|
(s) => |
|
|
s.selections[accessorKey] || |
|
|
(metricsMap[accessorKey] && metricsMap[accessorKey][0]) |
|
|
); |
|
|
const setSelected = useSubscoreStore((s) => s.setSelection); |
|
|
|
|
|
const handleClick = (event) => { |
|
|
event.stopPropagation(); |
|
|
setAnchorEl(event.currentTarget); |
|
|
}; |
|
|
|
|
|
const handleClose = (value) => { |
|
|
if (value) setSelected(accessorKey, value); |
|
|
setAnchorEl(null); |
|
|
}; |
|
|
return ( |
|
|
<Box |
|
|
className="header-content" |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
width: "100%", |
|
|
overflow: "hidden", |
|
|
}} |
|
|
> |
|
|
<HeaderLabel |
|
|
label={label} |
|
|
tooltip={tooltip} |
|
|
className="header-label" |
|
|
isSorted={header?.column?.getIsSorted()} |
|
|
sx={{ |
|
|
flexGrow: 1, |
|
|
flexShrink: 0, |
|
|
overflow: "hidden", |
|
|
whiteSpace: "nowrap", |
|
|
textOverflow: "ellipsis", |
|
|
}} |
|
|
/> |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
gap: 0.5, |
|
|
ml: "auto", |
|
|
flexShrink: 0, |
|
|
maxWidth: "50%", |
|
|
}} |
|
|
> |
|
|
{accessorKey in metricsMap && ( |
|
|
<> |
|
|
<Chip |
|
|
label={selected} |
|
|
size="small" |
|
|
onClick={handleClick} |
|
|
sx={{ |
|
|
cursor: "pointer", |
|
|
maxWidth: "100%", |
|
|
minWidth: 0, |
|
|
overflow: "hidden", |
|
|
textOverflow: "ellipsis", |
|
|
whiteSpace: "nowrap", |
|
|
flexShrink: 1, |
|
|
}} |
|
|
/> |
|
|
<Menu |
|
|
anchorEl={anchorEl} |
|
|
open={Boolean(anchorEl)} |
|
|
onClose={() => handleClose(null)} |
|
|
> |
|
|
{metricsMap[accessorKey].map((item) => ( |
|
|
<MenuItem |
|
|
key={item} |
|
|
onClick={() => handleClose(item)} |
|
|
sx={{ |
|
|
fontWeight: |
|
|
selected === item |
|
|
? "bold" |
|
|
: "normal", |
|
|
}} |
|
|
> |
|
|
{item} |
|
|
</MenuItem> |
|
|
))} |
|
|
</Menu> |
|
|
</> |
|
|
)} |
|
|
{tooltip && <InfoIcon tooltip={tooltip} />} |
|
|
</Box> |
|
|
</Box> |
|
|
); |
|
|
}; |
|
|
|
|
|
const createModelHeader = |
|
|
( |
|
|
totalModels, |
|
|
officialProvidersCount = 0, |
|
|
isOfficialProviderActive = false |
|
|
) => |
|
|
({ table }) => { |
|
|
return ( |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
justifyContent: "space-between", |
|
|
width: "100%", |
|
|
}} |
|
|
> |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
gap: 1, |
|
|
}} |
|
|
> |
|
|
<Typography |
|
|
sx={{ |
|
|
fontWeight: 600, |
|
|
color: "grey.700", |
|
|
overflow: "hidden", |
|
|
textOverflow: "ellipsis", |
|
|
whiteSpace: "nowrap", |
|
|
}} |
|
|
> |
|
|
Model |
|
|
</Typography> |
|
|
</Box> |
|
|
</Box> |
|
|
); |
|
|
}; |
|
|
|
|
|
const BooleanValue = ({ value }) => { |
|
|
if (value === null || value === undefined) |
|
|
return <Typography variant="body2">-</Typography>; |
|
|
|
|
|
return ( |
|
|
<Box |
|
|
sx={(theme) => ({ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
justifyContent: "center", |
|
|
borderRadius: "4px", |
|
|
px: 1, |
|
|
py: 0.5, |
|
|
backgroundColor: value |
|
|
? theme.palette.mode === "dark" |
|
|
? alpha(theme.palette.success.main, 0.1) |
|
|
: alpha(theme.palette.success.main, 0.1) |
|
|
: theme.palette.mode === "dark" |
|
|
? alpha(theme.palette.error.main, 0.1) |
|
|
: alpha(theme.palette.error.main, 0.1), |
|
|
})} |
|
|
> |
|
|
<Typography |
|
|
variant="body2" |
|
|
sx={(theme) => ({ |
|
|
color: value |
|
|
? theme.palette.mode === "dark" |
|
|
? theme.palette.success.light |
|
|
: theme.palette.success.dark |
|
|
: theme.palette.mode === "dark" |
|
|
? theme.palette.error.light |
|
|
: theme.palette.error.dark, |
|
|
})} |
|
|
> |
|
|
{value ? "Yes" : "No"} |
|
|
</Typography> |
|
|
</Box> |
|
|
); |
|
|
}; |
|
|
|
|
|
export const createColumns = ( |
|
|
getColorForValue, |
|
|
scoreDisplay = "normalized", |
|
|
columnVisibility = {}, |
|
|
totalModels, |
|
|
averageMode = "all", |
|
|
searchValue = "", |
|
|
rankingMode = "static", |
|
|
onTogglePin, |
|
|
hasPinnedRows = false |
|
|
) => { |
|
|
|
|
|
const getColumnSize = (defaultSize) => |
|
|
hasPinnedRows ? "auto" : `${defaultSize}px`; |
|
|
|
|
|
const baseColumns = [ |
|
|
{ |
|
|
accessorKey: "isPinned", |
|
|
header: () => null, |
|
|
cell: ({ row }) => ( |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
justifyContent: "center", |
|
|
height: "100%", |
|
|
}} |
|
|
> |
|
|
<IconButton |
|
|
size="small" |
|
|
onClick={(e) => { |
|
|
e.stopPropagation(); |
|
|
e.preventDefault(); |
|
|
onTogglePin(row.original.id); |
|
|
}} |
|
|
sx={{ |
|
|
padding: 0.5, |
|
|
color: row.original.isPinned |
|
|
? "primary.main" |
|
|
: "grey.400", |
|
|
"&:hover": { |
|
|
color: "primary.main", |
|
|
}, |
|
|
}} |
|
|
> |
|
|
{row.original.isPinned ? ( |
|
|
<PushPinIcon fontSize="small" /> |
|
|
) : ( |
|
|
<PushPinOutlinedIcon fontSize="small" /> |
|
|
)} |
|
|
</IconButton> |
|
|
</Box> |
|
|
), |
|
|
enableSorting: false, |
|
|
size: getColumnSize(40), |
|
|
}, |
|
|
{ |
|
|
accessorKey: "rank", |
|
|
header: createHeaderCell("Rank"), |
|
|
cell: ({ row }) => { |
|
|
const rank = |
|
|
rankingMode === "static" |
|
|
? row.original.static_rank |
|
|
: row.original.dynamic_rank; |
|
|
|
|
|
return ( |
|
|
<RankIndicator |
|
|
rank={rank} |
|
|
previousRank={row.original.previous_rank} |
|
|
mode="static" |
|
|
/> |
|
|
); |
|
|
}, |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["rank"], |
|
|
}, |
|
|
{ |
|
|
id: "model_type", |
|
|
accessorFn: (row) => row.model.type, |
|
|
header: createHeaderCell("Type"), |
|
|
sortingFn: typeColumnSort, |
|
|
cell: ({ row }) => ( |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
justifyContent: "center", |
|
|
width: "100%", |
|
|
}} |
|
|
> |
|
|
<Tooltip title={row.original.model.type}> |
|
|
<Typography |
|
|
sx={{ |
|
|
fontSize: "1.2rem", |
|
|
cursor: "help", |
|
|
lineHeight: 1, |
|
|
fontFamily: |
|
|
'"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif', |
|
|
}} |
|
|
> |
|
|
{getModelTypeIcon(row.original.model.type)} |
|
|
</Typography> |
|
|
</Tooltip> |
|
|
</Box> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["model.type_icon"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "id", |
|
|
header: createModelHeader(totalModels), |
|
|
cell: ({ row }) => { |
|
|
const textSearch = extractTextSearch(searchValue); |
|
|
const modelName = row.original.model.name; |
|
|
|
|
|
return ( |
|
|
<Box |
|
|
sx={{ |
|
|
width: "100%", |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
gap: 1, |
|
|
}} |
|
|
> |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
gap: 1, |
|
|
minWidth: 0, |
|
|
flex: 1, |
|
|
}} |
|
|
> |
|
|
<Link |
|
|
href={`https://huggingface.co/${modelName}`} |
|
|
target="_blank" |
|
|
rel="noopener noreferrer" |
|
|
aria-label={`View ${modelName} on Hugging Face Hub`} |
|
|
title={TABLE_TOOLTIPS.HUB_LINK(modelName)} |
|
|
sx={{ |
|
|
textDecoration: "none", |
|
|
color: "info.main", |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
gap: 0.5, |
|
|
"&:hover": { |
|
|
textDecoration: "underline", |
|
|
color: (theme) => |
|
|
theme.palette.mode === "dark" |
|
|
? theme.palette.info.light |
|
|
: theme.palette.info.dark, |
|
|
"& svg": { |
|
|
opacity: 0.8, |
|
|
}, |
|
|
}, |
|
|
overflow: "hidden", |
|
|
textOverflow: "ellipsis", |
|
|
whiteSpace: "nowrap", |
|
|
flex: 1, |
|
|
minWidth: 0, |
|
|
fontWeight: |
|
|
row.original.static_rank <= 3 |
|
|
? 600 |
|
|
: "inherit", |
|
|
}} |
|
|
> |
|
|
<HighlightedText |
|
|
text={modelName} |
|
|
searchValue={textSearch} |
|
|
/> |
|
|
<OpenInNewIcon |
|
|
sx={{ |
|
|
fontSize: "0.75rem", |
|
|
opacity: 0.6, |
|
|
transition: "opacity 0.2s ease-in-out", |
|
|
ml: 0.5, |
|
|
flexShrink: 0, |
|
|
}} |
|
|
/> |
|
|
</Link> |
|
|
<Link |
|
|
href={getDetailsUrl(modelName)} |
|
|
target="_blank" |
|
|
rel="noopener noreferrer" |
|
|
aria-label={`View detailed evaluation results for ${modelName}`} |
|
|
title={TABLE_TOOLTIPS.EVAL_RESULTS(modelName)} |
|
|
sx={{ |
|
|
textDecoration: "none", |
|
|
"&:hover": { |
|
|
textDecoration: "underline", |
|
|
"& svg": { |
|
|
color: "text.primary", |
|
|
}, |
|
|
}, |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
color: "text.secondary", |
|
|
flexShrink: 0, |
|
|
mr: 0, |
|
|
}} |
|
|
> |
|
|
<DatabaseIcon /> |
|
|
</Link> |
|
|
</Box> |
|
|
</Box> |
|
|
); |
|
|
}, |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["id"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "model.average_score", |
|
|
header: createHeaderCell("Average", COLUMN_TOOLTIPS.AVERAGE), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="model.average_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["model.average_score"], |
|
|
meta: { |
|
|
headerStyle: { |
|
|
borderLeft: (theme) => |
|
|
`2px solid ${alpha( |
|
|
theme.palette.divider, |
|
|
theme.palette.mode === "dark" ? 0.1 : 0.2 |
|
|
)}`, |
|
|
borderRight: (theme) => |
|
|
`2px solid ${alpha( |
|
|
theme.palette.divider, |
|
|
theme.palette.mode === "dark" ? 0.1 : 0.2 |
|
|
)}`, |
|
|
}, |
|
|
cellStyle: (value) => ({ |
|
|
position: "relative", |
|
|
overflow: "hidden", |
|
|
padding: "8px 16px", |
|
|
borderLeft: (theme) => |
|
|
`2px solid ${alpha( |
|
|
theme.palette.divider, |
|
|
theme.palette.mode === "dark" ? 0.1 : 0.2 |
|
|
)}`, |
|
|
borderRight: (theme) => |
|
|
`2px solid ${alpha( |
|
|
theme.palette.divider, |
|
|
theme.palette.mode === "dark" ? 0.1 : 0.2 |
|
|
)}`, |
|
|
}), |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
|
|
|
const ScoreCell = ({ getValue, row, field }) => { |
|
|
const rawValue = field.includes("normalized") |
|
|
? row.original.evaluations[field.split(".")[1]]?.value |
|
|
: getValue()[field]; |
|
|
|
|
|
const selected = useSubscoreStore( |
|
|
(s) => |
|
|
s.selections[field] || |
|
|
(metricsMap[field] && metricsMap[field][0]) |
|
|
); |
|
|
|
|
|
const isAverageColumn = field === "model.average_score"; |
|
|
const value = isAverageColumn ? getValue() : getValue()[selected]; |
|
|
if (isAverageColumn) { |
|
|
console.log(getValue.toString(), row, getValue()); |
|
|
} |
|
|
const hasNoValue = value === null || value === undefined; |
|
|
|
|
|
return ( |
|
|
<Box sx={commonStyles.cellContainer}> |
|
|
{!hasNoValue && |
|
|
(scoreDisplay === "normalized" || isAverageColumn) && ( |
|
|
<Box |
|
|
sx={{ |
|
|
position: "absolute", |
|
|
left: -16, |
|
|
top: -16, |
|
|
height: "calc(100% + 32px)", |
|
|
width: `calc(${value}% + 16px)`, |
|
|
backgroundColor: getColorForValue(value), |
|
|
opacity: (theme) => |
|
|
theme.palette.mode === "light" ? 0.1 : 0.2, |
|
|
transition: "width 0.3s ease", |
|
|
zIndex: 0, |
|
|
}} |
|
|
/> |
|
|
)} |
|
|
<Box |
|
|
sx={{ |
|
|
position: "relative", |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
gap: 1, |
|
|
zIndex: 1, |
|
|
pl: isAverageColumn && !hasNoValue ? 1 : 0, |
|
|
}} |
|
|
> |
|
|
{isAverageColumn && !hasNoValue && ( |
|
|
<Box |
|
|
sx={{ |
|
|
width: 10, |
|
|
height: 10, |
|
|
borderRadius: "50%", |
|
|
marginLeft: -1, |
|
|
backgroundColor: getColorForValue(value), |
|
|
}} |
|
|
/> |
|
|
)} |
|
|
<Typography variant="body2"> |
|
|
{hasNoValue ? ( |
|
|
"-" |
|
|
) : ( |
|
|
<> |
|
|
{isAverageColumn ? ( |
|
|
<> |
|
|
{value.toFixed(2)} |
|
|
<span style={{ opacity: 0.5 }}> %</span> |
|
|
</> |
|
|
) : scoreDisplay === "normalized" ? ( |
|
|
<> |
|
|
{value.toFixed(2)} |
|
|
<span style={{ opacity: 0.5 }}> %</span> |
|
|
</> |
|
|
) : ( |
|
|
<>{rawValue.toFixed(2)}</> |
|
|
)} |
|
|
</> |
|
|
)} |
|
|
</Typography> |
|
|
</Box> |
|
|
</Box> |
|
|
); |
|
|
}; |
|
|
|
|
|
const evaluationColumns = [ |
|
|
{ |
|
|
accessorKey: "evaluations.bc5cdr_chemical.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"BC5CDR-chemical", |
|
|
COLUMN_TOOLTIPS.BC5CDR_CHEMICAL, |
|
|
"evaluations.bc5cdr_chemical.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.bc5cdr_chemical.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.bc5cdr_chemical.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.ncbi_disease.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"NCBI Disease", |
|
|
COLUMN_TOOLTIPS.NCBI_DISEASE, |
|
|
"evaluations.ncbi_disease.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.ncbi_disease.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.ncbi_disease.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.chemprot.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"ChemProt", |
|
|
COLUMN_TOOLTIPS.CHEMPROT, |
|
|
"evaluations.chemprot.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.chemprot.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.chemprot.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.ddi2013.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"DDI2013", |
|
|
COLUMN_TOOLTIPS.DDI2013, |
|
|
"evaluations.ddi2013.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.ddi2013.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.ddi2013.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.hoc.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"HoC", |
|
|
COLUMN_TOOLTIPS.HOC, |
|
|
"evaluations.hoc.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.hoc.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.hoc.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.litcovid.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"LitCovid", |
|
|
COLUMN_TOOLTIPS.LITCOVID, |
|
|
"evaluations.litcovid.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.litcovid.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.litcovid.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.medqa.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"MedQA (5-Option)", |
|
|
COLUMN_TOOLTIPS.MEDQA, |
|
|
"evaluations.medqa.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.medqa.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.medqa.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.pubmedqa.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"PubMedQA", |
|
|
COLUMN_TOOLTIPS.PUBMEDQA, |
|
|
"evaluations.pubmedqa.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.pubmedqa.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.pubmedqa.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.pubmed.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"PubMed", |
|
|
COLUMN_TOOLTIPS.PUBMED, |
|
|
"evaluations.pubmed.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.pubmed.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.pubmed.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.ms2.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"MS^2", |
|
|
COLUMN_TOOLTIPS.MS2, |
|
|
"evaluations.ms2.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.ms2.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.ms2.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.cochrane_pls.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"Cochrane PLS", |
|
|
COLUMN_TOOLTIPS.COCHRANE_PLS, |
|
|
"evaluations.cochrane_pls.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.cochrane_pls.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.cochrane_pls.normalized_score" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "evaluations.plos.normalized_score", |
|
|
header: createHeaderCell( |
|
|
"PLOS", |
|
|
COLUMN_TOOLTIPS.PLOS, |
|
|
"evaluations.plos.normalized_score" |
|
|
), |
|
|
cell: ({ row, getValue }) => ( |
|
|
<ScoreCell |
|
|
getValue={getValue} |
|
|
row={row} |
|
|
field="evaluations.plos.normalized_score" |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"evaluations.plos.normalized_score" |
|
|
], |
|
|
}, |
|
|
]; |
|
|
|
|
|
const optionalColumns = [ |
|
|
{ |
|
|
accessorKey: "model.architecture", |
|
|
header: createHeaderCell( |
|
|
"Architecture", |
|
|
COLUMN_TOOLTIPS.ARCHITECTURE |
|
|
), |
|
|
accessorFn: (row) => row.model.architecture, |
|
|
cell: ({ row }) => ( |
|
|
<Tooltip title={row.original.model.architecture || "-"}> |
|
|
<span>{row.original.model.architecture || "-"}</span> |
|
|
</Tooltip> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["model.architecture"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "model.precision", |
|
|
header: createHeaderCell("Precision", COLUMN_TOOLTIPS.PRECISION), |
|
|
accessorFn: (row) => row.model.precision, |
|
|
cell: ({ row }) => ( |
|
|
<Tooltip title={row.original.model.precision || "-"}> |
|
|
<span>{row.original.model.precision || "-"}</span> |
|
|
</Tooltip> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["model.precision"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "metadata.params_billions", |
|
|
header: createHeaderCell("Parameters", COLUMN_TOOLTIPS.PARAMETERS), |
|
|
cell: ({ row }) => ( |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
justifyContent: "flex-start", |
|
|
}} |
|
|
> |
|
|
<Typography variant="body2"> |
|
|
{row.original.metadata.params_billions} |
|
|
<span style={{ opacity: 0.6 }}>B</span> |
|
|
</Typography> |
|
|
</Box> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"metadata.params_billions" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "metadata.hub_license", |
|
|
header: createHeaderCell("License", COLUMN_TOOLTIPS.LICENSE), |
|
|
cell: ({ row }) => ( |
|
|
<Tooltip title={row.original.metadata.hub_license || "-"}> |
|
|
<Typography |
|
|
variant="body2" |
|
|
sx={{ |
|
|
overflow: "hidden", |
|
|
textOverflow: "ellipsis", |
|
|
whiteSpace: "nowrap", |
|
|
}} |
|
|
> |
|
|
{row.original.metadata.hub_license || "-"} |
|
|
</Typography> |
|
|
</Tooltip> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["metadata.hub_license"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "metadata.hub_hearts", |
|
|
header: createHeaderCell( |
|
|
"Hub ❤️", |
|
|
"Number of likes received on the Hugging Face Hub" |
|
|
), |
|
|
cell: ({ row }) => ( |
|
|
<Typography variant="body2"> |
|
|
{row.original.metadata.hub_hearts} |
|
|
</Typography> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["metadata.hub_hearts"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "metadata.upload_date", |
|
|
header: createHeaderCell( |
|
|
"Upload Date", |
|
|
"Date when the model was uploaded to the Hugging Face Hub" |
|
|
), |
|
|
cell: ({ row }) => ( |
|
|
<Tooltip title={row.original.metadata.upload_date || "-"}> |
|
|
<Typography |
|
|
variant="body2" |
|
|
sx={{ |
|
|
overflow: "hidden", |
|
|
textOverflow: "ellipsis", |
|
|
whiteSpace: "nowrap", |
|
|
}} |
|
|
> |
|
|
{row.original.metadata.upload_date || "-"} |
|
|
</Typography> |
|
|
</Tooltip> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["metadata.upload_date"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "metadata.submission_date", |
|
|
header: createHeaderCell( |
|
|
"Submission Date", |
|
|
"Date when the model was submitted to the leaderboard" |
|
|
), |
|
|
cell: ({ row }) => ( |
|
|
<Tooltip title={row.original.metadata.submission_date || "-"}> |
|
|
<Typography |
|
|
variant="body2" |
|
|
sx={{ |
|
|
overflow: "hidden", |
|
|
textOverflow: "ellipsis", |
|
|
whiteSpace: "nowrap", |
|
|
}} |
|
|
> |
|
|
{row.original.metadata.submission_date || "-"} |
|
|
</Typography> |
|
|
</Tooltip> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"metadata.submission_date" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "metadata.generation", |
|
|
header: createHeaderCell( |
|
|
"Generation", |
|
|
"The generation or version number of the model" |
|
|
), |
|
|
cell: ({ row }) => ( |
|
|
<Typography variant="body2"> |
|
|
{row.original.metadata.generation} |
|
|
</Typography> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["metadata.generation"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "metadata.base_model", |
|
|
header: createHeaderCell( |
|
|
"Base Model", |
|
|
"The original model this model was derived from" |
|
|
), |
|
|
cell: ({ row }) => ( |
|
|
<Tooltip title={row.original.metadata.base_model || "-"}> |
|
|
<Typography |
|
|
variant="body2" |
|
|
sx={{ |
|
|
overflow: "hidden", |
|
|
textOverflow: "ellipsis", |
|
|
whiteSpace: "nowrap", |
|
|
}} |
|
|
> |
|
|
{row.original.metadata.base_model || "-"} |
|
|
</Typography> |
|
|
</Tooltip> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["metadata.base_model"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "metadata.co2_cost", |
|
|
header: createHeaderCell("CO₂ Cost", COLUMN_TOOLTIPS.CO2_COST), |
|
|
cell: ({ row }) => ( |
|
|
<Box |
|
|
sx={{ |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
justifyContent: "flex-start", |
|
|
}} |
|
|
> |
|
|
<Typography variant="body2"> |
|
|
{row.original.metadata.co2_cost?.toFixed(2) || "0"} |
|
|
<span style={{ opacity: 0.6 }}> kg</span> |
|
|
</Typography> |
|
|
</Box> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["metadata.co2_cost"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "model.has_chat_template", |
|
|
header: createHeaderCell( |
|
|
"Chat Template", |
|
|
"Whether this model has a chat template defined" |
|
|
), |
|
|
cell: ({ row }) => ( |
|
|
<BooleanValue value={row.original.model.has_chat_template} /> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"model.has_chat_template" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "features.is_not_available_on_hub", |
|
|
header: createHeaderCell( |
|
|
"Hub Availability", |
|
|
"Whether the model is available on the Hugging Face Hub" |
|
|
), |
|
|
cell: ({ row }) => ( |
|
|
<BooleanValue |
|
|
value={row.original.features.is_not_available_on_hub} |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"features.is_not_available_on_hub" |
|
|
], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "features.is_highlighted_by_maintainer", |
|
|
header: createHeaderCell( |
|
|
"Official Providers", |
|
|
"Models that are officially provided and maintained by their original creators or organizations" |
|
|
), |
|
|
cell: ({ row }) => ( |
|
|
<BooleanValue |
|
|
value={row.original.features.is_highlighted_by_maintainer} |
|
|
/> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[ |
|
|
"features.is_highlighted_by_maintainer" |
|
|
], |
|
|
enableSorting: true, |
|
|
}, |
|
|
{ |
|
|
accessorKey: "features.is_moe", |
|
|
header: createHeaderCell( |
|
|
"Mixture of Experts", |
|
|
"Whether this model uses a Mixture of Experts architecture" |
|
|
), |
|
|
cell: ({ row }) => ( |
|
|
<BooleanValue value={row.original.features.is_moe} /> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["features.is_moe"], |
|
|
}, |
|
|
{ |
|
|
accessorKey: "features.is_flagged", |
|
|
header: createHeaderCell( |
|
|
"Flag Status", |
|
|
"Whether this model has been flagged for any issues" |
|
|
), |
|
|
cell: ({ row }) => ( |
|
|
<BooleanValue value={row.original.features.is_flagged} /> |
|
|
), |
|
|
size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["features.is_flagged"], |
|
|
}, |
|
|
]; |
|
|
|
|
|
|
|
|
const finalColumns = [ |
|
|
...baseColumns, |
|
|
...evaluationColumns.filter((col) => columnVisibility[col.accessorKey]), |
|
|
...optionalColumns |
|
|
.filter((col) => columnVisibility[col.accessorKey]) |
|
|
.sort((a, b) => { |
|
|
|
|
|
const order = { |
|
|
"model.architecture": 1, |
|
|
"model.precision": 2, |
|
|
"metadata.params_billions": 3, |
|
|
"metadata.hub_license": 4, |
|
|
"metadata.co2_cost": 5, |
|
|
"metadata.hub_hearts": 6, |
|
|
"metadata.upload_date": 7, |
|
|
"metadata.submission_date": 8, |
|
|
"metadata.generation": 9, |
|
|
"metadata.base_model": 10, |
|
|
"model.has_chat_template": 11, |
|
|
"features.is_not_available_on_hub": 12, |
|
|
"features.is_highlighted_by_maintainer": 13, |
|
|
"features.is_moe": 14, |
|
|
"features.is_flagged": 15, |
|
|
}; |
|
|
return order[a.accessorKey] - order[b.accessorKey]; |
|
|
}), |
|
|
]; |
|
|
|
|
|
return finalColumns; |
|
|
}; |
|
|
|
