Merge pull request #3639 from voxel51/merge/release0_22_1-to-main

Merge/release0 22 1 to main
voxel51 · Oct 6, 2023 · 684e35f · 684e35f
2 parents dc03cf2 + 2391389
commit 684e35f
Show file tree

Hide file tree

Showing 93 changed files with 4,835 additions and 2,032 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -5,7 +5,7 @@ on: workflow_call
 jobs:
   test-e2e:
     timeout-minutes: 60
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-latest-m
     env:
       FIFTYONE_DO_NOT_TRACK: true
       ELECTRON_EXTRA_LAUNCH_ARGS: "--disable-gpu"

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -36,7 +36,7 @@ jobs:
       fail-fast: false
       matrix:
         os:
-          - ubuntu-20.04
+          - ubuntu-latest-m
           - windows-latest
         python:
           - 3.8
@@ -69,6 +69,7 @@ jobs:
       - name: Install fiftyone
         run: |
           pip install .
+          pip install fiftyone-db-ubuntu2204
       - name: Configure
         id: test_config
         run: |

diff --git a/MANIFEST.in b/MANIFEST.in
@@ -3,8 +3,11 @@ global-exclude *.py[cod]
 
 prune .*
 prune app
+prune e2e
+prune e2e-pw
 prune eta
 prune package
+prune requirements
 prune tools
 prune tests
 

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
@@ -38,7 +38,7 @@ module.exports = {
       "warn",
       {
         argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
+        varsIgnorePattern: "^_|React",
         caughtErrorsIgnorePattern: "^_",
       },
     ],

