Add Model Evaluation Panel

app/packages/components/src/components/ThemeProvider/index.tsx

@@ -188,6 +188,14 @@ let theme = extendMuiTheme({
         disableRipple: true,
       },
     },
+    MuiButton: {
+      variants: [
+        {
+          props: { variant: "contained" },
+          style: { color: "#ffffff" },
+        },
+      ],
+    },
     MuiModal: {
       styleOverrides: {
         root: {

app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/EmptyOverview.tsx

@@ -0,0 +1,46 @@
+import { Add, Launch } from "@mui/icons-material";
+import { Button, Card, Stack, Typography } from "@mui/material";
+import React from "react";
+import EvaluationIcon from "./EvaluationIcon";
+
+export default function EmptyOverview(props: EmptyOverviewProps) {
+  const { height, onEvaluate } = props;
+  return (
+    <Card
+      sx={{
+        height: `calc(${height}px - 32px)`,
+        margin: "16px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Stack spacing={2} sx={{ alignItems: "center" }}>
+        <EvaluationIcon sx={{ fontSize: 48 }} />
+        <Typography>Run your first model evaluation to see results.</Typography>
+        <Button
+          variant="contained"
+          onClick={onEvaluate}
+          sx={{ color: "white" }}
+          startIcon={<Add />}
+        >
+          Evaluate Model
+        </Button>
+        <Typography color="secondary" sx={{ pt: 8 }}>
+          Learn more about evaluation models in FiftyOne
+        </Typography>
+        <Button
+          endIcon={<Launch />}
+          variant="outlined"
+          color="secondary"
+          href={"https://docs.voxel51.com/user_guide/evaluation.html"}
+          target="_blank"
+        >
+          View documentation
+        </Button>
+      </Stack>
+    </Card>
+  );
+}
+
+type EmptyOverviewProps = { height: number; onEvaluate: () => void };