fixes and enhancements for modal spaces

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

@@ -554,18 +554,6 @@ const ModalActionsRowContainer = styled.div`
     opacity: 1;
     transition: opacity 0.1s ease-out;
   }
-
-  svg {
-    font-size: 14px;
-  }
-
-  > div {
-    max-height: 21px;
-
-    > div:first-child {
-      max-height: 21px;
-    }
-  }
 }`;
 
 const DraggableHandleIconContainer = styled.div`
@@ -750,7 +738,7 @@ export const ModalActionsRow = () => {
       handle={`.${MODAL_ACTION_BAR_HANDLE_CLASS}`}
       axis="x"
       defaultPosition={{ x: defaultXCoord ?? 0, y: 0 }}
-      onDrag={(_e, { x, y }) => {
+      onDrag={(_e, { x }) => {
         setDefaultXCoord(x);
       }}
     >

app/packages/core/src/components/Modal/Modal.tsx

@@ -9,7 +9,6 @@ import { ModalActionsRow } from "../Actions";
 import Sidebar from "../Sidebar";
 import { useLookerHelpers } from "./hooks";
 import { modalContext } from "./modal-context";
-import ModalNavigation from "./ModalNavigation";
 import { ModalSpace } from "./ModalSpace";
 import { TooltipInfo } from "./TooltipInfo";
 import { useModalSidebarRenderEntry } from "./use-sidebar-render-entry";
@@ -44,6 +43,7 @@ const SpacesContainer = styled.div`
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  z-index: 1501;
 `;
 
 const SidebarPanelBlendInDiv = styled.div`
