Nits, fixes

nerfstudio-project · Aug 4, 2023 · 2d61e3a · 2d61e3a
1 parent 796a5cd
commit 2d61e3a
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 62 deletions.
diff --git a/examples/11_colmap_visualizer.py b/examples/11_colmap_visualizer.py
@@ -33,7 +33,7 @@ def main(
         downsample_factor: Downsample factor for the images.
     """
     server = viser.ViserServer()
-    server.configure_theme(titlebar_content=None, control_type="fixed")
+    server.configure_theme(titlebar_content=None, control_layout="collapsible")
 
     # Load the colmap info.
     cameras = read_cameras_binary(colmap_path / "cameras.bin")

diff --git a/examples/13_theming.py b/examples/13_theming.py
@@ -38,7 +38,7 @@
 
 titlebar_theme = TitlebarConfig(buttons=buttons, image=image)
 
-server.configure_theme(titlebar_content=titlebar_theme, control_type="fixed")
+server.configure_theme(titlebar_content=titlebar_theme, control_layout="fixed")
 server.world_axes.visible = True
 
 while True:

diff --git a/viser/_message_api.py b/viser/_message_api.py
@@ -13,20 +13,18 @@
 import threading
 import time
 from concurrent.futures import ThreadPoolExecutor
-from typing import Any, cast, Dict, Optional, Tuple, TYPE_CHECKING, TypeVar, Union
+from typing import TYPE_CHECKING, Any, Dict, Optional, Tuple, TypeVar, Union, cast
 
 import imageio.v3 as iio
 import numpy as onp
 import numpy.typing as onpt
 import trimesh
 import trimesh.visual
-from typing_extensions import assert_never, Literal, ParamSpec, TypeAlias
+from typing_extensions import Literal, ParamSpec, TypeAlias, assert_never
 
 from . import _messages, infra, theme
-from ._gui_handles import _GuiHandleState, GuiHandle
+from ._gui_handles import GuiHandle, _GuiHandleState
 from ._scene_handles import (
-    _SupportsVisibility,
-    _TransformControlsState,
     CameraFrustumHandle,
     FrameHandle,
     ImageHandle,
@@ -35,6 +33,8 @@
     PointCloudHandle,
     SceneNodeHandle,
     TransformControlsHandle,
+    _SupportsVisibility,
+    _TransformControlsState,
 )
 
 if TYPE_CHECKING:
@@ -140,16 +140,14 @@ def configure_theme(
         self,
         *,
         titlebar_content: Optional[theme.TitlebarConfig] = None,
-        control_type: Union[
-            Literal["floating"], Literal["collapsible"], Literal["fixed"]
-        ] = "floating",
+        control_layout: Literal["floating", "collapsible", "fixed"] = "floating",
         dark_mode: bool = False,
     ) -> None:
         """Configure the viser front-end's visual appearance."""
         self._queue(
             _messages.ThemeConfigurationMessage(
                 titlebar_content=titlebar_content,
-                control_type=control_type,
+                control_layout=control_layout,
                 dark_mode=dark_mode,
             ),
         )

diff --git a/viser/_messages.py b/viser/_messages.py
@@ -424,5 +424,5 @@ class ThemeConfigurationMessage(Message):
     """Message from server->client to configure parts of the GUI."""
 
     titlebar_content: Optional[theme.TitlebarConfig]
-    control_type: Union[Literal["floating"], Literal["collapsible"], Literal["fixed"]]
+    control_layout: Literal["floating", "collapsible", "fixed"]
     dark_mode: bool
diff --git a/viser/client/src/App.tsx b/viser/client/src/App.tsx
@@ -39,12 +39,12 @@ type ViewerContextContents = {
   cameraControlRef: React.MutableRefObject<CameraControls | null>;
   nodeAttributesFromName: React.MutableRefObject<{
     [name: string]:
-    | undefined
-    | {
-      wxyz?: [number, number, number, number];
-      position?: [number, number, number];
-      visibility?: boolean;
-    };
+      | undefined
+      | {
+          wxyz?: [number, number, number, number];
+          position?: [number, number, number];
+          visibility?: boolean;
+        };
   }>;
 };
 export const ViewerContext = React.createContext<null | ViewerContextContents>(
@@ -90,7 +90,7 @@ function SingleViewer() {
     []
   );
 
-  const control_type = viewer.useGui((state) => state.theme.control_type);
+  const control_layout = viewer.useGui((state) => state.theme.control_layout);
   return (
     <MantineProvider
       withGlobalStyles
@@ -117,7 +117,7 @@ function SingleViewer() {
                 top: 0,
                 bottom: 0,
                 left: 0,
-                right: fixed_sidebar ? "20em" : 0,
+                right: control_layout === "fixed" ? "20em" : 0,
                 position: "absolute",
                 backgroundColor:
                   theme.colorScheme === "light" ? "#fff" : theme.colors.dark[9],
@@ -126,7 +126,7 @@ function SingleViewer() {
               <ViewerCanvas>{memoizedWebsocketInterface}</ViewerCanvas>
             </Box>
           </MediaQuery>
-          <ControlPanel control_type={control_type} />
+          <ControlPanel control_layout={control_layout} />
         </Box>
       </ViewerContext.Provider>
     </MantineProvider>

diff --git a/viser/client/src/ControlPanel/ControlPanel.tsx b/viser/client/src/ControlPanel/ControlPanel.tsx
@@ -32,7 +32,9 @@ function HideWhenCollapsed({ children }: { children: React.ReactNode }) {
   return expanded ? children : null;
 }
 
-export default function ControlPanel(props: { control_type: ThemeConfigurationMessage["control_type"] }) {
+export default function ControlPanel(props: {
+  control_layout: ThemeConfigurationMessage["control_layout"];
+}) {
   const theme = useMantineTheme();
   const useMobileView = useMediaQuery(`(max-width: ${theme.breakpoints.xs})`);
 
@@ -51,7 +53,7 @@ export default function ControlPanel(props: { control_type: ThemeConfigurationMe
         <Box
           sx={{
             position: "absolute",
-            right: props.control_type === 'collapsible' ? "2.5em" : "0.5em",
+            right: props.control_layout === "collapsible" ? "2.5em" : "0.5em",
             top: "50%",
             transform: "translateY(-50%)",
             display: showGenerated ? undefined : "none",
@@ -80,7 +82,10 @@ export default function ControlPanel(props: { control_type: ThemeConfigurationMe
           right: "0.5em",
           top: "50%",
           transform: "translateY(-50%)",
-          display: props.control_type === 'collapsible' && !useMobileView ? undefined : "none",
+          display:
+            props.control_layout === "collapsible" && !useMobileView
+              ? undefined
+              : "none",
           zIndex: 100,
         }}
       >
@@ -90,46 +95,36 @@ export default function ControlPanel(props: { control_type: ThemeConfigurationMe
             toggleCollapse();
           }}
         >
-          <Tooltip
-            label={
-              "Collapse Sidebar"
-            }
-          >
-            {<IconChevronRight />}
-          </Tooltip>
+          <Tooltip label={"Collapse Sidebar"}>{<IconChevronRight />}</Tooltip>
         </ActionIcon>
       </Box>
     </>
   );
 
   const collapsedView = (
-    <div style={{
-      borderTopLeftRadius: '15%',
-      borderBottomLeftRadius: '15%',
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-      backgroundColor:
-        theme.colorScheme == "dark"
-          ? theme.colors.dark[5]
-          : theme.colors.gray[2],
-      padding: '0.5em'
-    }}>
+    <div
+      style={{
+        borderTopLeftRadius: "15%",
+        borderBottomLeftRadius: "15%",
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        backgroundColor:
+          theme.colorScheme == "dark"
+            ? theme.colors.dark[5]
+            : theme.colors.gray[2],
+        padding: "0.5em",
+      }}
+    >
       <ActionIcon
         onClick={(evt) => {
           evt.stopPropagation();
           toggleCollapse();
         }}
       >
-        <Tooltip
-          label={
-            "Show Sidebar"
-          }
-        >
-          {<IconChevronLeft />}
-        </Tooltip>
+        <Tooltip label={"Show Sidebar"}>{<IconChevronLeft />}</Tooltip>
       </ActionIcon>
     </div>
-  )
+  );
 
   const panelContents = (
     <>
@@ -149,39 +144,42 @@ export default function ControlPanel(props: { control_type: ThemeConfigurationMe
         <BottomPanel.Contents>{panelContents}</BottomPanel.Contents>
       </BottomPanel>
     );
-  } else if (props.control_type !== 'floating') {
+  } else if (props.control_layout !== "floating") {
     return (
       <>
         <Box
           sx={{
             position: "absolute",
-            right: collapsed ? "0em" : '-2.5em',
+            right: collapsed ? "0em" : "-2.5em",
             top: "0.5em",
             transitionProperty: "right",
             transitionDuration: "0.5s",
-            transitionDelay: "0.25s"
+            transitionDelay: "0.25s",
           }}
         >
           {collapsedView}
         </Box>
         <Aside
           hiddenBreakpoint={"xs"}
+          fixed
           sx={(theme) => ({
             width: collapsed ? 0 : "20em",
+            bottom: 0,
+            overflow: "scroll",
             boxSizing: "border-box",
             borderLeft: "1px solid",
-            overflow: "visible",
             borderColor:
               theme.colorScheme == "light"
                 ? theme.colors.gray[4]
                 : theme.colors.dark[4],
-            transition: "width 0.5s 0s"
+            transition: "width 0.5s 0s",
           })}
         >
           <Box
             sx={() => ({
-              width: "20em"
-            })}>
+              width: "20em",
+            })}
+          >
             <Box
               p="sm"
               sx={(theme) => ({
@@ -199,7 +197,7 @@ export default function ControlPanel(props: { control_type: ThemeConfigurationMe
             </Box>
             {panelContents}
           </Box>
-        </Aside >
+        </Aside>
       </>
     );
   } else {
@@ -221,11 +219,13 @@ function ConnectionStatus() {
 
   const StatusIcon = connected ? IconCloudCheck : IconCloudOff;
   return (
-    <span style={{ display: 'flex', alignItems: 'center', width: 'max-content' }}>
+    <span
+      style={{ display: "flex", alignItems: "center", width: "max-content" }}
+    >
       <StatusIcon
         color={connected ? "#0b0" : "#b00"}
         style={{
-          transform: 'translateY(-0.05em)',
+          transform: "translateY(-0.05em)",
           width: "1.2em",
           height: "1.2em",
         }}

diff --git a/viser/client/src/ControlPanel/GuiState.tsx b/viser/client/src/ControlPanel/GuiState.tsx
@@ -55,7 +55,7 @@ const cleanGuiState: GuiState = {
   theme: {
     type: "ThemeConfigurationMessage",
     titlebar_content: null,
-    control_type: 'floating'
+    control_layout: 'floating',
     dark_mode: false,
   },
   label: "",

diff --git a/viser/client/src/WebsocketMessages.tsx b/viser/client/src/WebsocketMessages.tsx
@@ -320,7 +320,7 @@ export interface ThemeConfigurationMessage {
       href: string | null;
     } | null;
   } | null;
-  control_type: "floating" | "collapsible" | "fixed";
+  control_layout: "floating" | "collapsible" | "fixed";
   dark_mode: boolean;
 }