From 102a1bb2a3374d841b854ee6009d8d324cd20c80 Mon Sep 17 00:00:00 2001
From: Brent Yi <yibrenth@gmail.com>
Date: Sat, 9 Nov 2024 23:56:49 -0800
Subject: [PATCH] Polish scene tree table (#324)

* Polish scene tree table

* Comment cleanup

* remove color test

* eslint
---
 .../client/src/ControlPanel/ControlPanel.tsx  |   4 +-
 .../src/ControlPanel/SceneTreeTable.css.ts    |  10 +-
 .../src/ControlPanel/SceneTreeTable.tsx       | 135 ++++++++++--------
 .../src/ControlPanel/ServerControls.tsx       |   3 +-
 4 files changed, 85 insertions(+), 67 deletions(-)

diff --git a/src/viser/client/src/ControlPanel/ControlPanel.tsx b/src/viser/client/src/ControlPanel/ControlPanel.tsx
index 920d3077..6a143de2 100644
--- a/src/viser/client/src/ControlPanel/ControlPanel.tsx
+++ b/src/viser/client/src/ControlPanel/ControlPanel.tsx
@@ -42,6 +42,8 @@ import SidebarPanel from "./SidebarPanel";
 // Must match constant in Python.
 const ROOT_CONTAINER_ID = "root";
 
+const MemoizedGeneratedGuiContainer = React.memo(GeneratedGuiContainer);
+
 export default function ControlPanel(props: {
   control_layout: ThemeConfigurationMessage["control_layout"];
 }) {
@@ -99,7 +101,7 @@ export default function ControlPanel(props: {
         <ServerControls />
       </Collapse>
       <Collapse in={showGenerated && !showSettings}>
-        <GeneratedGuiContainer containerUuid={ROOT_CONTAINER_ID} />
+        <MemoizedGeneratedGuiContainer containerUuid={ROOT_CONTAINER_ID} />
       </Collapse>
     </>
   );
diff --git a/src/viser/client/src/ControlPanel/SceneTreeTable.css.ts b/src/viser/client/src/ControlPanel/SceneTreeTable.css.ts
index 17f30303..8e25fecb 100644
--- a/src/viser/client/src/ControlPanel/SceneTreeTable.css.ts
+++ b/src/viser/client/src/ControlPanel/SceneTreeTable.css.ts
@@ -18,20 +18,14 @@ export const propsWrapper = style({
   padding: vars.spacing.xs,
   boxSizing: "border-box",
   margin: vars.spacing.xs,
-  marginTop: "0.1em",
+  marginTop: "0.2em",
+  marginBottom: "0.2em",
   overflowX: "auto",
   display: "flex",
   flexDirection: "column",
   gap: vars.spacing.xs,
 });
 
-export const caretIcon = style({
-  opacity: 0.5,
-  height: "1em",
-  width: "1em",
-  transform: "translateY(0.1em)",
-});
-
 export const editIconWrapper = style({
   opacity: "0",
 });
diff --git a/src/viser/client/src/ControlPanel/SceneTreeTable.tsx b/src/viser/client/src/ControlPanel/SceneTreeTable.tsx
index 2260fd5c..f8c01a79 100644
--- a/src/viser/client/src/ControlPanel/SceneTreeTable.tsx
+++ b/src/viser/client/src/ControlPanel/SceneTreeTable.tsx
@@ -7,9 +7,8 @@ import {
   IconDeviceFloppy,
   IconX,
 } from "@tabler/icons-react";
-import React, { Suspense } from "react";
+import React from "react";
 import {
-  caretIcon,
   editIconWrapper,
   propsWrapper,
   tableRow,
@@ -25,6 +24,8 @@ import {
   TextInput,
   Tooltip,
   ColorInput,
+  useMantineColorScheme,
+  useMantineTheme,
 } from "@mantine/core";
 
 function EditNodeProps({
@@ -108,35 +109,39 @@ function EditNodeProps({
       component="form"
       onSubmit={form.onSubmit(handleSubmit)}
     >
-      <Box
-        style={{
-          display: "flex",
-          alignItems: "center",
-        }}
-      >
-        <Box fw="500" style={{ flexGrow: "1" }} fz="sm">
-          {node.message.type
-            .replace("Message", "")
-            .replace(/([A-Z])/g, " $1")
-            .trim()}{" "}
-          Props
+      <Box>
+        <Box
+          style={{
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <Box fw="500" style={{ flexGrow: "1" }} fz="sm">
+            {node.message.type
+              .replace("Message", "")
+              .replace(/([A-Z])/g, " $1")
+              .trim()}{" "}
+            Props
+          </Box>
+          <Tooltip label={"Close props"}>
+            <IconX
+              style={{
+                cursor: "pointer",
+                width: "1em",
+                height: "1em",
+                display: "block",
+                opacity: "0.7",
+              }}
+              onClick={(evt) => {
+                evt.stopPropagation();
+                close();
+              }}
+            />
+          </Tooltip>
+        </Box>
+        <Box fz="xs" opacity="0.5">
+          {nodeName}
         </Box>
-        <Tooltip label={"Close props"}>
-          <IconX
-            style={{
-              cursor: "pointer",
-              width: "1em",
-              height: "1em",
-              display: "block",
-              color: "--mantine-color-error",
-              opacity: "0.7",
-            }}
-            onClick={(evt) => {
-              evt.stopPropagation();
-              close();
-            }}
-          />
-        </Tooltip>
       </Box>
       {Object.entries(props).map(([key, value]) => {
         if (value instanceof Uint8Array) {
@@ -267,16 +272,14 @@ export default function SceneTreeTable() {
   );
   return (
     <ScrollArea className={tableWrapper}>
-      <Suspense fallback={<div>Loading...</div>}>
-        {childrenName.map((name) => (
-          <SceneTreeTableRow
-            nodeName={name}
-            key={name}
-            isParentVisible={true}
-            indentCount={0}
-          />
-        ))}
-      </Suspense>
+      {childrenName.map((name) => (
+        <SceneTreeTableRow
+          nodeName={name}
+          key={name}
+          isParentVisible={true}
+          indentCount={0}
+        />
+      ))}
     </ScrollArea>
   );
 }
@@ -328,27 +331,56 @@ const SceneTreeTableRow = React.memo(function SceneTreeTableRow(props: {
   const [propsPanelOpened, { open: openPropsPanel, close: closePropsPanel }] =
     useDisclosure(false);
 
+  const colorScheme = useMantineColorScheme();
+  const theme = useMantineTheme();
+
   return (
     <>
       <Box
         className={tableRow}
         style={{
           cursor: expandable ? "pointer" : undefined,
-          marginLeft: (props.indentCount * 0.75).toString() + "em",
         }}
         onClick={expandable ? toggleExpanded : undefined}
         onMouseOver={() => setLabelVisibility(props.nodeName, true)}
         onMouseOut={() => setLabelVisibility(props.nodeName, false)}
       >
+        {new Array(props.indentCount).fill(null).map((_, i) => (
+          <Box
+            key={i}
+            style={{
+              borderLeft: "0.3em solid",
+              borderColor:
+                colorScheme.colorScheme == "dark"
+                  ? theme.colors.gray[7]
+                  : theme.colors.gray[2],
+              width: "0.2em",
+              marginLeft: "0.375em",
+              height: "2em",
+            }}
+          />
+        ))}
         <Box
           style={{
-            opacity: expandable ? 1 : 0.3,
+            opacity: expandable ? 0.7 : 0.1,
           }}
         >
           {expanded ? (
-            <IconCaretDown className={caretIcon} />
+            <IconCaretDown
+              style={{
+                height: "1em",
+                width: "1em",
+                transform: "translateY(0.1em)",
+              }}
+            />
           ) : (
-            <IconCaretRight className={caretIcon} />
+            <IconCaretRight
+              style={{
+                height: "1em",
+                width: "1em",
+                transform: "translateY(0.1em)",
+              }}
+            />
           )}
         </Box>
         <Box style={{ width: "1.5em", height: "1.5em" }}>
@@ -369,19 +401,8 @@ const SceneTreeTableRow = React.memo(function SceneTreeTableRow(props: {
           </Tooltip>
         </Box>
         <Box style={{ flexGrow: "1" }}>
-          {props.nodeName
-            .split("/")
-            .filter((part) => part.length > 0)
-            .map((part, index, all) => (
-              // We set userSelect to prevent users from accidentally
-              // selecting text when dragging over the hide/show icons.
-              <span key={index} style={{ userSelect: "none" }}>
-                <span style={{ opacity: "0.3" }}>
-                  {index === all.length - 1 ? "/" : `/${part}`}
-                </span>
-                {index === all.length - 1 ? part : ""}
-              </span>
-            ))}
+          <span style={{ opacity: "0.3" }}>/</span>
+          {props.nodeName.split("/").at(-1)}
         </Box>
         {!propsPanelOpened ? (
           <Box
diff --git a/src/viser/client/src/ControlPanel/ServerControls.tsx b/src/viser/client/src/ControlPanel/ServerControls.tsx
index 8af7ef01..38d7cd21 100644
--- a/src/viser/client/src/ControlPanel/ServerControls.tsx
+++ b/src/viser/client/src/ControlPanel/ServerControls.tsx
@@ -13,6 +13,8 @@ import { Stats } from "@react-three/drei";
 import React from "react";
 import SceneTreeTable from "./SceneTreeTable";
 
+const MemoizedTable = React.memo(SceneTreeTable);
+
 export default function ServerControls() {
   const viewer = React.useContext(ViewerContext)!;
   const [showStats, setShowStats] = React.useState(false);
@@ -22,7 +24,6 @@ export default function ServerControls() {
     event.currentTarget.blur();
     event.currentTarget.focus();
   }
-  const MemoizedTable = React.memo(SceneTreeTable);
 
   return (
     <>