diff --git a/app/packages/components/src/components/PillButton/PillButton.tsx b/app/packages/components/src/components/PillButton/PillButton.tsx
@@ -38,7 +38,6 @@ const PillButton = React.forwardRef<HTMLButtonElement, PillButtonProps>(
         id={id}
         ref={ref}
         style={{ ...baseStyles, ...style }}
-        title={title}
       >
         {text && <span>{text}</span>}
         {icon}

diff --git a/app/packages/components/src/components/Selection/Option.tsx b/app/packages/components/src/components/Selection/Option.tsx
@@ -3,8 +3,7 @@ import React from "react";
 import styled from "styled-components";
 import { useHover } from "@fiftyone/state";
 import { Edit, Check } from "@mui/icons-material";
-import { useTheme } from "@fiftyone/components";
-import * as fos from "@fiftyone/state";
+import { IconButton, useTheme } from "@fiftyone/components";
 
 const Box = styled.div`
   display: flex;
@@ -73,31 +72,43 @@ export default function SelectionOption(props: Props) {
         <TextContainer>{label}</TextContainer>
       </Box>
       <Box style={{ width: "18%" }}>
-        {!readonly && (isHovered || isSelected) && (
+        {(isHovered || isSelected) && (
           <EditBox>
             <Box>
               {isHovered && item.id !== "1" && (
-                <Edit
-                  data-cy="btn-edit-selection"
-                  fontSize="small"
-                  sx={{
-                    color: theme.neutral[400],
-                    zIndex: "9999",
-                    marginRight: isSelected ? "0.5rem" : "0",
+                <IconButton
+                  title={
+                    readonly ? "Can not edit in read-only mode" : undefined
+                  }
+                  disableRipple
+                >
+                  <Edit
+                    data-cy="btn-edit-selection"
+                    fontSize="small"
+                    sx={{
+                      color: readonly
+                        ? theme.text.disabled
+                        : theme.text.secondary,
+                      zIndex: "9999",
+                      marginRight: isSelected ? "0.5rem" : "0",
 
-                    "&:hover": {
-                      color: theme.text.primary,
-                    },
-                  }}
-                  onClick={(e: React.MouseEvent) => {
-                    e.stopPropagation();
-                    e.preventDefault();
+                      "&:hover": {
+                        color: readonly
+                          ? theme.text.disabled
+                          : theme.text.primary,
+                      },
+                      cursor: readonly ? "not-allowed" : "inherit",
+                    }}
+                    onClick={(e: React.MouseEvent) => {
+                      e.stopPropagation();
+                      e.preventDefault();
 
-                    if (onEdit) {
-                      onEdit(item);
-                    }
-                  }}
-                />
+                      if (onEdit && !readonly) {
+                        onEdit(item);
+                      }
+                    }}
+                  />
+                </IconButton>
               )}
               {isSelected && (
                 <Check

diff --git a/app/packages/components/src/scrollable.module.css b/app/packages/components/src/scrollable.module.css
@@ -10,6 +10,7 @@
 .scrollable::-webkit-scrollbar {
   width: 16px;
 }
+
 .scrollableSm::-webkit-scrollbar {
   width: 12px;
   height: 12px;
@@ -26,6 +27,10 @@
   transition: box-shadow linear 0.5s;
 }
 
+.scrollable::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 .scrollable:hover::-webkit-scrollbar-thumb {
   box-shadow: inset 0 0 10px 10px var(--fo-palette-text-tertiary);
 }
diff --git a/app/packages/core/src/components/Actions/ActionsRow.tsx b/app/packages/core/src/components/Actions/ActionsRow.tsx
@@ -164,6 +164,7 @@ const Tag = ({
   const [available, setAvailable] = useState(true);
   const labels = useRecoilValue(fos.selectedLabelIds);
   const samples = useRecoilValue(fos.selectedSamples);
+  const readOnly = useRecoilValue(fos.readOnly);
 
   const selected = labels.size > 0 || samples.size > 0;
   const tagging = useRecoilValue(fos.anyTagging);
@@ -180,15 +181,26 @@ const Tag = ({
   lookerRef &&
     useEventHandler(lookerRef.current, "pause", () => setAvailable(true));
 
+  const baseTitle = `Tag sample${modal ? "" : "s"} or labels`;
+  const title = readOnly
+    ? `Can not ${baseTitle.toLowerCase()} in read-only mode.`
+    : baseTitle;
+
   return (
     <ActionDiv ref={ref}>
       <PillButton
-        style={{ cursor: disabled || !available ? "default" : "pointer" }}
+        style={{
+          cursor: readOnly
+            ? "not-allowed"
+            : disabled || !available
+            ? "default"
+            : "pointer",
+        }}
         icon={disabled ? <Loading /> : <LocalOffer />}
         open={open}
-        onClick={() => !disabled && available && setOpen(!open)}
+        onClick={() => !disabled && available && !readOnly && setOpen(!open)}
         highlight={(selected || open) && available}
-        title={`Tag sample${modal ? "" : "s"} or labels`}
+        title={title}
         data-cy="action-tag-sample-labels"
       />
       {open && available && (
@@ -458,7 +470,6 @@ export const BrowseOperations = () => {
 };
 
 export const GridActionsRow = () => {
-  const hideTagging = useRecoilValue(fos.readOnly);
   const datasetColorScheme = useRecoilValue(fos.datasetAppConfig)?.colorScheme;
   const setSessionColor = useSetRecoilState(fos.sessionColorScheme);
   const isUsingSessionColorScheme = useRecoilValue(
@@ -516,7 +527,7 @@ export const GridActionsRow = () => {
     >
       <ToggleSidebar modal={false} />
       <Colors />
-      {hideTagging ? null : <Tag modal={false} />}
+      <Tag modal={false} />
       <Patches />
       <Similarity modal={false} />
       <SaveFilters />
@@ -537,8 +548,6 @@ export const ModalActionsRow = ({
   lookerRef?: MutableRefObject<fos.Lookers | undefined>;
   isGroup?: boolean;
 }) => {
-  const hideTagging = useRecoilValue(fos.readOnly);
-
   return (
     <ActionsRowDiv
       style={{
@@ -550,7 +559,7 @@ export const ModalActionsRow = ({
       <Selected modal={true} lookerRef={lookerRef} />
       <Colors />
       <Similarity modal={true} />
-      {!hideTagging && <Tag modal={true} lookerRef={lookerRef} />}
+      <Tag modal={true} lookerRef={lookerRef} />
       <Options modal={true} />
       {isGroup && <GroupMediaVisibilityContainer modal={true} />}
       <OperatorPlacements place={types.Places.SAMPLES_VIEWER_ACTIONS} />

diff --git a/app/packages/core/src/components/Actions/similar/Similar.tsx b/app/packages/core/src/components/Actions/similar/Similar.tsx
@@ -278,20 +278,22 @@ const SortBySimilarity = ({
               setValue={(brainKey) => onChangeBrainKey(brainKey)}
             />
           </div>
-          {!isReadOnly && (
-            <>
-              Optional: store the distance between each sample and the query in
-              this field
-              <Input
-                placeholder={"dist_field (default = None)"}
-                validator={(value) => !value.startsWith("_")}
-                value={state.distField ?? ""}
-                setter={(value) =>
-                  updateState({ distField: !value.length ? undefined : value })
-                }
-              />
-            </>
-          )}
+          Optional: store the distance between each sample and the query in this
+          field
+          <Input
+            disabled={isReadOnly}
+            placeholder={"dist_field (default = None)"}
+            validator={(value) => !value.startsWith("_")}
+            value={state.distField ?? ""}
+            setter={(value) =>
+              updateState({ distField: !value.length ? undefined : value })
+            }
+            title={
+              isReadOnly
+                ? "Can not store the distance in a field in read-only mode"
+                : undefined
+            }
+          />
         </div>
       )}
     </Popout>

diff --git a/app/packages/core/src/components/ColorModal/ColorFooter.tsx b/app/packages/core/src/components/ColorModal/ColorFooter.tsx
@@ -7,13 +7,8 @@ import {
   useSetRecoilState,
 } from "recoil";
 
-import { Button } from "../utils";
-import {
-  BUTTON_STYLE,
-  ButtonGroup,
-  LONG_BUTTON_STYLE,
-  ModalActionButtonContainer,
-} from "./ShareStyledDiv";
+import { Button } from "@fiftyone/components";
+import { ButtonGroup, ModalActionButtonContainer } from "./ShareStyledDiv";
 import { isDefaultSetting } from "./utils";
 
 // this reset is used to trigger a sync of local state input with the session color values
@@ -52,37 +47,41 @@ const ColorFooter: React.FC = () => {
 
   return (
     <ModalActionButtonContainer>
-      <ButtonGroup>
+      <ButtonGroup style={{ marginRight: "4px" }}>
         <Button
-          text={"Reset"}
           title={`Clear session settings and revert to default settings`}
           onClick={() => {
             setColorScheme(false, isTeams ? datasetDefault : null);
             setReset((prev) => prev + 1);
           }}
-          style={BUTTON_STYLE}
-        />
-        {canEdit && (
-          <Button
-            text={"Save as default"}
-            title={`Save to dataset appConfig`}
-            onClick={() => {
-              setColorScheme(true, colorScheme);
-              setActiveColorModalField(null);
-            }}
-            style={LONG_BUTTON_STYLE}
-          />
-        )}
-        {canEdit && hasSavedSettings && (
+        >
+          Reset
+        </Button>
+        <Button
+          title={
+            canEdit
+              ? `Save to dataset appConfig`
+              : "Can not save to dataset appConfig in read-only mode"
+          }
+          onClick={() => {
+            setColorScheme(true, colorScheme);
+            setActiveColorModalField(null);
+          }}
+          disabled={!canEdit}
+        >
+          Save as default
+        </Button>
+        {hasSavedSettings && (
           <Button
-            text={"Clear default"}
-            title={`Clear`}
+            title={canEdit ? "Clear" : "Can not clear in read-only mode"}
             onClick={() => {
               setColorScheme(true, null);
               setReset((prev) => prev + 1);
             }}
-            style={LONG_BUTTON_STYLE}
-          />
+            disabled={!canEdit}
+          >
+            Clear default
+          </Button>
         )}
       </ButtonGroup>
     </ModalActionButtonContainer>

diff --git a/app/packages/core/src/components/ColorModal/ShareStyledDiv.ts b/app/packages/core/src/components/ColorModal/ShareStyledDiv.ts
@@ -72,6 +72,7 @@ export const Text = styled.div`
 export const ButtonGroup = styled.div`
   display: flex;
   flex-direction: row;
+  gap: 8px;
 `;
 
 export const ActionDiv = styled.div`

diff --git a/app/packages/core/src/components/Common/Input.tsx b/app/packages/core/src/components/Common/Input.tsx
@@ -44,6 +44,7 @@ interface InputProps {
   onBlur?: () => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   style?: React.CSSProperties;
+  title?: string;
 }
 
 const Input = React.memo(
@@ -61,6 +62,7 @@ const Input = React.memo(
         onBlur,
         onKeyDown,
         style,
+        title,
       }: InputProps,
       ref
     ) => {
@@ -87,12 +89,17 @@ const Input = React.memo(
               e.key === "Escape" && e.currentTarget.blur();
               onKeyDown && onKeyDown(e);
             }}
-            style={disabled ? { color: theme.text.secondary } : {}}
+            style={
+              disabled
+                ? { color: theme.text.secondary, cursor: "not-allowed" }
+                : {}
+            }
             disabled={disabled}
             onFocus={(_: React.FocusEvent<HTMLInputElement>) => {
               onFocus && onFocus();
             }}
             onBlur={onBlur}
+            title={title}
           />
         </StyledInputContainer>
       );