Merging main

.github/workflows/build-db.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Clone fiftyone
         uses: actions/checkout@v1
       - name: Set up Python 3.9
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v4
         with:
           python-version: 3.9
       - name: Install dependencies

.github/workflows/build-desktop.yml

@@ -28,7 +28,7 @@ jobs:
         with:
           submodules: true
       - name: Set up Python 3.8
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v4
         with:
           python-version: 3.8
       - name: Install dependencies

.github/workflows/build-docs.yml

@@ -52,7 +52,7 @@ jobs:
           token: ${{ secrets.TEAMS_GITHUB_PAT }}
           ref: main
       - name: Set up Python 3.8
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v4
         with:
           python-version: 3.8
       - name: Install pip dependencies

.github/workflows/build-graphql.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Clone fiftyone
         uses: actions/checkout@v1
       - name: Set up Python 3.9
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v4
         with:
           python-version: 3.9
       - name: Install dependencies

.github/workflows/build.yml

@@ -27,7 +27,7 @@ jobs:
         with:
           submodules: true
       - name: Set up Python 3.8
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v4
         with:
           python-version: 3.8
       - name: Install dependencies

.github/workflows/e2e.yml

@@ -18,7 +18,7 @@ jobs:
           submodules: true
 
       - name: Set up Python 3.8
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v4
         id: pip-cache
         with:
           python-version: 3.8
@@ -72,13 +72,6 @@ jobs:
           yarn start
         working-directory: ./e2e
 
-      - name: Upload videos
-        if: always()
-        uses: actions/upload-artifact@v2
-        with:
-          name: videos
-          path: e2e/cypress/videos
-
       - name: Upload snapshots
         if: always()
         uses: actions/upload-artifact@v2

.github/workflows/test.yml

@@ -53,7 +53,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Setup
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v4
         id: pip-cache
         with:
           python-version: ${{ matrix.python }}

app/.eslintrc.js

@@ -61,6 +61,7 @@ module.exports = {
         ],
       },
     ],
