App sidebar mode and optimizations (voxel51#2191)

* work * embed refactor * refactor for embed * fix app loading for embed * add viewbar to dataset component * fix plugin loading for embed * fix embed layout css * fix non-embed regression * fix built in plugins * export css from dataset component * add path prefix override for embed * use path prefix for events route * fixes for nextjs build * fix media path * fix getSampleSrc url detection * initial theme pass * tweaks * edits * server updates * aggregation work * bugs, integrating * bugs * cleaning * update dataset loader * cleaning * bugs * withSuspense for filters * bug * update useTagText * bugs * video bugs * sidebar mode and groups work * work * persisted expanded group setting, sidebar mode details * fix * theme tweaks * fix * wrap dataset container with ThemeContext when a theme prop is provided * fix * tweaks * compiled aggregations setup * bugs, documenting * passing agg tests * optimized server aggs * cleanup * adding method to generate default sidebar groups * fix * slow to all * conditional sidebar tags * fix * schema * only generate default sidebar groups * don't populate expanded by default * linting * simplifying * fix * documenting sidebar mode and sidebar groups * tweaks * adding v0.18 release notes * tweaks * more docs links * cleanup * loading animation * bugs, tweaks * normalizing * tweaks * handling None field * fix toggle, reset sidebar mode * persist sidebar groups * tweaks * fix * handling mongoengine types * fix calls * adding missing context arg * include all non-nested roots * context tweak * fixing naming * prevent nested facet aggregations when compiling * fixing schemas * linting * loading state fixes * bug * linting * bug * linting * updating sidebar_mode documentation * removing multiple definitions of expanded * adding sidebar stuff to migration * fix serialization * refresh after tagging * various fixes * cleaning up * adding sidebar GIFs * bumping brain version * adding support for serializing Schema() aggregations * adding support for serializing faceted aggregations * explaining * bumping release date * fix patching * fixes * Final fixups (voxel51#2254) * handling None field * fix toggle error when click start event is unset * increase field tooltip delay * fix field info tooltip colors * fix looker loading and background in flashlight for light mode * updating lock * remove stray logs * fix field info light borders * fixing mongoengine bug * fix weird sidebar field click behavior * fix sidebar toggle to update on clicking checkbox * fix flashlight tile background Co-authored-by: brimoor <brimoor@umich.edu> Co-authored-by: imanjra <ibrahim@voxel51.com> Co-authored-by: Brian Moore <brian@voxel51.com> * regression * re-enable field text selection * query sidebar groups * show tags in fast mode * don't allow app_config to be nulled * await bug * persist in app sidebar group expansion across views * fix * proper handling of excluded fields * fixing faceted aggregation regression * confirmed that pathing is already handled * fixes * expanded field count * updating docs * root field counts * iss 2255 * fixing bug * reset group statistics * groups and dist fixes * bump db * rm test pypi * rm test pypi * bump desktop * resolving merge conflict * linting * update color scheme on theme update * omitting fiftyone/server * tweak * layout effect * clean * db bump * transparent looker * adjust background * tweaks Co-authored-by: Ritchie Martori <ritchie@voxel51.com> Co-authored-by: imanjra <ibrahim@voxel51.com> Co-authored-by: brimoor <brimoor@umich.edu> Co-authored-by: Brian Moore <brian@voxel51.com>
shalevy1 · Nov 8, 2022 · 4e64ee7 · 4e64ee7
1 parent f0a0c7d
commit 4e64ee7
Show file tree

Hide file tree

Showing 109 changed files with 3,622 additions and 1,411 deletions.
diff --git a/.github/workflows/build-db.yml b/.github/workflows/build-db.yml
@@ -116,13 +116,8 @@ jobs:
         env:
           RELEASE_TAG: ${{ github.ref }}
         run: |
-          if [[ $RELEASE_TAG =~ ^refs\/tags\/db-v.*-rc\..*$ ]]; then
-             echo "TWINE_PASSWORD=${{ secrets.FIFTYONE_TEST_PYPI_TOKEN }}" >> $GITHUB_ENV
-             echo "TWINE_REPOSITORY=testpypi" >> $GITHUB_ENV
-          else
-             echo "TWINE_PASSWORD=${{ secrets.FIFTYONE_PYPI_TOKEN }}" >> $GITHUB_ENV
-             echo "TWINE_REPOSITORY=pypi" >> $GITHUB_ENV
-          fi
+          echo "TWINE_PASSWORD=${{ secrets.FIFTYONE_PYPI_TOKEN }}" >> $GITHUB_ENV
+          echo "TWINE_REPOSITORY=pypi" >> $GITHUB_ENV
       - name: Upload to pypi
         env:
           TWINE_USERNAME: __token__

diff --git a/.github/workflows/build-desktop.yml b/.github/workflows/build-desktop.yml
@@ -98,13 +98,8 @@ jobs:
         env:
           RELEASE_TAG: ${{ github.ref }}
         run: |
-          if [[ $RELEASE_TAG =~ ^refs\/tags\/desktop-v.*-rc\..*$ ]]; then
-             echo "TWINE_PASSWORD=${{ secrets.FIFTYONE_TEST_PYPI_TOKEN }}" >> $GITHUB_ENV
-             echo "TWINE_REPOSITORY=testpypi" >> $GITHUB_ENV
-          else
-             echo "TWINE_PASSWORD=${{ secrets.FIFTYONE_PYPI_TOKEN }}" >> $GITHUB_ENV
-             echo "TWINE_REPOSITORY=pypi" >> $GITHUB_ENV
-          fi
+          echo "TWINE_PASSWORD=${{ secrets.FIFTYONE_PYPI_TOKEN }}" >> $GITHUB_ENV
+          echo "TWINE_REPOSITORY=pypi" >> $GITHUB_ENV
       - name: Upload to pypi
         env:
           TWINE_USERNAME: __token__

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -203,13 +203,8 @@ jobs:
         env:
           RELEASE_TAG: ${{ github.ref }}
         run: |
-          if [[ $RELEASE_TAG =~ ^refs\/tags\/v.*-rc\..*$ ]]; then
-             echo "TWINE_PASSWORD=${{ secrets.FIFTYONE_TEST_PYPI_TOKEN }}" >> $GITHUB_ENV
-             echo "TWINE_REPOSITORY=testpypi" >> $GITHUB_ENV
-          else
-             echo "TWINE_PASSWORD=${{ secrets.FIFTYONE_PYPI_TOKEN }}" >> $GITHUB_ENV
-             echo "TWINE_REPOSITORY=pypi" >> $GITHUB_ENV
-          fi
+          echo "TWINE_PASSWORD=${{ secrets.FIFTYONE_PYPI_TOKEN }}" >> $GITHUB_ENV
+          echo "TWINE_REPOSITORY=pypi" >> $GITHUB_ENV
       - name: Upload to pypi
         env:
           TWINE_USERNAME: __token__

diff --git a/app/packages/app/src/index.tsx b/app/packages/app/src/index.tsx
@@ -1,5 +1,6 @@
+import { ThemeProvider } from "@fiftyone/components";
 import { Loading, Setup, makeRoutes } from "@fiftyone/core";
-import { useScreenshot } from "@fiftyone/state";
+import { useRefresh, useScreenshot } from "@fiftyone/state";
 import { ThemeProvider } from "@fiftyone/components";
 import { getEventSource, toCamelCase } from "@fiftyone/utilities";
 import React, { useEffect, useRef, useState } from "react";
@@ -13,9 +14,9 @@ import {
   refresher,
   State,
   stateSubscription,
-  useRefresh,
   useReset,
   useClearModal,
+  useScreenshot,
 } from "@fiftyone/state";
 import { usePlugins } from "@fiftyone/plugins";
 import { useRouter } from "@fiftyone/state";
@@ -40,14 +41,8 @@ const App: React.FC = ({}) => {
   const readyStateRef = useRef<AppReadyState>();
   readyStateRef.current = readyState;
   const subscription = useRecoilValue(stateSubscription);
+  const { context, environment } = useRouter(makeRoutes, []);
   const refresh = useRefresh();
-  const refreshRouter = useRecoilValue(refresher);
-
-  const { context, environment } = useRouter(makeRoutes, [
-    readyState === AppReadyState.CLOSED,
-    refreshRouter,
-  ]);
-
   const contextRef = useRef(context);
   contextRef.current = context;
   const reset = useReset();

diff --git a/app/packages/components/src/components/Loading/Loading.module.css b/app/packages/components/src/components/Loading/Loading.module.css
@@ -19,3 +19,25 @@
   font-size: 1.5rem;
   font-weight: bold;
 }
+
+.loading.ellipsis > div:after {
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: bottom;
+  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
+  animation: ellipsis steps(4, end) 900ms infinite;
+  content: "\2026"; /* ascii code for the ellipsis character */
+  width: 0px;
+}
+
+@keyframes ellipsis {
+  to {
+    width: 1.25em;
+  }
+}
+
+@-webkit-keyframes ellipsis {
+  to {
+    width: 1.25em;
+  }
+}
diff --git a/app/packages/components/src/components/Loading/Loading.tsx b/app/packages/components/src/components/Loading/Loading.tsx
@@ -1,12 +1,19 @@
 import React from "react";
+import classNames from "classnames";
 
-import { loading } from "./Loading.module.css";
+import { ellipsis, loading } from "./Loading.module.css";
 
 const Loading: React.FC<
-  React.PropsWithChildren<{ style?: React.CSSProperties }>
-> = ({ children, style }) => {
+  React.PropsWithChildren<{
+    style?: React.CSSProperties;
+    ellipsisAnimation?: boolean;
+  }>
+> = ({ children, ellipsisAnimation = false, style }) => {
   return (
-    <div className={loading} style={style}>
+    <div
+      className={ellipsisAnimation ? classNames(ellipsis, loading) : loading}
+      style={style}
+    >
       <div>{children}</div>
     </div>
   );

diff --git a/app/packages/components/src/components/RouteRenderer/RouteRenderer.tsx b/app/packages/components/src/components/RouteRenderer/RouteRenderer.tsx
@@ -1,4 +1,4 @@
-import { Route, RouteData, RoutingContext } from "@fiftyone/state";
+import { Entry, Route, RouteData, RoutingContext } from "@fiftyone/state";
 import { Resource } from "@fiftyone/utilities";
 import React, {
   PropsWithChildren,
@@ -9,7 +9,7 @@ import React, {
 } from "react";
 import { PreloadedQuery } from "react-relay";
 import { OperationType } from "relay-runtime";
-
+import Loading from "../Loading";
 
 const RouteHandler = <T extends OperationType | undefined = OperationType>(
   props: PropsWithChildren<{
@@ -23,26 +23,55 @@ const RouteHandler = <T extends OperationType | undefined = OperationType>(
   const Component = props.component.read();
   const { routeData, prepared } = props;
   return (
-    <Suspense fallback={null}>
-      <Component
-        routeData={routeData}
-        prepared={prepared && prepared.read()}
-        children={props.children}
-      />
-    </Suspense>
+    <Component
+      routeData={routeData}
+      prepared={prepared && prepared.read()}
+      children={props.children}
+    />
   );
 };
 
 const RouterRenderer: React.FC<{ router: RoutingContext }> = ({ router }) => {
   const [routeEntry, setRouteEntry] = useState(router.get());
+  const routeEntryRef = useRef(routeEntry);
+  routeEntryRef.current = routeEntry;
+  const [loadingEntry, setLoadingEntry] = useState<Entry<OperationType>>();
   useEffect(() => {
     const dispose = router.subscribe((nextEntry) => {
       setRouteEntry(nextEntry);
+      setLoadingEntry(routeEntryRef.current);
     });
+
     return () => dispose();
   }, [router]);
 
-  const reversedItems = [...routeEntry.entries].reverse();
+  return (
+    <Suspense
+      fallback={
+        loadingEntry ? (
+          <Routes routes={loadingEntry.entries} />
+        ) : (
+          <Loading>Pixelating...</Loading>
+        )
+      }
+    >
+      <Routes routes={routeEntry.entries} />
+    </Suspense>
+  );
+};
+
+const Routes = <T extends OperationType | undefined = OperationType>({
+  routes,
+}: {
+  routes: {
+    component: Resource<Route<T>>;
+    prepared?:
+      | Resource<PreloadedQuery<T extends undefined ? never : T>>
+      | undefined;
+    routeData?: RouteData<T>;
+  }[];
+}) => {
+  const reversedItems = [...routes].reverse();
 
   const firstItem = reversedItems[0];
   let routeComponent = (
@@ -64,7 +93,6 @@ const RouterRenderer: React.FC<{ router: RoutingContext }> = ({ router }) => {
       </RouteHandler>
     );
   }
-
   return <>{routeComponent}</>;
 };
 

diff --git a/app/packages/components/src/components/Selector/Selector.tsx b/app/packages/components/src/components/Selector/Selector.tsx
@@ -1,5 +1,11 @@
 import { motion, AnimatePresence } from "framer-motion";
-import React, { useLayoutEffect, useRef, useState } from "react";
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useCallback } from "react";
 import { Suspense } from "react";
 import Input from "react-input-autosize";
@@ -80,6 +86,13 @@ const Selector = <T extends unknown>({
   const valuesRef = useRef<T[]>([]);
   const [active, setActive] = useState<number>();
 
+  const onSelectWrapper = useMemo(() => {
+    return (value: T) => {
+      onSelect(value);
+      setEditing(false);
+    };
+  }, [onSelect]);
+
   const ref = useRef<HTMLInputElement | null>();
   const hovering = useRef(false);
 
@@ -150,9 +163,8 @@ const Selector = <T extends unknown>({
             const found = valuesRef.current
               .map((v) => toKey(v))
               .indexOf(search);
-            found >= 0 && onSelect(valuesRef.current[found]);
-            active !== undefined && onSelect(valuesRef.current[active]);
-            setEditing(false);
+            found >= 0 && onSelectWrapper(valuesRef.current[found]);
+            active !== undefined && onSelectWrapper(valuesRef.current[active]);
           }
         }}
         onKeyDown={(e) => {
@@ -200,8 +212,7 @@ const Selector = <T extends unknown>({
                   search={search}
                   useSearch={useSearch}
                   onSelect={(value) => {
-                    setEditing(false);
-                    onSelect(value);
+                    onSelectWrapper(value);
                   }}
                   component={component}
                   onResults={onResults}

diff --git a/app/packages/components/src/components/ThemeProvider/index.tsx b/app/packages/components/src/components/ThemeProvider/index.tsx
@@ -17,7 +17,6 @@ let theme = extendJoyTheme({
           button: "hsl(200, 0%, 90%)",
           header: "hsl(200, 0%, 100%)",
           input: "hsl(200, 0%, 98%)",
-          itemBackground: "hsl(200,0%,90%)",
           level1: "hsl(200, 0%, 95%)",
           level2: "hsl(200, 0%, 98%)",
           level3: "hsl(200, 0%, 95%)",
@@ -68,7 +67,6 @@ let theme = extendJoyTheme({
         background: {
           button: "hsl(200, 0%, 20%)",
           header: "hsl(200, 0%, 15%)",
-          itemBackground: "hsl(200,0%,20%)",
           body: "hsl(200, 0%, 15%)",
           looker: "hsl(200, 0%, 10%)",
           level1: "hsl(200, 0%, 20%)",

diff --git a/app/packages/core/src/Dataset.ts b/app/packages/core/src/Dataset.ts
@@ -24,6 +24,11 @@ const DatasetQuery = graphql`
         gridMediaField
         mediaFields
         plugins
+        sidebarGroups {
+          expanded
+          paths
+          name
+        }
       }
       sampleFields {
         ftype
@@ -96,6 +101,7 @@ const DatasetQuery = graphql`
           name
           paths
         }
+        sidebarMode
       }
       info
     }

diff --git a/app/packages/core/src/Root/Root.tsx b/app/packages/core/src/Root/Root.tsx
@@ -158,7 +158,7 @@ const Nav: React.FC<{ prepared: PreloadedQuery<RootQuery> }> = ({
   const context = useContext(RouterContext);
   const dataset = getDatasetName(context);
   const { mode, setMode } = useColorScheme();
-  const [theme, setTheme] = useRecoilState(fos.theme);
+  const [_, setTheme] = useRecoilState(fos.theme);
 
   return (
     <>
@@ -240,6 +240,7 @@ const Root: Route<RootQuery> = ({ children, prepared }) => {
           showLabel
           showSkeletons
           showTooltip
+          sidebarMode
           theme
           timezone
           useFrameNumber

diff --git a/app/packages/core/src/Root/__generated__/RootConfig_query.graphql.ts b/app/packages/core/src/Root/__generated__/RootConfig_query.graphql.ts