chore: minor perf improvements

Author: adidahiya

packages/raga-web-app/src/components/audioPlayer/audioPlayer.module.scss

@@ -0,0 +1,4 @@
+.root {
+  position: relative;
+  height: 90px;
+}

packages/raga-web-app/src/components/audioPlayer/audioPlayer.tsx

@@ -6,6 +6,7 @@ import { useSelectedTrackFileURL } from "../../hooks";
 import useSelectedTrackDef from "../../hooks/useSelectedTrackDef";
 import { appStore } from "../../store/appStore";
 import EmptyState from "../common/emptyState";
+import styles from "./audioPlayer.module.scss";
 import { TrackBPMOverlay } from "./trackBPMOverlay";
 
 // TODO: reconsider if this lazy-loading is worth it...
@@ -36,7 +37,7 @@ export function AudioPlayer() {
   }
 
   return (
-    <Box pos="relative" h={90}>
+    <Box className={styles.root}>
       <Suspense fallback={<Skeleton width="100%" height="100%" />}>
         <AudioWaveform mediaURL={selectedFileURL} />
       </Suspense>

packages/raga-web-app/src/components/common/tree.tsx

@@ -55,6 +55,11 @@ export interface ControlledTreeProps<T> {
  * Notable differences from older tree implementations (like Blueprint's Tree component):
  * - Node value string represent not just the id of the current node, but the full path (delimited by
  *   slashes) of all the node ids from the root node to the current node.
+ *
+ * Performance notes:
+ * - Event handlers are memoized to prevent re-renders on hover
+ * - Component uses custom memo comparison to avoid re-renders when array contents haven't changed
+ * - If still experiencing performance issues, check parent components for frequently changing props
  */
 function ControlledTree<T extends object>({
   nodes,
@@ -115,8 +120,61 @@ function ControlledTree<T extends object>({
     }
   }, [checkedState, nodes, onSelect, selectionMode]);
 
+  // Memoized event handlers to prevent re-renders
+  const handleCheckboxClick = useCallback(
+    (nodeValue: string, checked: boolean) => {
+      if (checked) {
+        tree.uncheckNode(nodeValue);
+      } else {
+        tree.checkNode(nodeValue);
+      }
+    },
+    [tree],
+  );
+
+  const handleExpandClick = useCallback(
+    (nodeValue: string, expanded: boolean) => {
+      if (expanded) {
+        tree.collapse(nodeValue);
+      } else {
+        tree.expand(nodeValue);
+      }
+    },
+    [tree],
+  );
+
+  const handleLabelClick = useCallback(
+    (nodeValue: string, selected: boolean) => {
+      if (selectionMode !== "single") {
+        return;
+      }
+
+      if (selected) {
+        tree.deselect(nodeValue);
+      } else {
+        tree.select(nodeValue);
+        const selectedNode = findNodeById(nodes, mantineNodeValueToId(nodeValue));
+        if (selectedNode) {
+          onSelect?.([selectedNode]);
+        }
+      }
+    },
+    [selectionMode, tree, nodes, onSelect],
+  );
+
+  const handleSelectAllClick = useCallback(
+    (allChecked: boolean) => {
+      if (allChecked) {
+        tree.uncheckAllNodes();
+      } else {
+        tree.checkAllNodes();
+      }
+    },
+    [tree],
+  );
+
   const renderTreeNode = useCallback(
-    ({ node, expanded, selected, hasChildren, elementProps, tree }: RenderTreeNodePayload) => {
+    ({ node, expanded, selected, hasChildren, elementProps }: RenderTreeNodePayload) => {
       const checked = tree.isNodeChecked(node.value);
       const indeterminate = tree.isNodeIndeterminate(node.value);
 
@@ -135,11 +193,7 @@ function ControlledTree<T extends object>({
               checked={checked}
               indeterminate={indeterminate}
               onClick={() => {
-                if (checked) {
-                  tree.uncheckNode(node.value);
-                } else {
-                  tree.checkNode(node.value);
-                }
+                handleCheckboxClick(node.value, checked);
               }}
             />
           )}
@@ -151,11 +205,7 @@ function ControlledTree<T extends object>({
               color="gray"
               variant="subtle"
               onClick={() => {
-                if (expanded) {
-                  tree.collapse(node.value);
-                } else {
-                  tree.expand(node.value);
-                }
+                handleExpandClick(node.value, expanded);
               }}
             >
               {expanded ? <IoChevronDown /> : <IoChevronForward />}
@@ -165,27 +215,15 @@ function ControlledTree<T extends object>({
           <div
             className={styles.labelContainer}
             onClick={() => {
-              if (selectionMode !== "single") {
-                return;
-              }
-
-              if (selected) {
-                tree.deselect(node.value);
-              } else {
-                tree.select(node.value);
-                const selectedNode = findNodeById(nodes, mantineNodeValueToId(node.value));
-                if (selectedNode) {
-                  onSelect?.([selectedNode]);
-                }
-              }
+              handleLabelClick(node.value, selected);
             }}
           >
             <span>{node.label}</span>
           </div>
         </div>
       );
     },
-    [nodes, onSelect, selectionMode],
+    [selectionMode, tree, handleCheckboxClick, handleExpandClick, handleLabelClick],
   );
 
   // Update tree state controlled selection changes
@@ -209,11 +247,7 @@ function ControlledTree<T extends object>({
             checked={allNodesChecked}
             indeterminate={!allNodesChecked && someNodesChecked}
             onClick={() => {
-              if (allNodesChecked) {
-                tree.uncheckAllNodes();
-              } else {
-                tree.checkAllNodes();
-              }
+              handleSelectAllClick(allNodesChecked);
             }}
           />
           <Text pl={5} fw={600}>
@@ -232,7 +266,33 @@ function ControlledTree<T extends object>({
   );
 }
 
-export default memo(ControlledTree) as typeof ControlledTree;
+export default memo(ControlledTree, (prevProps, nextProps) => {
+  // Custom comparison to prevent re-renders when array contents haven't changed
+  if (prevProps.selectionMode !== nextProps.selectionMode) {
+    return false;
+  }
+
+  if (prevProps.nodes !== nextProps.nodes) {
+    return false;
+  }
+
+  if (prevProps.onSelect !== nextProps.onSelect) {
+    return false;
+  }
+
+  // Deep comparison for selectedNodeIds array
+  if (prevProps.selectedNodeIds.length !== nextProps.selectedNodeIds.length) {
+    return false;
+  }
+
+  for (let i = 0; i < prevProps.selectedNodeIds.length; i++) {
+    if (prevProps.selectedNodeIds[i] !== nextProps.selectedNodeIds[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}) as typeof ControlledTree;
 
 // UTILITIES
 // -------------------------------------------------------------------------------------------------

packages/raga-web-app/src/views/export/exportView.module.scss

@@ -2,3 +2,11 @@
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
 }
+
+.exportColumn {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  min-width: 250px;
+  max-width: 500px;
+}

packages/raga-web-app/src/views/export/index.tsx

@@ -40,17 +40,7 @@ interface ExportColumnProps extends PaperProps {
 
 function ExportColumn({ children, title, ...props }: ExportColumnProps) {
   return (
-    <Paper
-      shadow="sm"
-      withBorder
-      radius="sm"
-      miw={250}
-      maw={500}
-      w="100%"
-      h="100%"
-      p={10}
-      {...props}
-    >
+    <Paper shadow="sm" withBorder radius="sm" className={styles.exportColumn} {...props}>
       <Stack h="100%">
         {title && <Text>{title}</Text>}
         {children}

packages/raga-web-app/src/views/libraryView.module.scss

@@ -1,5 +1,4 @@
 .librarySidebar {
-  justify-content: space-between;
   position: relative; // creates a stacking context for playlist table layout
 
   .librarySidebarFooter {
@@ -10,7 +9,18 @@
   }
 }
 
+.sidebarFooterItem {
+  padding: 5px 7px;
+}
+
 .library {
+  width: 100%;
+  height: 100%;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
 }
+
+.libraryStack {
+  width: 100%;
+  height: 100%;
+}

packages/raga-web-app/src/views/libraryView.tsx

@@ -31,8 +31,8 @@ export default function LibraryView() {
   );
 
   return (
-    <Paper w="100%" h="100%" shadow="sm" withBorder={true} radius="sm" className={styles.library}>
-      <Stack gap={0} w="100%" h="100%">
+    <Paper shadow="sm" withBorder={true} radius="sm" className={styles.library}>
+      <Stack gap={0} className={styles.libraryStack}>
         <Group justify="space-between" p={5}>
           {selectedTrack === undefined ? null : (
             <AudioPlayerNowPlaying selectedTrack={selectedTrack} />
@@ -77,15 +77,15 @@ function LibrarySidebarFooter() {
   return (
     <Box className={styles.librarySidebarFooter}>
       <Divider orientation="horizontal" />
-      <Box py={5} px={7}>
+      <Box className={styles.sidebarFooterItem}>
         <AudioFilesServerControls />
       </Box>
       <Divider orientation="horizontal" />
-      <Box py={5} px={7}>
+      <Box className={styles.sidebarFooterItem}>
         <AudioAnalyzerStatus />
       </Box>
       <Divider orientation="horizontal" />
-      <Box py={5} px={7}>
+      <Box className={styles.sidebarFooterItem}>
         <Group align="center" justify="space-between">
           <Text component="span" truncate={true} size="sm" c="dimmed">
             Total # tracks