Render optimizations + fix cursor keys in filetreetable

Author: qu1ck

src/cachedfiletree.ts

@@ -43,11 +43,14 @@ export interface DirEntry extends Entry {
     priority?: PriorityNumberType,
     subdirs: Map<string, DirEntry>,
     files: Map<string, FileEntry>,
-    subrows: FileDirEntry[],
 }
 
 export type FileDirEntry = FileEntry | DirEntry;
 
+export interface FileDirEntryView extends Omit<FileDirEntry, "subdirs" | "files" | "isSelected" | "parent" | "index"> {
+    subrows: FileDirEntryView[],
+}
+
 export function isDirEntry(entry: FileDirEntry): entry is DirEntry {
     return "files" in entry;
 }
@@ -78,7 +81,6 @@ export class CachedFileTree {
             percent: 0,
             subdirs: new Map(),
             files: new Map(),
-            subrows: [],
             isSelected: false,
             wantedUpdating: false,
         };
@@ -187,7 +189,6 @@ export class CachedFileTree {
                         percent: 0,
                         subdirs: new Map(),
                         files: new Map(),
-                        subrows: [],
                         parent: node,
                         isSelected: false,
                         wantedUpdating: false,
@@ -368,18 +369,30 @@ export class CachedFileTree {
         return result;
     }
 
-    getView(): FileDirEntry[] {
-        const treeCopy = { ...this.tree };
-
-        const recurse = (dir: DirEntry) => {
-            dir.subdirs.forEach(recurse);
-            dir.subrows = [
-                ...Array.from(dir.subdirs.values()).map((d) => ({ ...d, parent: undefined })),
-                ...Array.from(dir.files.values()).map((f) => ({ ...f, parent: undefined }))];
+    getView(): FileDirEntryView[] {
+        const toView: (e: FileDirEntry) => FileDirEntryView = (e) => {
+            const subrows: FileDirEntryView[] = [];
+            if (isDirEntry(e)) {
+                subrows.push(...Array.from(e.subdirs.values()).map(toView));
+                subrows.push(...Array.from(e.files.values()).map(toView));
+            }
+            return {
+                name: e.name,
+                level: e.level,
+                fullpath: e.fullpath,
+                size: e.size,
+                done: e.done,
+                percent: e.percent,
+                wantedUpdating: e.wantedUpdating,
+                want: e.want,
+                priority: e.priority,
+                subrows,
+            };
         };
 
-        recurse(treeCopy);
+        const result = Array.from(this.tree.subdirs.values()).map(toView);
+        result.push(...Array.from(this.tree.files.values()).map(toView));
 
-        return treeCopy.subrows;
+        return result;
     }
 }

src/components/details.tsx

@@ -29,7 +29,6 @@ import { Status, type SessionStatEntry } from "rpc/transmission";
 import type { MantineTheme } from "@mantine/core";
 import { Anchor, Box, Flex, Container, Group, Table, Tabs, TextInput, LoadingOverlay, Grid, useMantineTheme } from "@mantine/core";
 import * as Icon from "react-bootstrap-icons";
-import type { FileDirEntry } from "cachedfiletree";
 import { CachedFileTree } from "cachedfiletree";
 import { useFileTree, useMutateTorrent, useSessionStats, useTorrentDetails } from "queries";
 import { ConfigContext } from "config";
@@ -309,11 +308,11 @@ function FileTreePane(props: { torrent: Torrent }) {
     const mutation = useMutateTorrent();
 
     const onCheckboxChange = useUnwantedFiles(fileTree, true);
-    const updateUnwanted = useCallback((entry: FileDirEntry, state: boolean) => {
-        onCheckboxChange(entry, state);
+    const updateUnwanted = useCallback((entryPath: string, state: boolean) => {
+        onCheckboxChange(entryPath, state);
         mutation.mutate({
             torrentIds: [props.torrent.id],
-            fields: { [state ? "files-wanted" : "files-unwanted"]: fileTree.getChildFilesIndexes(entry.fullpath) },
+            fields: { [state ? "files-wanted" : "files-unwanted"]: fileTree.getChildFilesIndexes(entryPath) },
         });
     }, [fileTree, mutation, onCheckboxChange, props.torrent.id]);
 

src/components/fileicon.tsx

@@ -19,6 +19,7 @@
 import * as Icon from "react-bootstrap-icons";
 import React from "react";
 import { useMantineTheme, type DefaultMantineColor } from "@mantine/core";
+import { useRowSelected } from "./tables/common";
 
 interface FileType {
     icon: React.FunctionComponent<Icon.IconProps>,
@@ -80,9 +81,9 @@ const extensions = fileTypes.reduce<Record<string, FileType>>((v, c) => {
     return v;
 }, {});
 
-export function FileIcon({ name, selected }: { name: string, selected: boolean }) {
+export function FileIcon({ name }: { name: string }) {
     const theme = useMantineTheme();
-
+    const selected = useRowSelected();
     const ext = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
     const FileIcon = Object.prototype.hasOwnProperty.call(extensions, ext) ? extensions[ext].icon : Icon.FileEarmark;
     const color = Object.prototype.hasOwnProperty.call(extensions, ext) ? extensions[ext].color : "gray";

src/components/modals/add.tsx

@@ -24,7 +24,6 @@ import type { PriorityNumberType } from "rpc/transmission";
 import { PriorityColors, PriorityStrings } from "rpc/transmission";
 import type { Torrent } from "rpc/torrent";
 import { useServerTorrentData, useServerRpcVersion } from "rpc/torrent";
-import type { FileDirEntry } from "cachedfiletree";
 import { CachedFileTree } from "cachedfiletree";
 import { FileTreeTable, useUnwantedFiles } from "components/tables/filetreetable";
 import { notifications } from "@mantine/notifications";
@@ -459,13 +458,13 @@ export function AddTorrent(props: AddCommonModalProps) {
 
     const unwantedHandler = useUnwantedFiles(fileTree, false);
 
-    const onCheckboxChange = useCallback((entry: FileDirEntry, state: boolean) => {
-        unwantedHandler(entry, state);
+    const onCheckboxChange = useCallback((entryPath: string, state: boolean) => {
+        unwantedHandler(entryPath, state);
         setWantedSize(fileTree.getWantedSize());
     }, [fileTree, unwantedHandler]);
 
     const setAllWanted = useCallback((wanted: boolean) => {
-        onCheckboxChange(fileTree.tree, wanted);
+        onCheckboxChange(fileTree.tree.fullpath, wanted);
         void refetch();
     }, [fileTree, onCheckboxChange, refetch]);
 

src/components/tables/common.tsx

@@ -232,7 +232,6 @@ function InnerRow<TData>(props: {
     columnSizing: ColumnSizingState,
     columnVisibility: VisibilityState,
     columnOrder: ColumnOrderState,
-    selected: boolean,
 }) {
     return <>
         {props.row.getVisibleCells().map(cell => {
@@ -251,11 +250,16 @@ const MemoizedInnerRow = memo(InnerRow, (prev, next) => {
         prev.expanded === next.expanded &&
         prev.columnSizing === next.columnSizing &&
         prev.columnVisibility === next.columnVisibility &&
-        prev.columnOrder === next.columnOrder &&
-        prev.selected === next.selected
+        prev.columnOrder === next.columnOrder
     );
 }) as typeof InnerRow;
 
+const RowSelectedContext = React.createContext<boolean>(false);
+
+export function useRowSelected() {
+    return useContext(RowSelectedContext);
+}
+
 function TableRow<TData>(props: {
     row: Row<TData>,
     selected: boolean,
@@ -328,7 +332,9 @@ function TableRow<TData>(props: {
             onKeyDown={onKeyDown}
             tabIndex={-1}
         >
-            <MemoizedInnerRow {...props} />
+            <RowSelectedContext.Provider value={props.selected}>
+                <MemoizedInnerRow {...props} />
+            </RowSelectedContext.Provider>
         </div>
     );
 }
@@ -600,7 +606,9 @@ export function EditableNameField(props: EditableNameFieldProps) {
     useEffect(() => {
         if (ref.current != null) {
             const row = ref.current.parentNode?.parentNode as HTMLDivElement;
-            row.onfocus = () => { ref.current?.focus(); };
+            row.onfocus = () => {
+                ref.current?.focus();
+            };
             return () => { row.onfocus = null; };
         }
     }, []);