@@ -77,7 +77,7 @@ const Modal = () => {
 
   const renderEntry = useModalSidebarRenderEntry();
 
-  const { jsonPanel, helpPanel, onNavigate } = useLookerHelpers();
+  const { jsonPanel, helpPanel } = useLookerHelpers();
 
   const select = fos.useSelectSample();
 
@@ -166,7 +166,7 @@ const Modal = () => {
   const screenParams = useMemo(() => {
     return isFullScreen
       ? { width: "100%", height: "100%" }
-      : { width: "95%", height: "90%", borderRadius: "3px" };
+      : { width: "95%", height: "calc(100% - 70px)", borderRadius: "8px" };
   }, [isFullScreen]);
 
   const activeLookerRef = useRef<fos.Lookers>();

app/packages/core/src/components/Modal/ModalNavigation.tsx

@@ -26,7 +26,7 @@ const Arrow = styled.span<{
   left: ${(props) => (props.$isRight ? "initial" : "0.75rem")};
   z-index: 99999;
   padding: 0.75rem;
-  bottom: 33vh;
+  bottom: 50%;
   width: 3rem;
   height: 3rem;
   background-color: var(--fo-palette-background-button);

app/packages/core/src/components/Modal/ModalSamplePlugin.tsx

@@ -4,9 +4,10 @@ import React, { Suspense, useEffect } from "react";
 import { useRecoilCallback, useRecoilValue, useSetRecoilState } from "recoil";
 import styled from "styled-components";
 import Group from "./Group";
-import { useModalContext } from "./hooks";
+import { useLookerHelpers, useModalContext } from "./hooks";
 import { Sample2D } from "./Sample2D";
 import { Sample3d } from "./Sample3d";
+import ModalNavigation from "./ModalNavigation";
 
 const ContentColumn = styled.div`
   display: flex;
@@ -27,6 +28,10 @@ export const ModalSample = React.memo(() => {
   const setIsTooltipLocked = useSetRecoilState(fos.isTooltipLocked);
   const setTooltipDetail = useSetRecoilState(fos.tooltipDetail);
 
+  const sidebarwidth = useRecoilValue(fos.sidebarWidth(true));
+  const isSidebarVisible = useRecoilValue(fos.sidebarVisible(true));
+  const { onNavigate } = useLookerHelpers();
+
   const tooltipEventHandler = useRecoilCallback(
     ({ snapshot, set }) =>
       (e) => {
@@ -72,6 +77,9 @@ export const ModalSample = React.memo(() => {
 
   return (
     <ContentColumn>
+      <ModalNavigationContainer>
+        <ModalNavigation onNavigate={onNavigate} />
+      </ModalNavigationContainer>
       <ErrorBoundary onReset={() => {}}>
         <Suspense>
           {isGroup ? <Group /> : is3D ? <Sample3d /> : <Sample2D />}
@@ -80,3 +88,13 @@ export const ModalSample = React.memo(() => {
     </ContentColumn>
   );
 });
+
+const ModalNavigationContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+`;

app/packages/core/src/components/Sidebar/Sidebar.tsx

@@ -733,6 +733,7 @@ const InteractiveSidebar = ({
           scroll.current = target.scrollTop;
           down.current && animate(last.current);
         }}
+        style={modal ? { maxHeight: "calc(100% - 28px)" } : {}}
       >
         <Container
           className={style.sidebar}

app/packages/core/src/plugins/SchemaIO/components/DashboardView.tsx

@@ -22,7 +22,7 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import React, { forwardRef, useCallback, useMemo, useState } from "react";
+import { forwardRef, useCallback, useMemo, useState } from "react";
 import GridLayout from "react-grid-layout";
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
@@ -99,7 +99,6 @@ const LayoutPopover = ({
 }) => {
   const open = Boolean(anchorEl);
   const id = open ? "simple-popover" : undefined;
-  const theme = useTheme();
 
   return (
     <Popover
@@ -111,6 +110,7 @@ const LayoutPopover = ({
         vertical: "bottom",
         horizontal: "left",
       }}
+      sx={{ zIndex: (theme) => theme.zIndex.tooltip }}
     >
       <Box
         sx={{

app/packages/core/src/plugins/modal-sample.tsx

@@ -2,6 +2,7 @@ import { PluginComponentType, registerComponent } from "@fiftyone/plugins";
 import { SAMPLE_MODAL_PLUGIN_NAME } from "../components/Modal/modal-spaces-utils";
 import { ModalSample } from "../components/Modal/ModalSamplePlugin";
 import { BUILT_IN_PANEL_PRIORITY_CONST } from "@fiftyone/utilities";
+import { ViewInAr } from "@mui/icons-material";
 
 registerComponent({
   name: SAMPLE_MODAL_PLUGIN_NAME,
@@ -13,4 +14,5 @@ registerComponent({
     priority: BUILT_IN_PANEL_PRIORITY_CONST,
   },
   activator: () => true,
+  Icon: ViewInAr,
 });

app/packages/operators/src/built-in-operators.ts

@@ -1,7 +1,6 @@
 import {
   Layout,
   SpaceNode,
-  usePanelState,
   usePanelTitle,
   usePanels,
   useSetPanelStateById,
@@ -12,6 +11,7 @@
 import * as types from "./types";
 
 import { useTrackEvent } from "@fiftyone/analytics";
+import { setPathUserUnchanged } from "@fiftyone/core/src/plugins/SchemaIO/hooks";
 import { LOAD_WORKSPACE_OPERATOR } from "@fiftyone/spaces/src/components/Workspaces/constants";
 import { toSlug } from "@fiftyone/utilities";
 import copyToClipboard from "copy-to-clipboard";
@@ -31,7 +31,6 @@
 } from "./operators";
 import { useShowOperatorIO } from "./state";
 import usePanelEvent from "./usePanelEvent";
-import { setPathUserUnchanged } from "@fiftyone/core/src/plugins/SchemaIO/hooks";
 
 //
 // BUILT-IN OPERATORS
@@ -811,7 +810,7 @@
       unlisted: true,
     });
   }
   useHooks(ctx: ExecutionContext): {} {
     return { updatePanelState: useUpdatePanelStatePartial() };
   }
   async execute(ctx: ExecutionContext): Promise<void> {
@@ -1029,8 +1028,6 @@
     return new types.Property(inputs);
   }
   useHooks(ctx: ExecutionContext): {} {
-    const panelId = ctx.getCurrentPanelId();
-    const [panelState] = usePanelState(panelId);
     const triggerEvent = usePanelEvent();
     return { triggerEvent };
   }

app/packages/operators/src/useCustomPanelHooks.ts

@@ -2,15 +2,15 @@ import { debounce, merge } from "lodash";
 import { useCallback, useEffect, useMemo } from "react";
 
 import { usePanelState, useSetCustomPanelState } from "@fiftyone/spaces";
+import { useUnboundState } from "@fiftyone/state";
 import {
   PANEL_STATE_CHANGE_DEBOUNCE,
   PANEL_STATE_PATH_CHANGE_DEBOUNCE,
 } from "./constants";
 import { executeOperator } from "./operators";
-import { useGlobalExecutionContext } from "./state";
+import { useCurrentSample, useGlobalExecutionContext } from "./state";
 import usePanelEvent from "./usePanelEvent";
 import { memoizedDebounce } from "./utils";
-import { useUnboundState } from "@fiftyone/state";
 
 export interface CustomPanelProps {
   panelId: string;
@@ -74,6 +74,7 @@ export function useCustomPanelHooks(props: CustomPanelProps): CustomPanelHooks {
   });
   const panelSchema = panelStateLocal?.schema;
   const ctx = useGlobalExecutionContext();
+  const currentSample = useCurrentSample();
   const isLoaded: boolean = useMemo(() => {
     return panelStateLocal?.loaded;
   }, [panelStateLocal?.loaded]);
@@ -119,7 +120,7 @@ export function useCustomPanelHooks(props: CustomPanelProps): CustomPanelHooks {
   useCtxChangePanelEvent(
     isLoaded,
     panelId,
-    ctx.currentSample,
+    currentSample,
     props.onChangeCurrentSample
   );
   useCtxChangePanelEvent(

app/packages/spaces/src/components/AddPanelButton.tsx

@@ -2,8 +2,8 @@ import { IconButton, Popout, scrollable } from "@fiftyone/components";
 import { PluginComponentRegistration } from "@fiftyone/plugins";
 import * as fos from "@fiftyone/state";
 import { Add } from "@mui/icons-material";
-import { useMemo, useRef, useState } from "react";
-import { useRecoilCallback } from "recoil";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useRecoilValue } from "recoil";
 import { usePanels, useSpaceNodes } from "../hooks";
 import { AddPanelButtonProps } from "../types";
 import { panelsCompareFn } from "../utils/sort";
@@ -12,23 +12,16 @@ import { AddPanelButtonContainer } from "./StyledElements";
 
 export default function AddPanelButton({ node, spaceId }: AddPanelButtonProps) {
   const [open, setOpen] = useState(false);
-  const panelsPredicate = useRecoilCallback(
-    ({ snapshot }) =>
-      (panel: PluginComponentRegistration) => {
-        const isModalActive = snapshot
-          .getLoadable(fos.isModalActive)
-          .valueOrThrow();
-        const surface = panel.panelOptions?.surfaces;
-
-        if (isModalActive) {
-          return surface === "modal" || surface === "grid modal";
-        }
-
-        if (surface === "modal") return false;
-
-        return true;
-      },
-    []
+  const isModalActive = useRecoilValue(fos.isModalActive);
+  const panelsPredicate = useCallback(
+    (panel: PluginComponentRegistration) => {
+      const surface = panel.panelOptions?.surfaces;
+      if (isModalActive) {
+        return surface === "modal" || surface === "grid modal";
+      }
+      return surface !== "modal";
+    },
+    [isModalActive]
   );
   const panels = usePanels(panelsPredicate);
   const spaceNodes = useSpaceNodes(spaceId);

app/packages/spaces/src/components/Panel.tsx

@@ -1,11 +1,12 @@
 import { CenteredStack, scrollable } from "@fiftyone/components";
 import * as fos from "@fiftyone/state";
-import React, { useMemo } from "react";
-import { useRecoilValue } from "recoil";
+import React, { useEffect, useMemo } from "react";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 import { PANEL_LOADING_TIMEOUT } from "../constants";
 import { PanelContext } from "../contexts";
 import { useReactivePanel } from "../hooks";
 import SpaceNode from "../SpaceNode";
+import { panelIdToScopeAtom } from "../state";
 import { PanelProps } from "../types";
 import PanelNotFound from "./PanelNotFound";
 import PanelSkeleton from "./PanelSkeleton";
@@ -37,6 +38,12 @@ function Panel(props: PanelProps) {
   const panel = useReactivePanel(panelName);
   const dimensions = fos.useDimensions();
   const pending = fos.useTimeout(PANEL_LOADING_TIMEOUT);
+  const setPanelIdToScope = useSetRecoilState(panelIdToScopeAtom);
+  const scope = isModalPanel ? "modal" : "grid";
+
+  useEffect(() => {
+    setPanelIdToScope((ids) => ({ ...ids, [node.id]: scope }));
+  }, [scope, setPanelIdToScope, node.id]);
 
   const panelContentTestId = `panel-content-${panelName}`;
   if (!panel) {
@@ -63,7 +70,7 @@ function Panel(props: PanelProps) {
       className={scrollable}
       ref={dimensions.ref}
     >
-      <PanelContext.Provider value={{ node }}>
+      <PanelContext.Provider value={{ node, scope }}>
         {isModalPanel ? (
           <ModalPanelComponent
             component={panel.component}

app/packages/spaces/src/components/StyledElements.tsx

@@ -12,20 +12,15 @@ export const PanelContainer = styled.div`
   overflow: hidden;
 `;
 
-export const PanelTabs = styled.div<{ $isModal?: boolean }>`
+export const PanelTabs = styled.div`
   display: flex;
   background: var(--fo-palette-background-header);
   padding-bottom: 0px;
-  position: ${(props) => (props.$isModal ? "absolute" : "initial")};
-  height: ${(props) => (props.$isModal ? "2em" : "initial")};
-  z-index: 100001;
-  width: 100%;
 `;
 
-export const StyledPanel = styled.div<{ $isModalPanel?: boolean }>`
+export const StyledPanel = styled.div`
   width: 100%;
-  height: ${(props) => (props.$isModalPanel ? "100%" : "calc(100% - 28px)")};
-  padding: ${(props) => (props.$isModalPanel ? "2.2em 5px 0 5px" : "initial")};
+  height: calc(100% - 28px);
   overflow: auto;
   background: var(--fo-palette-background-mediaSpace);
 `;

app/packages/spaces/src/contexts.ts

@@ -1,4 +1,6 @@
 import { createContext } from "react";
 import SpaceNode from "./SpaceNode";
 
-export const PanelContext = createContext<{ node?: SpaceNode }>({});
+export const PanelContext = createContext<PanelContextType>({});
+
+type PanelContextType = { node?: SpaceNode; scope?: string };