CTA for embeddings and model evaluation

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

@@ -1,11 +1,27 @@
 import React from "react";
-import { ButtonProps, CircularProgress, Button, Stack } from "@mui/material";
+import {
+  ButtonProps,
+  CircularProgress,
+  Button,
+  Stack,
+  useTheme,
+} from "@mui/material";
 
 export default function MuiButton(props: ButtonPropsType) {
   const { loading, variant, ...otherProps } = props;
+  const theme = useTheme();
 
   const containedStyles =
     variant === "contained" ? { sx: { color: "white" } } : {};
+  const outlinedStyles =
+    variant === "outlined"
+      ? {
+          sx: {
+            color: theme.palette.text.secondary,
+            borderColor: theme.palette.text.secondary,
+          },
+        }
+      : {};
 
   return (
     <Stack
@@ -14,7 +30,12 @@ export default function MuiButton(props: ButtonPropsType) {
       alignItems="center"
       sx={{ position: "relative" }}
     >
-      <Button {...containedStyles} variant={variant} {...otherProps} />
+      <Button
+        {...containedStyles}
+        {...outlinedStyles}
+        variant={variant}
+        {...otherProps}
+      />
       {loading && (
         <CircularProgress size={20} sx={{ position: "absolute", left: 6 }} />
       )}

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

@@ -0,0 +1,182 @@
+import { constants } from "@fiftyone/utilities";
+import { OpenInNew, West } from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  Card,
+  IconProps,
+  Stack,
+  Typography,
+  TypographyProps,
+  useTheme,
+} from "@mui/material";
+import React, { FunctionComponent } from "react";
+import MuiButton from "../MuiButton";
+import MuiIconFont from "../MuiIconFont";
+
+const { IS_APP_MODE_FIFTYONE, BOOK_A_DEMO_LINK, TRY_IN_BROWSER_LINK } =
+  constants;
+
+export default function PanelCTA(props: PanelCTAProps) {
+  const {
+    demoLabel,
+    demoDescription,
+    demoCaption,
+    Actions,
+    caption,
+    description,
+    docCaption,
+    docLink,
+    icon: Icon,
+    iconProps = {},
+    label,
+    mode,
+    name,
+    onBack,
+  } = props;
+  const theme = useTheme();
+  const isDefault = mode === "default";
+  const computedLabel = IS_APP_MODE_FIFTYONE ? demoLabel || label : label;
+  const computedDescription = IS_APP_MODE_FIFTYONE
+    ? demoDescription || description
+    : description;
+  const computedCaption = IS_APP_MODE_FIFTYONE
+    ? demoCaption || caption
+    : caption;
+
+  return (
+    <Stack spacing={1} sx={{ height: "100%", p: 2 }}>
+      {isDefault && (
+        <Box>
+          <Button onClick={onBack} startIcon={<West />} color="secondary">
+            Back to {name}
+          </Button>
+        </Box>
+      )}
+      <Card
+        sx={{
+          position: "relative",
+          height: "100%",
+          display: "flex",
+          justifyContent: "center",
+          minHeight: 320,
+        }}
+      >
+        <Stack sx={{ maxWidth: "85%" }}>
+          <Stack
+            spacing={1}
+            sx={{
+              height: "100%",
+              alignItems: "center",
+              justifyContent: "space-between",
+              py: 2,
+            }}
+          >
+            <Stack
+              sx={{
+                height: "100%",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {typeof Icon === "string" && (
+                <MuiIconFont
+                  sx={{
+                    fontSize: 64,
+                    color: theme.palette.custom.primarySoft,
+                    marginBottom: 2,
+                  }}
+                  {...(iconProps as IconProps)}
+                  name={Icon}
+                />
+              )}
+              {Boolean(Icon) && typeof Icon !== "string" && Icon}
+              <TypographyOrNode variant="h6">{computedLabel}</TypographyOrNode>
+              <TypographyOrNode color="secondary">
+                {computedDescription}
+              </TypographyOrNode>
+              <TypographyOrNode sx={{ color: theme.palette.text.tertiary }}>
+                {computedCaption}
+              </TypographyOrNode>
+              {!IS_APP_MODE_FIFTYONE && (
+                <Box pt={1}>{Actions && <Actions {...props} />}</Box>
+              )}
+              {IS_APP_MODE_FIFTYONE && (
+                <Stack direction="row" spacing={2} pt={2}>
+                  <MuiButton
+                    variant="contained"
+                    color="primary"
+                    href={BOOK_A_DEMO_LINK}
+                    target="_blank"
+                  >
+                    Book a demo
+                  </MuiButton>
+                  <MuiButton
+                    variant="contained"
+                    color="primary"
+                    href={TRY_IN_BROWSER_LINK}
+                    target="_blank"
+                  >
+                    Try in browser
+                  </MuiButton>
+                </Stack>
+              )}
+            </Stack>
+            {docLink && (
+              <Stack
+                spacing={1}
+                sx={{ alignItems: "center", justifyContent: "center" }}
+              >
+                {docCaption && (
+                  <Typography color="secondary">
+                    {docCaption || "Not ready to upgrade yet?"}
+                  </Typography>
+                )}
+                <MuiButton
+                  variant="outlined"
+                  endIcon={<OpenInNew sx={{ fontSize: "16px!important" }} />}
+                  href={docLink}
+                  target="_blank"
+                >
+                  View documentation
+                </MuiButton>
+              </Stack>
+            )}
+          </Stack>
+        </Stack>
+      </Card>
+    </Stack>
+  );
+}
+
+function TypographyOrNode(props: TypographyProps) {
+  const { children, ...otherProps } = props;
+
+  if (typeof children === "string") {
+    return <Typography {...otherProps}>{children}</Typography>;
+  }
+
+  if (React.isValidElement(children)) {
+    return children;
+  }
+
+  return null;
+}
+
+export type PanelCTAProps = {
+  Actions?: FunctionComponent<any>;
+  caption?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  docCaption?: string;
+  docLink?: string;
+  icon?: string | React.ReactNode;
+  iconProps?: IconProps;
+  label: string | React.ReactNode;
+  mode?: "onboarding" | "default";
+  name: string;
+  onBack: () => void;
+  panelProps?: any;
+  demoLabel?: string;
+  demoDescription?: string;
+  demoCaption?: string;
+};

app/packages/components/src/components/index.ts

@@ -39,5 +39,6 @@ export { default as TextField } from "./TextField";
 export { default as ThemeProvider, useFont, useTheme } from "./ThemeProvider";
 export { default as Tooltip } from "./Tooltip";
 export { default as Toast } from "./Toast";
+export { default as PanelCTA } from "./PanelCTA";
 
 export * from "./types";

app/packages/components/src/components/types.ts

@@ -1 +1,2 @@
 export { type AdaptiveMenuItemComponentPropsType } from "./AdaptiveMenu";
+export { type PanelCTAProps } from "./PanelCTA";

app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx

@@ -34,7 +34,7 @@ export default function ContainerizedComponent(props: ContainerizedComponent) {
       sxForOverlay.zIndex = 999;
     }
     return (
-      <Box sx={{ position: "relative", ...sxForOverlay }}>
+      <Box sx={{ position: "relative", height: "100%", ...sxForOverlay }}>
         {containerizedChildren}
       </Box>
     );

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

@@ -1,22 +1,13 @@
-import { Launch } from "@mui/icons-material";
-import { Button } from "@mui/material";
+import { MuiButton } from "@fiftyone/components";
+import { Add } from "@mui/icons-material";
 import React from "react";
 
 export default function Evaluate(props: EvaluateProps) {
-  const { variant } = props;
-
-  if (variant === "empty") return null;
-
+  const { onEvaluate } = props;
   return (
-    <Button
-      endIcon={<Launch />}
-      variant="outlined"
-      color="secondary"
-      href={"https://docs.voxel51.com/user_guide/evaluation.html"}
-      target="_blank"
-    >
-      View documentation
-    </Button>
+    <MuiButton onClick={onEvaluate} startIcon={<Add />} variant="contained">
+      Evaluate Model
+    </MuiButton>
   );
 }