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,167 @@
+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%" }}>
+        <Stack
+          spacing={1}
+          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>
+          )}
+          {docLink && (
+            <Stack
+              spacing={1}
+              sx={{
+                position: "absolute",
+                bottom: "32px",
+                alignItems: "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>
+      </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

@@ -38,5 +38,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>
   );
 }
 

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

@@ -1,9 +1,12 @@
 import { Box } from "@mui/material";
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import EmptyOverview from "./EmptyOverview";
 import Evaluation from "./Evaluation";
 import Overview from "./Overview";
 import { useTriggerEvent } from "./utils";
+import { PanelCTA } from "@fiftyone/components";
+import { constants } from "@fiftyone/utilities";
+import Evaluate from "./Evaluate";
 
 export default function NativeModelEvaluationView(props) {
   const { data = {}, schema, onChange, layout } = props;
@@ -42,9 +45,17 @@ export default function NativeModelEvaluationView(props) {
   const { page = "overview", key, id, compareKey } = viewState;
   const showEmptyOverview = computedEvaluations.length === 0;
   const triggerEvent = useTriggerEvent();
+  const [showCTA, setShowCTA] = React.useState(false);
+  const onEvaluate = useCallback(() => {
+    if (constants.IS_APP_MODE_FIFTYONE) {
+      setShowCTA(true);
+    } else {
+      triggerEvent(on_evaluate_model);
+    }
+  }, [triggerEvent, on_evaluate_model]);
 
   return (
-    <Box>
+    <Box sx={{ height: "100%" }}>
       {page === "evaluation" && (
         <Evaluation
           name={key}
@@ -72,13 +83,28 @@ export default function NativeModelEvaluationView(props) {
         />
       )}
       {page === "overview" &&
-        (showEmptyOverview ? (
-          <EmptyOverview
-            height={layout?.height as number}
-            onEvaluate={() => {
-              triggerEvent(on_evaluate_model);
+        (showEmptyOverview || showCTA ? (
+          <PanelCTA
+            label="Create you first model evaluation"
+            demoLabel="Upgrade to Fiftyone Teams to Evaluate Models"
+            description="Analyze and improve models collaboratively with your team"
+            docLink="https://docs.voxel51.com/user_guide/evaluation.html"
+            docCaption="Not ready to upgrade yet? Learn how to create model evaluation via code."
+            icon="ssid_chart"
+            Actions={() => {
+              return (
+                <Evaluate
+                  onEvaluate={onEvaluate}
+                  permissions={permissions}
+                  variant="empty"
+                />
+              );
             }}
-            permissions={permissions}
+            name="Model Evaluation"
+            onBack={() => {
+              setShowCTA(false);
+            }}
+            mode={showCTA ? "default" : "onboarding"}
           />
         ) : (
           <Overview
@@ -87,9 +113,7 @@ export default function NativeModelEvaluationView(props) {
               triggerEvent(on_change_view);
               triggerEvent(load_evaluation_view);
             }}
-            onEvaluate={() => {
-              triggerEvent(on_evaluate_model);
-            }}
+            onEvaluate={onEvaluate}
             evaluations={computedEvaluations}
             statuses={statuses}
             notes={notes}