#276 Improve File Tree Tab

- make file/folder folded status persistent

Author: MaximilianZenz

binocular-frontend-new/src/components/tabs/fileTree/fileList/fileList.tsx

@@ -33,17 +33,9 @@ function FileList(props: { orientation?: string }) {
                     files: {
                       name: '/',
                       type: FileListElementTypeType.Folder,
-                      children: generateFileTree(
-                        files.map((file) => {
-                          return {
-                            file: file,
-                            checked: true,
-                          };
-                        }),
-                      ),
-                      element: {
-                        checked: true,
-                      },
+                      children: generateFileTree(files),
+                      checked: true,
+                      foldedOut: true,
                     },
                     fileCount: files.length,
                   }),

binocular-frontend-new/src/components/tabs/fileTree/fileList/fileListElements/fileListFile.tsx

@@ -3,7 +3,6 @@ import { FileListElementType } from '../../../../../types/data/fileListType.ts';
 import FileIcon from '../../../../../assets/file_gray.svg';
 import { updateFileListElement } from '../../../../../redux/reducer/data/filesReducer.ts';
 import { AppDispatch, useAppDispatch } from '../../../../../redux';
-import { updateFileListElementTypeChecked } from '../fileListUtilities/fileTreeUtilities.ts';
 
 function FileListFile(props: { file: FileListElementType }) {
   const dispatch: AppDispatch = useAppDispatch();
@@ -13,8 +12,8 @@ function FileListFile(props: { file: FileListElementType }) {
         <input
           type={'checkbox'}
           className={'checkbox checkbox-accent checkbox-xs'}
-          checked={props.file.element.checked}
-          onChange={(e) => dispatch(updateFileListElement(updateFileListElementTypeChecked(props.file, e.target.checked)))}
+          checked={props.file.checked}
+          onChange={(e) => dispatch(updateFileListElement({ ...props.file, checked: e.target.checked }))}
         />
         <div className={fileListElementsStyles.element}>
           <img src={FileIcon} alt={`folder ${props.file.name}`} />

binocular-frontend-new/src/components/tabs/fileTree/fileList/fileListElements/fileListFolder.tsx

@@ -1,31 +1,30 @@
 import fileListElementsStyles from './fileListElements.module.scss';
 import { FileListElementType, FileListElementTypeType } from '../../../../../types/data/fileListType.ts';
-import { useState } from 'react';
 import FolderIcon from '../../../../../assets/folder_gray.svg';
 import FolderOpenIcon from '../../../../../assets/folder_open_gray.svg';
 import FileListFile from './fileListFile.tsx';
 import { AppDispatch, useAppDispatch } from '../../../../../redux';
 import { updateFileListElement } from '../../../../../redux/reducer/data/filesReducer.ts';
-import { updateFileListElementTypeChecked } from '../fileListUtilities/fileTreeUtilities.ts';
 
 function FileListFolder(props: { folder: FileListElementType; foldedOut: boolean }) {
   const dispatch: AppDispatch = useAppDispatch();
-  const [foldedOut, setFoldedOut] = useState(props.foldedOut);
 
   return (
     <>
-      {foldedOut ? (
+      {props.folder.foldedOut ? (
         <>
           <div className={'flex items-center'}>
             {props.folder.id !== undefined && (
               <input
                 type={'checkbox'}
                 className={'checkbox checkbox-accent checkbox-xs'}
-                checked={props.folder.element.checked}
-                onChange={(e) => dispatch(updateFileListElement(updateFileListElementTypeChecked(props.folder, e.target.checked)))}
+                checked={props.folder.checked}
+                onChange={(e) => dispatch(updateFileListElement({ ...props.folder, checked: e.target.checked }))}
               />
             )}
-            <div className={fileListElementsStyles.element} onClick={() => setFoldedOut(false)}>
+            <div
+              className={fileListElementsStyles.element}
+              onClick={() => dispatch(updateFileListElement({ ...props.folder, foldedOut: false }))}>
               <img src={FolderOpenIcon} alt={`folder open ${props.folder.name}`} />
               <span>{props.folder.name}</span>
             </div>
@@ -58,10 +57,12 @@ function FileListFolder(props: { folder: FileListElementType; foldedOut: boolean
           <input
             type={'checkbox'}
             className={'checkbox checkbox-accent checkbox-xs'}
-            checked={props.folder.element.checked}
-            onChange={(e) => dispatch(updateFileListElement(updateFileListElementTypeChecked(props.folder, e.target.checked)))}
+            checked={props.folder.checked}
+            onChange={(e) => dispatch(updateFileListElement({ ...props.folder, checked: e.target.checked }))}
           />
-          <div onClick={() => setFoldedOut(true)} className={fileListElementsStyles.element}>
+          <div
+            onClick={() => dispatch(updateFileListElement({ ...props.folder, foldedOut: true }))}
+            className={fileListElementsStyles.element}>
             <img src={FolderIcon} alt={`folder ${props.folder.name}`} />
             <span>{props.folder.name}</span>
           </div>

binocular-frontend-new/src/components/tabs/fileTree/fileList/fileListUtilities/fileTreeUtilities.ts

@@ -1,23 +1,23 @@
 import { FileListElementType, FileListElementTypeType } from '../../../../../types/data/fileListType.ts';
-import { FileType } from '../../../../../types/data/fileType.ts';
+import { DataPluginFile } from '../../../../../plugins/interfaces/dataPluginInterfaces/dataPluginFiles.ts';
 
-export function generateFileTree(files: FileType[]): FileListElementType[] {
+export function generateFileTree(files: DataPluginFile[]): FileListElementType[] {
   return convertData(files).content;
 }
 
-function convertData(files: FileType[]) {
+function convertData(files: DataPluginFile[]) {
   const convertedData = { content: [] };
   let id = 0;
   for (const file of files) {
-    if (file.file) {
-      const pathParts = file.file.path.split('/');
+    if (file) {
+      const pathParts = file.path.split('/');
       id = genPathObjectString(convertedData.content, pathParts, file, id);
     }
   }
   return convertedData;
 }
 
-function genPathObjectString(convertedData: FileListElementType[], pathParts: string[], file: FileType, id: number) {
+function genPathObjectString(convertedData: FileListElementType[], pathParts: string[], file: DataPluginFile, id: number) {
   const currElm = pathParts.shift();
   id++;
   if (currElm) {
@@ -26,7 +26,9 @@ function genPathObjectString(convertedData: FileListElementType[], pathParts: st
         name: currElm,
         id: id,
         type: FileListElementTypeType.File,
+        checked: true,
         element: file,
+        foldedOut: false,
       });
     } else {
       let elem = convertedData.find((d) => d.name === currElm);
@@ -36,7 +38,8 @@ function genPathObjectString(convertedData: FileListElementType[], pathParts: st
           id: id,
           type: FileListElementTypeType.Folder,
           children: [],
-          element: { checked: true },
+          checked: true,
+          foldedOut: false,
         };
         if (elem.children) {
           id = genPathObjectString(elem.children, pathParts, file, id);
@@ -51,7 +54,3 @@ function genPathObjectString(convertedData: FileListElementType[], pathParts: st
   }
   return id;
 }
-
-export function updateFileListElementTypeChecked(fileListElement: FileListElementType, checked: boolean) {
-  return { ...fileListElement, element: { ...fileListElement.element, checked: checked } };
-}

binocular-frontend-new/src/redux/reducer/data/filesReducer.ts

@@ -58,10 +58,11 @@ function updateFileListElementRecursive(
     fileList.children = fileList.children.map((f: FileListElementType) => {
       let elementChecked = checked;
       if (f.id === element.id) {
-        elementChecked = element.element.checked;
+        elementChecked = element.checked;
+        f.foldedOut = element.foldedOut;
       }
       if (elementChecked !== undefined) {
-        f.element.checked = elementChecked;
+        f.checked = elementChecked;
       }
       updateFileListElementRecursive(f, element, elementChecked);
       return f;

binocular-frontend-new/src/types/data/fileListType.ts

@@ -1,11 +1,13 @@
-import { FileType } from './fileType.ts';
+import { DataPluginFile } from '../../plugins/interfaces/dataPluginInterfaces/dataPluginFiles.ts';
 
 export interface FileListElementType {
   name: string;
   id?: number;
   type: FileListElementTypeType;
-  element: FileType;
+  element?: DataPluginFile;
   children?: FileListElementType[];
+  checked: boolean;
+  foldedOut: boolean;
 }
 
 export enum FileListElementTypeType {