feat: add saved output panel to show output directory

Author: elainefan331

backend/migrations/20260127203948-create-projects.js

@@ -24,6 +24,12 @@ module.exports = {
         type: Sequelize.STRING(200),
         allowNull: false,
       },
+      public_id: {
+        type: Sequelize.STRING(12),
+        allowNull: false,
+        unique: true,
+        defaultValue: "",
+      },
       description: {
         type: Sequelize.TEXT,
         allowNull: true,

backend/package-lock.json

@@ -29,6 +29,7 @@
     "dotenv": "^17.2.3",
     "express": "^5.1.0",
     "jsonwebtoken": "^9.0.2",
+    "nanoid": "^3.3.11",
     "nodemailer": "^7.0.11",
     "passport": "^0.7.0",
     "passport-google-oauth20": "^2.0.0",

backend/package.json

@@ -1,4 +1,5 @@
 const { Project, User } = require("../models");
+const { nanoid } = require("nanoid");
 
 // Create a new organizer project
 const createProject = async (req, res) => {
@@ -8,6 +9,7 @@ const createProject = async (req, res) => {
 
     const project = await Project.create({
       user_id: user.id,
+      public_id: nanoid(12),
       name: name || `Dataset Project ${new Date().toLocaleDateString()}`,
       description: description || "don't have description yet",
       extractor_state: {
@@ -40,6 +42,7 @@ const getUserProjects = async (req, res) => {
       order: [["updated_at", "DESC"]],
       attributes: [
         "id",
+        "public_id", // ← ADD
         "name",
         "description",
         "created_at",
@@ -53,6 +56,7 @@ const getUserProjects = async (req, res) => {
       const state = project.extractor_state || { files: [] };
       return {
         id: project.id,
+        public_id: project.public_id, // ← ADD
         name: project.name,
         description: project.description,
         created_at: project.created_at,
@@ -82,7 +86,8 @@ const getProject = async (req, res) => {
 
     const project = await Project.findOne({
       where: {
-        id: projectId,
+        // id: projectId,
+        public_id: projectId,
         user_id: user.id,
       },
     });
@@ -112,7 +117,8 @@ const updateProject = async (req, res) => {
 
     const project = await Project.findOne({
       where: {
-        id: projectId,
+        // id: projectId,
+        public_id: projectId,
         user_id: user.id,
       },
     });
@@ -154,7 +160,8 @@ const deleteProject = async (req, res) => {
 
     const project = await Project.findOne({
       where: {
-        id: projectId,
+        // id: projectId,
+        public_id: projectId,
         user_id: user.id,
       },
     });

backend/src/controllers/projectController.js

@@ -1,5 +1,7 @@
 const { DataTypes, Model } = require("sequelize");
 const { sequelize } = require("../config/database");
+const { nanoid } = require("nanoid");
+console.log("nanoid test:", nanoid(12));
 
 class Project extends Model {}
 
@@ -22,6 +24,11 @@ Project.init(
       type: DataTypes.STRING(200),
       allowNull: false,
     },
+    public_id: {
+      type: DataTypes.STRING(12),
+      allowNull: false,
+      unique: true,
+    },
     description: {
       type: DataTypes.TEXT,
       allowNull: true,

backend/src/models/Project.js

@@ -33,8 +33,8 @@ app.use(
   })
 );
 
-app.use(express.json());
-app.use(express.urlencoded({ extended: true }));
+app.use(express.json({ limit: "50mb" }));
+app.use(express.urlencoded({ limit: "50mb", extended: true }));
 app.use(cookieParser()); // parse cookies
 app.use(passport.initialize());
 

backend/src/server.js

@@ -17,7 +17,8 @@ interface DropZoneProps {
   files: FileItem[];
   setFiles: React.Dispatch<React.SetStateAction<FileItem[]>>;
   baseDirectoryPath: string; // ✅ ADD this line
-  setBaseDirectoryPath: React.Dispatch<React.SetStateAction<string>>; // ✅ ADD this line
+  // setBaseDirectoryPath: React.Dispatch<React.SetStateAction<string>>;
+  setBaseDirectoryPath: (path: string) => void;
   selectedIds: Set<string>;
   setSelectedIds: React.Dispatch<React.SetStateAction<Set<string>>>;
   expandedIds: Set<string>;

src/components/User/Dashboard/DatasetOrganizer/DropZone.tsx

@@ -11,6 +11,7 @@ import {
   Add,
   AutoAwesome,
   FolderSpecial,
+  Download,
 } from "@mui/icons-material";
 import {
   Box,
@@ -25,6 +26,7 @@ import {
   DialogActions,
 } from "@mui/material";
 import { Colors } from "design/theme";
+import JSZip from "jszip";
 import React, { useState } from "react";
 import { FileItem } from "redux/projects/types/projects.interface";
 
@@ -55,6 +57,10 @@ const FileTree: React.FC<FileTreeProps> = ({
   const [metaFileName, setMetaFileName] = useState("");
   const [metaContent, setMetaContent] = useState("");
 
+  // split files into two groups
+  const userFiles = files.filter((f) => f.source !== "output");
+  const outputFiles = files.filter((f) => f.source === "output");
+
   // In FileTree.tsx
   const metaConfigs = {
     readme: {
@@ -167,6 +173,42 @@ const FileTree: React.FC<FileTreeProps> = ({
     setSelectedIds(new Set());
   };
 
+  const handleDownloadOutputFolder = async (
+    folderId: string,
+    folderName: string
+  ) => {
+    const zip = new JSZip();
+
+    // Recursive function to add files to zip
+    const addToZip = (
+      parentId: string,
+      zipFolder: any,
+      currentPath: string
+    ) => {
+      const children = files.filter((f) => f.parentId === parentId);
+      children.forEach((child) => {
+        if (child.type === "folder") {
+          const subFolder = zipFolder.folder(child.name);
+          addToZip(child.id, subFolder, `${currentPath}/${child.name}`);
+        } else {
+          if (child.content) {
+            zipFolder.file(child.name, child.content);
+          }
+        }
+      });
+    };
+
+    addToZip(folderId, zip, folderName);
+
+    const blob = await zip.generateAsync({ type: "blob" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${folderName}.zip`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
   const handleAddNote = (id: string) => {
     const file = files.find((f) => f.id === id);
     setEditingNoteId(id);
@@ -187,6 +229,12 @@ const FileTree: React.FC<FileTreeProps> = ({
   };
 
   const renderFileIcon = (file: FileItem) => {
+    if (file.source === "output") {
+      if (file.type === "folder") {
+        return <FolderSpecial sx={{ color: Colors.darkGreen, fontSize: 20 }} />;
+      }
+      return <InsertDriveFile sx={{ color: Colors.darkGreen, fontSize: 20 }} />;
+    }
     // AI generated files — use AutoAwesome icon with purple color
     if (file.source === "ai") {
       return (
@@ -245,8 +293,13 @@ const FileTree: React.FC<FileTreeProps> = ({
   };
 
   // one item in the tree
-  const renderTreeItem = (file: FileItem, depth: number = 0) => {
-    const children = files.filter((f) => f.parentId === file.id);
+  const renderTreeItem = (
+    file: FileItem,
+    depth: number = 0,
+    filePool: FileItem[] = files
+  ) => {
+    // const children = files.filter((f) => f.parentId === file.id); // origin
+    const children = filePool.filter((f) => f.parentId === file.id);
     const hasChildren = children.length > 0;
 
     // Check if file has content or children to show expand button
@@ -315,6 +368,23 @@ const FileTree: React.FC<FileTreeProps> = ({
             {file.name}
           </Typography>
 
+          {/* Download button for output root folders */}
+          {file.source === "output" &&
+            file.parentId === null &&
+            file.type === "folder" && (
+              <IconButton
+                size="small"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleDownloadOutputFolder(file.id, file.name);
+                }}
+                sx={{ p: 0.25, color: Colors.purple }}
+                title="Download as ZIP"
+              >
+                <Download sx={{ fontSize: 16 }} />
+              </IconButton>
+            )}
+
           {/* Add timestamp for AI files */}
           {file.source === "ai" && file.generatedAt && (
             <Typography
@@ -396,7 +466,11 @@ const FileTree: React.FC<FileTreeProps> = ({
 
         {/* Children */}
         {hasChildren && isExpanded && (
-          <Box>{children.map((child) => renderTreeItem(child, depth + 1))}</Box>
+          <Box>
+            {children.map((child) =>
+              renderTreeItem(child, depth + 1, filePool)
+            )}
+          </Box> // add filePool
         )}
       </Box>
     );
@@ -534,8 +608,42 @@ const FileTree: React.FC<FileTreeProps> = ({
         </Box>
 
         {/* File Tree */}
-        <Box sx={{ flex: 1, overflow: "auto", p: 1 }}>
+        {/* <Box sx={{ flex: 1, overflow: "auto", p: 1 }}>
           {rootFiles.map((file) => renderTreeItem(file))}
+        </Box> */}
+
+        <Box sx={{ flex: 1, overflow: "auto", p: 1 }}>
+          {userFiles
+            .filter((f) => f.parentId === null)
+            .map((f) => renderTreeItem(f, 0, userFiles))}
+
+          {outputFiles.length > 0 && (
+            <>
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  px: 1,
+                  py: 0.5,
+                  mt: 1,
+                  borderTop: 1,
+                  borderColor: "divider",
+                }}
+              >
+                <FolderSpecial sx={{ color: Colors.darkGreen, fontSize: 16 }} />
+                <Typography
+                  variant="caption"
+                  sx={{ color: Colors.darkGreen, fontWeight: 600 }}
+                >
+                  Saved Outputs
+                </Typography>
+              </Box>
+              {outputFiles
+                .filter((f) => f.parentId === null)
+                .map((f) => renderTreeItem(f, 0, outputFiles))}
+            </>
+          )}
         </Box>
 
         {/* Footer Legend */}