Merge pull request #4032 from voxel51/merge/v0.23.3-to-main

Merge/v0.23.3 to main

.github/workflows/publish.yml

@@ -18,7 +18,7 @@ jobs:
 
   publish:
     runs-on: ubuntu-latest
-    needs: [build, e2e, test]
+    needs: [build, test]
     steps:
       - name: Download dist
         uses: actions/download-artifact@v3
@@ -42,7 +42,7 @@ jobs:
           python3 -m twine upload dist/*
 
   build-image:
-    needs: [build, e2e, test]
+    needs: [build, test]
     runs-on: ubuntu-20.04
     steps:
       - name: Clone fiftyone

app/packages/app/src/routing/matchPath.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { matchPath } from "./matchPath";
+
+describe("matches with proxy", () => {
+  const RESULT = {
+    path: "/datasets/:name",
+    url: "/datasets/my-dataset",
+    variables: { name: "my-dataset" },
+  };
+
+  const matchWithProxy = (search: string) =>
+    matchPath(
+      "/my/proxy/datasets/my-dataset",
+      { path: "/datasets/:name" },
+      search,
+      {}
+    );
+
+  it("resolves with proxy", () => {
+    expect(matchWithProxy("?proxy=/my/proxy")).toEqual(RESULT);
+  });
+
+  it("resolves with proxy, trailing slash", () => {
+    expect(matchWithProxy("?proxy=/my/proxy/")).toEqual(RESULT);
+  });
+
+  it("resolves with encoded proxy", () => {
+    expect(matchWithProxy("?proxy=%20my%20proxy")).toEqual(RESULT);
+  });
+
+  it("resolves with encoded proxy, trailing slash", () => {
+    expect(matchWithProxy("?proxy=%20my%20proxy%20")).toEqual(RESULT);
+  });
+});

app/packages/app/src/routing/matchPath.ts

@@ -54,9 +54,10 @@ export const matchPath = <T extends OperationType>(
 
   const params = new URLSearchParams(search);
 
-  const proxy = params.get("proxy");
+  const proxy = decodeURIComponent(params.get("proxy") || "");
+
   if (proxy) {
-    pathname = pathname.replace(proxy, "").replace("//", "/");
+    pathname = `/${pathname.slice(proxy.length)}`.replace("//", "/");
   }
 
   const { regexp, keys } = compilePath(path);

app/packages/app/src/useEventSource.ts

@@ -4,10 +4,11 @@ import { MutableRefObject, useEffect, useMemo, useRef } from "react";
 import { useErrorHandler } from "react-error-boundary";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { Queries } from "./makeRoutes";
-import { RoutingContext, matchPath } from "./routing";
+import { RoutingContext } from "./routing";
 import useEvents from "./useEvents";
 import { AppReadyState } from "./useEvents/registerEvent";
 import { appReadyState } from "./useEvents/utils";
+import { getDatasetName, getSavedViewName } from "./utils";
 
 const useEventSource = (
   router: RoutingContext<Queries>,
@@ -52,8 +53,8 @@ const useEventSource = (
       controller.signal,
       {
         initializer: {
-          dataset: getDatasetName(location.pathname),
-          view: getSavedViewName(location.search),
+          dataset: getDatasetName(),
+          view: getSavedViewName(),
         },
         subscription,
         events: subscriptions,
@@ -77,30 +78,3 @@ const useEventSource = (
 };
 
 export default useEventSource;
-
-export const getDatasetName = (pathname: string) => {
-  const result = matchPath(
-    pathname,
-    {
-      path: "/datasets/:name",
-    },
-    "",
-    {}
-  );
-
-  if (result) {
-    return decodeURIComponent(result.variables.name);
-  }
-
-  return null;
-};
-
-const getSavedViewName = (search: string) => {
-  const params = new URLSearchParams(search);
-  const viewName = params.get("view");
-  if (viewName) {
-    return decodeURIComponent(viewName);
-  }
-
-  return null;
-};

app/packages/app/src/utils.ts

@@ -62,7 +62,7 @@ export function resolveURL(params: {
   }
 
   // go to dataset
-  return `${path}/datasets/${encodeURIComponent(
-    params.nextDataset
-  )}${newSearch}`;
+  return `${
+    path.endsWith("/") ? path.slice(0, -1) : path
+  }/datasets/${encodeURIComponent(params.nextDataset)}${newSearch}`;
 }

app/packages/components/package.json

@@ -52,7 +52,6 @@
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
         "@fiftyone/state": "*",
-        "@mui/joy": "^5.0.0-beta.11",
         "@mui/material": "^5.9.0",
         "@storybook/addon-docs": "^7.5.0",
         "classnames": "^2.3.1",

app/packages/components/src/components/Results/Results.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useLayoutEffect, useRef } from "react";
+import React, { useEffect, useLayoutEffect, useRef } from "react";
 import style from "./Results.module.css";
 
 export interface ResultProps<T> {
@@ -39,6 +39,14 @@ export function Result<T>({
   component,
 }: ResultProps<T>) {
   const Component = component;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const elem = ref.current;
+    if (active && elem) {
+      elem.scrollIntoView({ block: "center" });
+    }
+  }, [active]);
 
   const classes = active ? [style.active, style.result] : [style.result];
 
@@ -47,6 +55,7 @@ export function Result<T>({
       data-cy={`selector-result-${result}`}
       onClick={onClick}
       className={classNames(...classes)}
+      ref={ref}
     >
       <Component value={result} />
     </div>
@@ -105,7 +114,7 @@ function Results<T>({
       </div>
       <div className={style.footer}>
         {!results && !!noResults && <>{noResults}</>}
-        {total && results?.length && (
+        {!!total && !!results?.length && (
           <>
             {results.length} of {total.toLocaleString()}
           </>