+    "react/prop-types": 0,
   },
   settings: {
     react: {

app/packages/app/src/Network.tsx

@@ -36,14 +36,12 @@ const Network: React.FC<{
 export const NetworkRenderer = ({ makeRoutes }) => {
   const { context, environment } = fos.useRouter(makeRoutes, []);
 
-  const isModalActive = Boolean(useRecoilValue(fos.modal));
+  const isModalOpen = useRecoilValue(fos.isModalActive);
 
   useEffect(() => {
-    document.body.classList.toggle("noscroll", isModalActive);
-    document
-      .getElementById("modal")
-      ?.classList.toggle("modalon", isModalActive);
-  }, [isModalActive]);
+    document.body.classList.toggle("noscroll", isModalOpen);
+    document.getElementById("modal")?.classList.toggle("modalon", isModalOpen);
+  }, [isModalOpen]);
 
   return <Network environment={environment} context={context} />;
 };

app/packages/app/src/index.css

@@ -48,4 +48,6 @@ button {
 
 body {
   overflow: hidden;
+  /* mainChannel override in ThemeProvider is not working for some reason */
+  --fo-palette-primary-mainChannel: 0 0 0;
 }

app/packages/app/src/index.tsx

@@ -4,18 +4,18 @@ import { usePlugins } from "@fiftyone/plugins";
 import {
   BeforeScreenshotContext,
   EventsContext,
+  State,
+  activeColorField,
   getDatasetName,
-  modal,
+  getSavedViewName,
+  isModalActive,
   screenshotCallbacks,
-  State,
   stateSubscription,
-  useReset,
   useClearModal,
-  useScreenshot,
-  useRouter,
   useRefresh,
-  getSavedViewName,
-  activeColorField,
+  useReset,
+  useRouter,
+  useScreenshot,
 } from "@fiftyone/state";
 import { getEventSource, toCamelCase } from "@fiftyone/utilities";
 import React, { useEffect, useRef, useState } from "react";
@@ -58,15 +58,13 @@ const App: React.FC = ({}) => {
     new URLSearchParams(window.location.search).get("context")
   );
 
-  const isModalActive = Boolean(useRecoilValue(modal));
+  const isModalOpen = useRecoilValue(isModalActive);
   const isCustomizeColorModalActive = Boolean(useRecoilValue(activeColorField));
   const handleError = useErrorHandler();
 
   useEffect(() => {
-    document
-      .getElementById("modal")
-      ?.classList.toggle("modalon", isModalActive);
-  }, [isModalActive]);
+    document.getElementById("modal")?.classList.toggle("modalon", isModalOpen);
+  }, [isModalOpen]);
   useEffect(() => {
     document
       .getElementById("colorModal")

app/packages/app/vite.config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
     pluginRewriteAll(),
   ],
   server: {
+    port: parseInt(process.env.FIFTYONE_DEFAULT_APP_PORT || "5173"),
     proxy: {
       "/plugins": {
         target: `http://127.0.0.1:${

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

@@ -58,6 +58,7 @@ let theme = extendMuiTheme({
         },
         primary: {
           main: "hsl(25, 100%, 51%)",
+          mainChannel: "0 0 0",
           plainBorder: "hsl(200, 0%, 90%)",
           plainColor: "hsl(25, 100%, 51%)",
           softBg: "hsl(200, 0%, 85%, 0.7)",
@@ -130,7 +131,7 @@ let theme = extendMuiTheme({
         },
         primary: {
           main: "hsl(25, 100%, 51%)",
-          mainChannel: "none",
+          mainChannel: "0 0 0",
           plainColor: "hsl(25, 100%, 51%)",
           plainBorder: "hsl(200, 0%, 5%)",
           softBg: "hsl(200, 0%, 25%)",

app/packages/core/src/Dataset.ts

@@ -42,6 +42,7 @@ export const DatasetNodeQuery = graphql`
       mediaType
       defaultGroupSlice
       groupField
+      groupSlice
       groupMediaTypes {
         name
         mediaType

app/packages/core/src/Root/Datasets/Dataset.tsx

@@ -1,21 +1,22 @@
+import * as fos from "@fiftyone/state";
 import { NotFoundError } from "@fiftyone/utilities";
 import React, { useContext } from "react";
+import { usePreloadedQuery } from "react-relay";
 import { useRecoilValue } from "recoil";
-import DatasetComponent from "../../components/Dataset";
-import * as fos from "@fiftyone/state";
-import { DatasetQuery } from "../../__generated__/DatasetQuery.graphql";
 import {
-  usePreLoadedDataset,
   DatasetNodeQuery,
   DatasetQueryRef,
+  usePreLoadedDataset,
 } from "../../Dataset";
-import { usePreloadedQuery } from "react-relay";
+import { DatasetQuery } from "../../__generated__/DatasetQuery.graphql";
+import DatasetComponent from "../../components/Dataset";
 
 export const Dataset: fos.Route<DatasetQuery> = ({ prepared }) => {
   const router = useContext(fos.RouterContext);
   const [dataset, ready] = usePreLoadedDataset(prepared);
   const queryRef = usePreloadedQuery<DatasetQuery>(DatasetNodeQuery, prepared);
   const name = useRecoilValue(fos.datasetName);
+
   if (!ready) return null;
   if (dataset === null) {
     throw new NotFoundError({

app/packages/core/src/Root/Root.tsx

@@ -1,7 +1,7 @@
+import { AnimatePresence, motion } from "framer-motion";
 import React, { Suspense, useContext, useEffect, useMemo } from "react";
 import ReactDOM from "react-dom";
 import ReactGA from "react-ga";
-import { motion, AnimatePresence } from "framer-motion";
 import {
   PreloadedQuery,
   useFragment,
@@ -24,26 +24,26 @@ import {
 } from "@fiftyone/components";
 
 // built in plugins
-import "@fiftyone/map";
-import "@fiftyone/looker-3d";
 import "@fiftyone/embeddings";
+import "@fiftyone/looker-3d";
+import "@fiftyone/map";
 
+import Teams from "../components/Teams/Teams";
+import ViewBar from "../components/ViewBar/ViewBar";
 import gaConfig from "../ga";
 import style from "./Root.module.css";
-import ViewBar from "../components/ViewBar/ViewBar";
-import Teams from "../components/Teams/Teams";
 
-import { RootQuery } from "./__generated__/RootQuery.graphql";
+import * as fos from "@fiftyone/state";
+import { Route, RouterContext, getDatasetName } from "@fiftyone/state";
+import { isElectron } from "@fiftyone/utilities";
 import { RootDatasets_query$key } from "./__generated__/RootDatasets_query.graphql";
 import { RootGA_query$key } from "./__generated__/RootGA_query.graphql";
 import { RootNav_query$key } from "./__generated__/RootNav_query.graphql";
-import { isElectron } from "@fiftyone/utilities";
-import * as fos from "@fiftyone/state";
-import { getDatasetName, Route, RouterContext } from "@fiftyone/state";
+import { RootQuery } from "./__generated__/RootQuery.graphql";
 
-import DatasetSelector from "../components/DatasetSelector";
-import { useColorScheme, IconButton } from "@mui/material";
 import { DarkMode, LightMode } from "@mui/icons-material";
+import { IconButton, useColorScheme } from "@mui/material";
+import DatasetSelector from "../components/DatasetSelector";
 
 const rootQuery = graphql`
   query RootQuery($search: String = "", $count: Int, $cursor: String) {
@@ -120,7 +120,7 @@ export const useGA = (prepared: PreloadedQuery<RootQuery>) => {
     const buildType = dev ? "dev" : "prod";
 
     ReactGA.initialize(gaConfig.app_ids[buildType], {
-      debug: dev,
+      debug: false,
       gaOptions: {
         storage: "none",
         cookieDomain: "none",

app/packages/core/src/components/Actions/Patcher.tsx

@@ -1,38 +1,28 @@
-import React, { useContext, useState } from "react";
-import { selector, Snapshot, useRecoilCallback, useRecoilValue } from "recoil";
-import { useSpring } from "@react-spring/web";
 import {
   useToClips,
-  useToPatches,
   useToEvaluationPatches,
+  useToPatches,
 } from "@fiftyone/state";
-
 import {
   CLIPS_FRAME_FIELDS,
   CLIPS_SAMPLE_FIELDS,
   EMBEDDED_DOCUMENT_FIELD,
-  getFetchFunction,
   PATCHES_FIELDS,
-  toSnakeCase,
 } from "@fiftyone/utilities";
-
-import {
-  RouterContext,
-  useSetView,
-  useUnprocessedStateUpdate,
-} from "@fiftyone/state";
+import { useSpring } from "@react-spring/web";
+import React, { useState } from "react";
+import { selector, useRecoilValue } from "recoil";
 import {
-  OBJECT_PATCHES,
-  EVALUATION_PATCHES,
   CLIPS_VIEWS,
+  EVALUATION_PATCHES,
+  OBJECT_PATCHES,
 } from "../../utils/links";
 
-import Popout from "./Popout";
-import { ActionOption } from "./Common";
-import { SwitcherDiv, SwitchDiv } from "./utils";
 import { useTheme } from "@fiftyone/components";
 import * as fos from "@fiftyone/state";
-import { State } from "@fiftyone/state";
+import { ActionOption } from "./Common";
+import Popout from "./Popout";
+import { SwitchDiv, SwitcherDiv } from "./utils";
 
 export const patchesFields = selector<string[]>({
   key: "patchesFields",