Fix overflow artifacts for scene tree table (#322)

* Fix overflow artifacts for scene tree table * Remove unused import
nerfstudio-project · Nov 9, 2024 · 917f228 · 917f228
1 parent d9c7006
commit 917f228
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 23 deletions.
diff --git a/src/viser/client/src/ControlPanel/SceneTreeTable.css.ts b/src/viser/client/src/ControlPanel/SceneTreeTable.css.ts
@@ -5,8 +5,14 @@ export const tableWrapper = style({
   border: "1px solid",
   borderColor: vars.colors.defaultBorder,
   borderRadius: vars.radius.xs,
+  padding: "0.1em 0",
+  overflowX: "auto",
+  display: "flex",
+  flexDirection: "column",
+  gap: "0",
 });
-export const icon = style({
+
+export const caretIcon = style({
   opacity: 0.5,
   height: "1em",
   width: "1em",
@@ -16,8 +22,8 @@ export const icon = style({
 export const tableRow = style({
   display: "flex",
   alignItems: "center",
-  gap: "0.4em",
+  gap: "0.2em",
   padding: "0 0.25em",
-  lineHeight: "2.25em",
+  lineHeight: "2em",
   fontSize: "0.875em",
 });
diff --git a/src/viser/client/src/ControlPanel/SceneTreeTable.tsx b/src/viser/client/src/ControlPanel/SceneTreeTable.tsx
@@ -1,17 +1,13 @@
 import { ViewerContext } from "../App";
-import { Box, Stack, Tooltip } from "@mantine/core";
+import { Box, ScrollArea, Tooltip } from "@mantine/core";
 import {
   IconCaretDown,
   IconCaretRight,
   IconEye,
   IconEyeOff,
 } from "@tabler/icons-react";
 import React from "react";
-import {
-  icon as caretIcon,
-  tableRow,
-  tableWrapper,
-} from "./SceneTreeTable.css";
+import { caretIcon, tableRow, tableWrapper } from "./SceneTreeTable.css";
 import { useDisclosure } from "@mantine/hooks";
 
 /* Table for seeing an overview of the scene tree, toggling visibility, etc. * */
@@ -21,7 +17,7 @@ export default function SceneTreeTable() {
     (state) => state.nodeFromName[""]!.children,
   );
   return (
-    <Stack className={tableWrapper} style={{ padding: "0.1em 0" }} gap={0}>
+    <ScrollArea className={tableWrapper}>
       {childrenName.map((name) => (
         <SceneTreeTableRow
           nodeName={name}
@@ -30,7 +26,7 @@ export default function SceneTreeTable() {
           indentCount={0}
         />
       ))}
-    </Stack>
+    </ScrollArea>
   );
 }
 
@@ -101,18 +97,22 @@ const SceneTreeTableRow = React.memo(function SceneTreeTableRow(props: {
             <IconCaretRight className={caretIcon} />
           )}
         </Box>
-        <Tooltip label="Override visibility">
-          <VisibleIcon
-            style={{
-              cursor: "pointer",
-              opacity: isVisibleEffective ? 0.85 : 0.25,
-            }}
-            onClick={(evt) => {
-              evt.stopPropagation();
-              setOverrideVisibility(props.nodeName, !isVisible);
-            }}
-          />
-        </Tooltip>
+        <Box style={{ width: "1.5em", height: "1.5em" }}>
+          <Tooltip label="Override visibility">
+            <VisibleIcon
+              style={{
+                cursor: "pointer",
+                opacity: isVisibleEffective ? 0.85 : 0.25,
+                width: "1.5em",
+                height: "1.5em",
+              }}
+              onClick={(evt) => {
+                evt.stopPropagation();
+                setOverrideVisibility(props.nodeName, !isVisible);
+              }}
+            />
+          </Tooltip>
+        </Box>
         <Box>
           {props.nodeName
             .split("/")