Merge release/v1.1.0 to develop

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

@@ -158,7 +158,11 @@ function TypographyOrNode(props: TypographyProps) {
   const { children, ...otherProps } = props;
 
   if (typeof children === "string") {
-    return <Typography {...otherProps}>{children}</Typography>;
+    return (
+      <Typography sx={{ textAlign: "center" }} {...otherProps}>
+        {children}
+      </Typography>
+    );
   }
 
   if (React.isValidElement(children)) {

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

@@ -91,8 +91,8 @@ export default function NativeModelEvaluationView(props) {
             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="Learn how to create model evaluation via code."
-            demoDocCaption="Not ready to upgrade yet? Learn how to create model evaluation via code."
+            docCaption="Learn how to evaluate models via code."
+            demoDocCaption="Not ready to upgrade yet? Learn how to evaluate models via code."
             icon="ssid_chart"
             Actions={() => {
               return (

app/packages/embeddings/src/Embeddings.tsx

@@ -92,14 +92,18 @@ export default function Embeddings({ containerHeight, dimensions }) {
                 containerStyle={selectorStyle}
               />
             )}
-            {computeViz.isAvailable && (
-              <PlotOption
-                to={() => computeViz.prompt()}
-                title={"Compute visualization"}
-              >
-                <Add />
-              </PlotOption>
-            )}
+            <PlotOption
+              to={() => {
+                if (constants.IS_APP_MODE_FIFTYONE) {
+                  setShowCTA(true);
+                } else {
+                  computeViz.prompt();
+                }
+              }}
+              title={"Compute visualization"}
+            >
+              <Add />
+            </PlotOption>
             {!plotSelection.selectionIsExternal && (
               <PlotOption
                 to={plotSelection.clearSelection}
@@ -152,19 +156,6 @@ export default function Embeddings({ containerHeight, dimensions }) {
             )}
             <OperatorPlacements place={types.Places.EMBEDDINGS_ACTIONS} />
           </div>
-          <MuiButton
-            startIcon={<Add />}
-            onClick={() => {
-              if (constants.IS_APP_MODE_FIFTYONE) {
-                setShowCTA(true);
-              } else {
-                computeViz.prompt();
-              }
-            }}
-            variant="contained"
-          >
-            Compute Embeddings
-          </MuiButton>
         </Selectors>
         {showPlot && (
           <EmbeddingsPlot

app/packages/operators/src/SplitButton.tsx

@@ -11,6 +11,7 @@ import {
   ListItemText,
   Tooltip,
   ButtonProps,
+  Box,
 } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import { onEnter } from "./utils";
@@ -128,6 +129,9 @@ export default function SplitButton({
                         key={option.id}
                         disabled={option.disabled}
                         selected={option.selected}
+                        sx={{
+                          cursor: option.onClick ? "pointer" : "default",
+                        }}
                         onClick={() => handleSelect(option)}
                       >
                         <ListItemText
@@ -141,9 +145,19 @@ export default function SplitButton({
                             <PrimaryWithTag
                               label={option.choiceLabel || option.label}
                               tag={option.tag}
+                              disabled={option.disabled || !option.onClick}
                             />
                           }
-                          secondary={option.description}
+                          secondary={
+                            <Box
+                              sx={{
+                                fontSize: "11px",
+                                "& *": { fontSize: "inherit" },
+                              }}
+                            >
+                              {option.description}
+                            </Box>
+                          }
                         />
                       </MenuItem>
                     ))}
@@ -158,13 +172,13 @@ export default function SplitButton({
   );
 }
 
-function PrimaryWithTag({ label, tag }) {
+function PrimaryWithTag({ label, tag, disabled }) {
   const theme = useTheme();
   const tagEl = tag ? (
     <span
       style={{
         fontSize: "11px",
-        color: theme.custom.primarySoft,
+        color: disabled ? theme.text.secondary : theme.custom.primarySoft,
         marginLeft: "5px",
       }}
     >

app/packages/operators/src/state.ts

@@ -1,7 +1,13 @@
 import { useAnalyticsInfo } from "@fiftyone/analytics";
 import * as fos from "@fiftyone/state";
 import { debounce } from "lodash";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   atom,
   selector,
@@ -32,6 +38,7 @@ import {
 import { OperatorPromptType, Places } from "./types";
 import { OperatorExecutorOptions } from "./types-internal";
 import { ValidationContext } from "./validation";
+import { Markdown } from "@fiftyone/components";
 
 export const promptingOperatorState = atom({
   key: "promptingOperator",
@@ -231,8 +238,8 @@ function useExecutionOptions(operatorURI, ctx, isRemote) {
 export type OperatorExecutionOption = {
   label: string;
   id: string;
-  description: string;
-  onClick: () => void;
+  description: string | React.ReactNode;
+  onClick?: () => void;
   isDelegated: boolean;
   choiceLabel?: string;
   tag?: string;
@@ -251,7 +258,7 @@ const useOperatorPromptSubmitOptions = (
   const persistUnderKey = `operator-prompt-${operatorURI}`;
   const availableOrchestrators =
     execDetails.executionOptions?.availableOrchestrators || [];
-  const hasAvailableOrchestators = availableOrchestrators.length > 0;
+  const hasAvailableOrchestrators = availableOrchestrators.length > 0;
   const executionOptions = execDetails.executionOptions || {};
   const defaultToExecute = executionOptions.allowDelegatedExecution
     ? !executionOptions.defaultChoiceToDelegated
@@ -287,7 +294,7 @@ const useOperatorPromptSubmitOptions = (
       label: "Schedule",
       id: "schedule",
       default: defaultToSchedule,
-      description: "Run this operation on your compute cluster",
+      description: "Run this operation in the background",
       onSelect() {
         setSelectedID("schedule");
       },
@@ -300,7 +307,7 @@ const useOperatorPromptSubmitOptions = (
 
   if (
     executionOptions.allowDelegatedExecution &&
-    hasAvailableOrchestators &&
+    hasAvailableOrchestrators &&
     executionOptions.orchestratorRegistrationEnabled
   ) {
     for (let orc of execDetails.executionOptions.availableOrchestrators) {
@@ -321,6 +328,25 @@ const useOperatorPromptSubmitOptions = (
         isDelegated: true,
       });
     }
+  } else if (
+    executionOptions.allowDelegatedExecution &&
+    executionOptions.allowImmediateExecution &&
+    executionOptions.orchestratorRegistrationEnabled &&
+    !hasAvailableOrchestrators
+  ) {
+    const markdownDesc = React.createElement(
+      Markdown,
+      null,
+      "[Learn how](https://docs.voxel51.com/plugins/using_plugins.html#delegated-operations) to run this operation in the background"
+    );
+    options.push({
+      label: "Schedule",
+      choiceLabel: `Schedule`,
+      tag: "NOT AVAILABLE",
+      id: "disabled-schedule",
+      description: markdownDesc,
+      isDelegated: true,
+    });
   }
 
   // sort options so that the default is always the first in the list
@@ -366,10 +392,11 @@ const useOperatorPromptSubmitOptions = (
   if (selectedOption) selectedOption.selected = true;
   const showWarning =
     executionOptions.orchestratorRegistrationEnabled &&
-    !hasAvailableOrchestators &&
+    !hasAvailableOrchestrators &&
     !executionOptions.allowImmediateExecution;
-  const warningMessage =
-    "There are no available orchestrators to schedule this operation. Please contact your administrator to add an orchestrator.";
+  const warningStr =
+    "This operation requires [delegated execution](https://docs.voxel51.com/plugins/using_plugins.html#delegated-operations)";
+  const warningMessage = React.createElement(Markdown, null, warningStr);
 
   return {
     showWarning,

app/packages/state/src/hooks/useSetModalState.ts

@@ -2,7 +2,6 @@ import type { CallbackInterface, RecoilState } from "recoil";
 
 import { useRelayEnvironment } from "react-relay";
 import { useRecoilCallback } from "recoil";
-import { dynamicGroupsViewMode } from "../recoil";
 import * as atoms from "../recoil/atoms";
 import * as filterAtoms from "../recoil/filters";
 import * as groupAtoms from "../recoil/groups";
@@ -45,8 +44,6 @@ export default () => {
           ];
         }),
 
-        [dynamicGroupsViewMode(true), dynamicGroupsViewMode(false)],
-
         [atoms.cropToContent(true), atoms.cropToContent(false)],
         [atoms.sortFilterResults(true), atoms.sortFilterResults(false)],
         [groupAtoms.groupStatistics(true), groupAtoms.groupStatistics(false)],

app/packages/state/src/recoil/options.ts

@@ -4,7 +4,7 @@ import {
   mediaFieldsFragment,
   mediaFieldsFragment$key,
 } from "@fiftyone/relay";
-import { atomFamily, selector, selectorFamily } from "recoil";
+import { DefaultValue, atomFamily, selector, selectorFamily } from "recoil";
 import { getBrowserStorageEffectForKey } from "./customEffects";
 import { datasetSampleCount } from "./dataset";
 import { fieldPaths } from "./schema";
@@ -55,17 +55,43 @@ export const selectedMediaField = selectorFamily<string, boolean>({
       set(selectedMediaFieldAtomFamily(modal), value),
 });
 
-export const dynamicGroupsViewMode = atomFamily<
-  "carousel" | "pagination" | "video",
+export const dynamicGroupsViewModeStore = atomFamily<
+  "carousel" | "pagination" | "video" | null,
   boolean
 >({
-  key: "dynamicGroupsViewMode",
-  default: "pagination",
+  key: "dynamicGroupsViewModeStore",
+  default: null,
   effects: (modal) => [
     getBrowserStorageEffectForKey(`dynamicGroupsViewMode-${modal}`),
   ],
 });
 
+export const dynamicGroupsViewMode = selectorFamily({
+  key: "dynamicGroupsViewMode",
+  get:
+    (modal: boolean) =>
+    ({ get }) => {
+      const value = get(dynamicGroupsViewModeStore(modal));
+
+      if (!value) {
+        return modal
+          ? get(dynamicGroupsViewModeStore(false)) ?? "pagination"
+          : "pagination";
+      }
+
+      return value;
+    },
+  set:
+    (modal: boolean) =>
+    ({ reset, set }, newValue) => {
+      const instance = dynamicGroupsViewModeStore(modal);
+
+      newValue instanceof DefaultValue
+        ? reset(instance)
+        : set(instance, newValue);
+    },
+});
+
 export const isLargeVideo = selector<boolean>({
   key: "isLargeVideo",
   get: ({ get }) => {

app/packages/state/src/recoil/queryPerformance.ts

@@ -11,6 +11,7 @@ import { graphQLSelectorFamily } from "recoil-relay";
 import type { ResponseFrom } from "../utils";
 import { config } from "./config";
 import { getBrowserStorageEffectForKey } from "./customEffects";
+import { groupSlice } from "./groups";
 import { isLabelPath } from "./labels";
 import { RelayEnvironmentKey } from "./relay";
 import * as schemaAtoms from "./schema";
@@ -34,6 +35,7 @@ export const lightningQuery = graphQLSelectorFamily<
         input: {
           dataset: get(datasetName),
           paths,
+          slice: get(groupSlice),
         },
       };
     },

app/schema.graphql

@@ -444,6 +444,7 @@ input LabelTagColorInput {
 input LightningInput {
   dataset: String!
   paths: [LightningPathInput!]!
+  slice: String = null
 }
 
 input LightningPathInput {

docs/source/plugins/developing_plugins.rst

@@ -992,9 +992,8 @@ contains the following properties:
     instance that you can use to read and write the :ref:`state <panel-state>`
     and :ref:`data <panel-data>` of the current panel, if the operator was
     invoked from a panel
--   `ctx.delegated` - whether delegated execution has been forced for the
-    operation
--   `ctx.requesting_delegated_execution` - whether delegated execution has been
+-   `ctx.delegated` - whether the operation was delegated
+-   `ctx.requesting_delegated_execution` - whether delegated execution was
     requested for the operation
 -   `ctx.delegation_target` - the orchestrator to which the operation should be
     delegated, if applicable
@@ -1248,46 +1247,6 @@ of the current view:
     to specify the available execution options as described in the previous
     section.
 
-Alternatively, you could simply ask the user to decide:
-
-.. code-block:: python
-    :linenos:
-
-    def resolve_input(self, ctx):
-        delegate = ctx.params.get("delegate", None)
-
-        if delegate:
-            description = "Uncheck this box to execute the operation immediately"
-        else:
-            description = "Check this box to delegate execution of this task"
-
-        inputs.bool(
-            "delegate",
-            label="Delegate execution?",
-            description=description,
-            view=types.CheckboxView(),
-        )
-
-        if delegate:
-            inputs.view(
-                "notice",
-                types.Notice(
-                    label=(
-                        "You've chosen delegated execution. Note that you must "
-                        "have a delegated operation service running in order for "
-                        "this task to be processed. See "
-                        "https://docs.voxel51.com/plugins/index.html#operators "
-                        "for more information"
-                    )
-                ),
-            )
-
-    def resolve_delegation(self, ctx):
-        return ctx.params.get("delegate", None)
-
-.. image:: /images/plugins/operators/operator-user-delegation.png
-    :align: center
-
 .. _operator-reporting-progress:
 
 Reporting progress