Move point cloud plugin and settings

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

@@ -232,6 +232,7 @@ const Root: Route<RootQuery> = ({ children, prepared }) => {
           gridZoom
           loopVideos
           notebookHeight
+          plugins
           showConfidence
           showIndex
           showLabel

app/packages/app/src/components/Actions/Options.tsx

@@ -3,7 +3,7 @@ import { Autorenew, Check } from "@material-ui/icons";
 import { constSelector, useRecoilState, useRecoilValue } from "recoil";
 
 import Checkbox from "../Common/Checkbox";
-import { PopoutSectionTitle, TabOption } from "../utils";
+import { PopoutSectionTitle, TabOption } from "@fiftyone/components";
 
 import { Button } from "../utils";
 import Popout from "./Popout";

app/packages/app/src/components/Actions/Similar.tsx

@@ -20,13 +20,12 @@ import Checkbox from "../Common/Checkbox";
 import Input from "../Common/Input";
 import RadioGroup from "../Common/RadioGroup";
 import { Button } from "../utils";
-import { PopoutSectionTitle } from "../utils";
 
 import { ActionOption } from "./Common";
 import Popout from "./Popout";
 import { getFetchFunction, toSnakeCase } from "@fiftyone/utilities";
 import { useErrorHandler } from "react-error-boundary";
-import { useTheme } from "@fiftyone/components";
+import { useTheme, PopoutSectionTitle } from "@fiftyone/components";
 import * as fos from "@fiftyone/state";
 
 const getQueryIds = async (snapshot: Snapshot, brainKey?: string) => {

app/packages/app/src/components/Actions/Tagger.tsx

@@ -27,7 +27,7 @@ import {
   tagStatistics,
 } from "./utils";
 import { Button } from "../utils";
-import { PopoutSectionTitle } from "../utils";
+import { PopoutSectionTitle, TabOption } from "@fiftyone/components";
 import { FrameLooker, ImageLooker, VideoLooker } from "@fiftyone/looker";
 import { getFetchFunction, toSnakeCase } from "@fiftyone/utilities";
 import { useTheme } from "@fiftyone/components";

app/packages/app/src/components/Filters/Exclude.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { RecoilState, useRecoilState } from "recoil";
 
-import { TabOption } from "../utils";
+import { TabOption } from "@fiftyone/components";
 
 interface ExcludeOptionProps {
   excludeAtom: RecoilState<boolean>;

app/packages/app/src/components/Looker.tsx

@@ -388,6 +388,7 @@ interface LookerProps {
   onSelectLabel?: EventCallback;
   style?: React.CSSProperties;
   pinned: boolean;
+  isGroupMainView: boolean;
 }
 
 const Looker = ({
@@ -398,6 +399,7 @@ const Looker = ({
   onSelectLabel,
   style,
   pinned,
+  isGroupMainView,
 }: LookerProps) => {
   const [id] = useState(() => uuid());
   const sampleData = useRecoilValue(fos.modal);
@@ -455,6 +457,7 @@ const Looker = ({
     state: fos,
     dataset: useRecoilValue(fos.dataset),
     pinned,
+    isGroupMainView,
   };
   const pluginIsActive = plugin && plugin.activator(pluginAPI);
   const PluginComponent = pluginIsActive && plugin.component;

app/packages/app/src/components/SampleModal.tsx

@@ -198,6 +198,7 @@ const SampleModal = () => {
     : { width: "95%", height: "90%", borderRadius: "3px" };
   const wrapperRef = useRef();
   const queryRef = useRecoilValue(fos.paginateGroupQueryRef);
+  const isGroupMode = useRecoilValue(isGroup) && queryRef;
 
   return ReactDOM.createPortal(
     <ModalWrapper
@@ -215,8 +216,9 @@ const SampleModal = () => {
             onPrevious={index > 0 ? () => getIndex(index - 1) : undefined}
             onNext={() => getIndex(index + 1)}
             style={{ flex: 1 }}
+            isGroupMainView={isGroupMode}
           />
-          {useRecoilValue(isGroup) && queryRef && <Group queryRef={queryRef} />}
+          {isGroupMode && <Group queryRef={queryRef} />}
         </ContentColumn>
         {useRecoilValue(isPinned) && queryRef && (
           <PinnedLooker queryRef={queryRef} />