Merge pull request #3702 from voxel51/merge/v0.22.2-to-main

Merge/v0.22.2 to main
voxel51 · Oct 20, 2023 · 3d5fe39 · 3d5fe39
2 parents c098d9c + b785fc7
commit 3d5fe39
Show file tree

Hide file tree

Showing 70 changed files with 1,167 additions and 360 deletions.
diff --git a/app/packages/core/src/plugins/OperatorIO/utils/index.ts b/app/packages/core/src/plugins/OperatorIO/utils/index.ts
@@ -9,6 +9,8 @@ const inputComponentsByType = {
   OneOf: "OneOfView",
   Tuple: "TupleView",
   Map: "MapView",
+  File: "FileExplorerView",
+  UploadedFile: "FileView",
 };
 const outputComponentsByType = {
   Object: "ObjectView",
@@ -18,6 +20,8 @@ const outputComponentsByType = {
   List: "ListView",
   OneOf: "OneOfView",
   Tuple: "TupleView",
+  File: "FileExplorerView",
+  UploadedFile: "FileView",
 };
 const baseViews = ["View", "PromptView"];
 const viewAliases = {
@@ -41,6 +45,8 @@ const operatorTypeToJSONSchemaType = {
   OneOf: "oneOf",
   Tuple: "array",
   Map: "object",
+  File: "object",
+  UploadedFile: "object",
 };
 const unsupportedView = "UnsupportedView";
 
@@ -105,6 +111,13 @@ function getSchema(property, options = {}) {
 
   const computedOptions = { ...options, readOnly: schema.view.readOnly };
 
+  if (typeName === "Number") {
+    const { min, max, float } = property.type;
+    schema.min = min;
+    schema.max = max;
+    schema.multipleOf = float ? 0.01 : 1;
+  }
+
   if (typeName === "Object") {
     schema.properties = getPropertiesSchema(property, computedOptions);
   }

diff --git a/app/packages/core/src/plugins/SchemaIO/components/FileDrop.tsx b/app/packages/core/src/plugins/SchemaIO/components/FileDrop.tsx
@@ -28,13 +28,20 @@ export default function FileDrop({
   const [fileIds, setFileIds] = useState(new Set());
   const fileInputRef = useRef(null);
 
+  const clear = () => {
+    setFiles([]);
+    setFileIds(new Set());
+  };
+
   useEffect(() => {
     const updatedFileIds = new Set();
     for (const file of files) {
       updatedFileIds.add(getFileId(file));
     }
-    if (onChange) onChange(files);
     setFileIds(updatedFileIds);
+    if (onChange) {
+      onChange(files, clear);
+    }
   }, [files]);
 
   function addUniqueFiles(newFiles: FileList) {

diff --git a/app/packages/core/src/plugins/SchemaIO/components/FileExplorerView/FileTable.tsx b/app/packages/core/src/plugins/SchemaIO/components/FileExplorerView/FileTable.tsx
@@ -14,6 +14,7 @@ import FolderIcon from "@mui/icons-material/Folder";
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import moment from "moment";
 import { scrollable } from "@fiftyone/components";
+import { humanReadableBytes } from "@fiftyone/utilities";
 
 const Wrapper = ({ children }) => (
   <Paper
@@ -30,19 +31,6 @@ const Wrapper = ({ children }) => (
   </Paper>
 );
 
-function humanReadableBytes(bytes: number): string {
-  if (!bytes) return "";
-
-  const units: string[] = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-
-  if (bytes === 0) return "0 Byte";
-
-  const k = 1024;
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + units[i];
-}
-
 function FileTable({
   chooseMode,
   files,

diff --git a/app/packages/core/src/plugins/SchemaIO/components/FileView.tsx b/app/packages/core/src/plugins/SchemaIO/components/FileView.tsx
@@ -1,57 +1,76 @@
-import { Box } from "@mui/material";
+import { Alert, Box, Typography } from "@mui/material";
 import React, { useState } from "react";
 import FileDrop from "./FileDrop";
 import HeaderView from "./HeaderView";
-import TabsView from "./TabsView";
-import TextFieldView from "./TextFieldView";
 import { getComponentProps } from "../utils";
+import { humanReadableBytes } from "@fiftyone/utilities";
 
 export default function FileView(props) {
   const { onChange, path, schema, autoFocused } = props;
   const { view = {} } = schema;
   const { types } = view;
-  const [type, setType] = useState("file");
+  const [type] = useState("file");
+  const isObject = schema.type === "object";
+  const maxSize = view.max_size || null;
+  const customMaxSizeMessage = view.max_size_error_message || null;
+  const [currentError, setCurrentError] = useState(null);
+
+  const showError = (message) => {
+    setCurrentError({ message });
+  };
 
   return (
     <Box {...getComponentProps(props, "container")}>
       <HeaderView {...props} nested />
-      <TabsView
-        schema={{
-          view: {
-            choices: [
-              { value: "file", label: "Upload" },
-              { value: "url", label: "URL" },
-            ],
-          },
-        }}
-        onChange={(path, value) => {
-          setType(value);
-          onChange(path, "");
-        }}
-        {...getComponentProps(props, "tabs")}
-      />
       <Box sx={{ pt: 1 }} {...getComponentProps(props, "fileContainer")}>
         {type === "file" && (
           <FileDrop
-            onChange={async (files) => {
-              if (files?.length === 0) return onChange(path, "");
+            onChange={async (files, clear) => {
+              if (files?.length === 0) {
+                return onChange(path, null);
+              }
               const [file] = files;
               const { error, result } = await fileToBase64(file);
-              if (error) return; // todo: handle error
-              onChange(path, result);
+              if (error) {
+                clear();
+                // NOTE: error is a ProgressEvent<EventTarget>
+                // there is no error message - so we print it to the console
+                const msg = "Error reading file";
+                console.error(msg);
+                console.error(error);
+                showError(msg);
+                return;
+              }
+              if (maxSize && file.size > maxSize) {
+                clear();
+                showError(
+                  customMaxSizeMessage ||
+                    `File size must be less than ${humanReadableBytes(maxSize)}`
+                );
+                return;
+              }
+              setCurrentError(null);
+              const resultStripped = stripBase64Prefix(result);
+              const obj = {
+                content: resultStripped,
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                last_modified: file.lastModified,
+              };
+              if (isObject) return onChange(path, obj);
+              onChange(path, resultStripped);
             }}
             types={types}
             autoFocused={autoFocused}
             // allowMultiple={allowMultiple}
             {...getComponentProps(props, "fileDrop")}
           />
         )}
-        {type === "url" && (
-          <TextFieldView
-            schema={{ view: { placeholder: "URL to a file" } }}
-            onChange={onChange}
-            {...getComponentProps(props, "fileURL")}
-          />
+        {currentError && (
+          <Alert severity="warning">
+            <Typography>{currentError.message}</Typography>
+          </Alert>
         )}
       </Box>
     </Box>
@@ -68,3 +87,7 @@ function fileToBase64(
     fileReader.onerror = (error) => resolve({ error });
   });
 }
+
+function stripBase64Prefix(data: string): string {
+  return data.slice(data.indexOf(",") + 1);
+}
diff --git a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
@@ -7,6 +7,7 @@ export default function SliderView(props) {
   const { data, onChange, path, schema } = props;
   const sliderRef = useRef<HTMLInputElement>(null);
   const focus = autoFocus(props);
+  const { min = 0, max = 100, multipleOf = 1 } = schema;
 
   useEffect(() => {
     if (sliderRef.current && focus) {
@@ -17,6 +18,9 @@ export default function SliderView(props) {
   return (
     <FieldWrapper {...props}>
       <Slider
+        min={min}
+        max={max}
+        step={multipleOf}
         disabled={schema.view?.readOnly}
         valueLabelDisplay="auto"
         value={data ?? schema.default}

diff --git a/app/packages/core/src/plugins/SchemaIO/components/TextFieldView.tsx b/app/packages/core/src/plugins/SchemaIO/components/TextFieldView.tsx
@@ -6,7 +6,9 @@ import { getComponentProps } from "../utils";
 
 export default function TextFieldView(props) {
   const { schema, onChange, path, data } = props;
-  const { type, view = {} } = schema;
+  const { type, view = {}, min, max, multipleOf = 1 } = schema;
+
+  const { inputProps = {}, ...fieldProps } = getComponentProps(props, "field");
 
   return (
     <FieldWrapper {...props}>
@@ -22,7 +24,8 @@ export default function TextFieldView(props) {
           const value = e.target.value;
           onChange(path, type === "number" ? parseFloat(value) : value);
         }}
-        {...getComponentProps(props, "field")}
+        inputProps={{ min, max, step: multipleOf, ...inputProps }}
+        {...fieldProps}
       />
     </FieldWrapper>
   );

diff --git a/app/packages/operators/src/OperatorIcon.tsx b/app/packages/operators/src/OperatorIcon.tsx
@@ -3,11 +3,19 @@ import { useColorScheme } from "@mui/material";
 import { resolveServerPath } from "./utils";
 
 export default function OperatorIcon(props: CustomIconPropsType) {
-  const { pluginName, icon, lightIcon, darkIcon, _builtIn, Fallback } = props;
+  const {
+    pluginName,
+    icon,
+    lightIcon,
+    darkIcon,
+    _builtIn,
+    Fallback,
+    canExecute,
+  } = props;
   const { mode } = useColorScheme();
   const iconPath = mode === "dark" && darkIcon ? darkIcon : lightIcon || icon;
 
-  if (!iconPath) return Fallback ? <Fallback /> : null;
+  if (!iconPath || !canExecute) return Fallback ? <Fallback /> : null;
   if (_builtIn) return <ImageIcon src={iconPath} />;
   return <CustomOperatorIcon pluginName={pluginName} iconPath={iconPath} />;
 }
@@ -32,6 +40,7 @@ export type CustomIconPropsType = {
   darkIcon?: string;
   _builtIn?: boolean;
   Fallback?: React.ComponentType;
+  canExecute?: boolean;
 };
 
 type CustomOperatorIconPropsType = {

diff --git a/app/packages/operators/src/OperatorPlacements.tsx b/app/packages/operators/src/OperatorPlacements.tsx
@@ -50,6 +50,7 @@ function ButtonPlacement(props: OperatorPlacementProps) {
   const { label } = view;
   const { icon, darkIcon, lightIcon, prompt = true } = view?.options || {};
   const { execute } = useOperatorExecutor(uri);
+  const canExecute = operator?.config?.canExecute;
 
   const showIcon =
     isPrimitiveString(icon) ||
@@ -64,6 +65,7 @@ function ButtonPlacement(props: OperatorPlacementProps) {
       darkIcon={darkIcon}
       lightIcon={lightIcon}
       Fallback={Extension}
+      canExecute={canExecute}
     />
   );
 

diff --git a/app/packages/operators/src/built-in-operators.ts b/app/packages/operators/src/built-in-operators.ts
@@ -780,9 +780,9 @@ export function registerBuiltInOperators() {
   }
 }
 
-export async function loadOperators() {
+export async function loadOperators(datasetName: string) {
   registerBuiltInOperators();
-  await loadOperatorsFromServer();
+  await loadOperatorsFromServer(datasetName);
 }
 
 function getLayout(layout) {

diff --git a/app/packages/operators/src/operators.ts b/app/packages/operators/src/operators.ts
@@ -294,10 +294,14 @@ export function _registerBuiltInOperator(OperatorType: typeof Operator) {
   localRegistry.register(operator);
 }
 
-export async function loadOperatorsFromServer() {
+export async function loadOperatorsFromServer(datasetName: string) {
   initializationErrors = [];
   try {
-    const { operators, errors } = await getFetchFunction()("GET", "/operators");
+    const { operators, errors } = await getFetchFunction()(
+      "POST",
+      "/operators",
+      { dataset_name: datasetName }
+    );
     const operatorInstances = operators.map((d: any) =>
       Operator.fromRemoteJSON(d)
     );

diff --git a/app/packages/operators/src/state.ts b/app/packages/operators/src/state.ts
@@ -389,9 +389,15 @@ export function filterChoicesByQuery(query, all) {
   });
 }
 
+export const availableOperatorsRefreshCount = atom({
+  key: "availableOperatorsRefreshCount",
+  default: 0,
+});
+
 export const availableOperators = selector({
   key: "availableOperators",
-  get: () => {
+  get: ({ get }) => {
+    get(availableOperatorsRefreshCount); // triggers force refresh manually
     return listLocalAndRemoteOperators().allOperators.map((operator) => {
       return {
         label: operator.label,