Explore folders feature

stopes/ui/seamlisten/backend/app/fileviewer.py

@@ -9,12 +9,11 @@
 import typing as tp
 import zipfile
 from pathlib import Path
-
+import os
 import torchaudio
 from fastapi import APIRouter
 from fastapi.exceptions import HTTPException
 from fastapi.responses import JSONResponse, Response
-
 import stopes.core.utils as stutils
 import stopes.modules.speech.utils as stopes_speech
 from stopes.modules.speech.utils import LineResult, auto_parse_line
@@ -86,6 +85,7 @@ def open_segment_tsv(file: str, start_idx: int, end_idx: int) -> tp.List[LineRes
     with stutils.open(file) as f:
         for line in itertools.islice(f, start_idx, end_idx):
             results.append(auto_parse_line(line.strip()))
+            print("result", results)
     return results
 
 
@@ -131,7 +131,14 @@ def get_annotations(
 @router.post("/general/")
 async def general_query(query: DefaultQuery) -> Response:
     query_path = query.gz_path.strip()
-    print(query_path.split(" "))
+    # Convert the path to an absolute path
+    query_path = Path(os.path.expanduser(query_path)).resolve()
+    # Check if the path is a directory
+    print(query_path)
+    if query_path.is_dir():
+        result_data = gather_folder_contents(query_path)
+        return result_data
+
     if query_path.endswith(".tsv.gz") or query_path.endswith(".zip"):
         return get_annotations(
             AnnotationQuery(
@@ -150,7 +157,6 @@ async def general_query(query: DefaultQuery) -> Response:
             AudioQuery(sampling="ms", path=path, start=int(start), end=int(end))
         )
         return result
-
     else:
         raise HTTPException(
             status_code=500,
@@ -161,3 +167,26 @@ async def general_query(query: DefaultQuery) -> Response:
         a line with audio file, start and end timestamps
         """,
         )
+
+
+def gather_folder_contents(folder_path, max_depth=5):
+    def gather_contents_recursive(folder_path, current_depth):
+        if current_depth > max_depth:
+            return {"folder": folder_path, "subfolders": [], "audio_files": []}
+
+        subfolders = []
+        audio_files = []
+
+        for entry in folder_path.iterdir():
+            if entry.is_dir():
+                subfolders.append(gather_contents_recursive(entry, current_depth + 1))
+            elif entry.suffix in {".wav", ".ms"}:
+                audio_files.append(entry.name)
+
+        return {
+            "folder": str(folder_path),
+            "subfolders": subfolders,
+            "audio_files": audio_files,
+        }
+
+    return gather_contents_recursive(Path(folder_path), 1)

stopes/ui/seamlisten/react_app/src/App.tsx

@@ -10,8 +10,53 @@ import Navbar from "react-bootstrap/Navbar";
 import { Outlet, NavLink } from "react-router-dom";
 
 import "bootstrap/dist/css/bootstrap.min.css";
+import Notebook, { Folder } from "./components/Notebook";
 
 export function App(): JSX.Element {
+  const folders : Folder[] = [
+      {
+        name: "folder1",
+        type: "folder",
+        content: [
+          {
+            name: "file1",
+            type: "file",
+            content: "file1 content"
+          },
+          {
+            name: "file2",
+            type: "file",
+            content: "file2 content"
+          },
+          {
+            name: "file3",
+            type: "file",
+            content: "file3 content"
+          }
+        ]
+      },
+      {
+        name: "folder2",
+        type: "folder",
+        content: [
+          {
+            name: "file1",
+            type: "file",
+            content: "file1 content"
+          },
+          {
+            name: "file2",
+            type: "file",
+            content: "file2 content"
+          },
+          {
+            name: "file3",
+            type: "file",
+            content: "file3 content"
+          }
+        ]
+      }
+  ];
   return (
     <div className="App">
       <header>
@@ -34,6 +79,7 @@ export function App(): JSX.Element {
         </Navbar>
       </header>
       <Outlet />
+      <Notebook folders={folders} />
     </div>
   );
 }

stopes/ui/seamlisten/react_app/src/common/constants/config.js

@@ -4,7 +4,7 @@
 // This source code is licensed under the license found in the
 // LICENSE file in the root directory of this source tree.
 
-const BACKEND_PORT = process.env.NODE_ENV === "development" ? "8000" : "8800";
+const BACKEND_PORT = process.env.NODE_ENV === "development" ? "8080" : "8800";
 
 export const config = {
   host: "http://localhost",

stopes/ui/seamlisten/react_app/src/common/fetchers/mining_result.ts

@@ -7,10 +7,11 @@
 import { config } from "../constants/config";
 import { AnnotationQuery, LineResult } from "../types/api";
 
-const url = config.host + ":" + config.port + config.annotations_route;
+const processFilesUrl = config.host + ":" + config.port + config.annotations_route;
+const processFoldersUrl = config.host + ":" + config.port + config.general_route;
 
 async function fetchFiles(data: AnnotationQuery): Promise<LineResult[]> {
-  let response = await fetch(url, {
+  let response = await fetch(processFilesUrl, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(data),
@@ -21,4 +22,25 @@ async function fetchFiles(data: AnnotationQuery): Promise<LineResult[]> {
   return response.json();
 }
 
-export default fetchFiles;
+async function processFolder(folderPath: string): Promise<LineResult[]> {
+  const folderQuery = {
+    gz_path: folderPath,
+    start_idx: 0, // Provide appropriate values
+    end_idx: 0,   // Provide appropriate values
+  };
+
+  const response = await fetch(processFoldersUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(folderQuery),
+  });
+
+  if (!response.ok) {
+    throw response;
+  }
+
+  return response.json();
+}
+
+export { fetchFiles, processFolder };
+

stopes/ui/seamlisten/react_app/src/components/FileExplorer.tsx

@@ -20,7 +20,7 @@ import {
 import WaveSurferComponent from "../common/components/audio/WaveSurfer";
 import InnerScale from "../common/components/spinners/spinner";
 import { config } from "../common/constants/config";
-import fetchFiles from "../common/fetchers/mining_result";
+import {fetchFiles , processFolder} from "../common/fetchers/mining_result";
 import { LineResult } from "../common/types/api";
 import Help from "./fileviewer/FileExplorerHelp";
 import Table from "./fileviewer/Table";
@@ -68,6 +68,7 @@ export async function loader({ request }): Promise<LoaderReturn> {
     files: [],
     audioBlob: undefined,
     error: null,
+    folderContents: [], // Add folderContents field
   };
 
   try {
@@ -84,6 +85,12 @@ export async function loader({ request }): Promise<LoaderReturn> {
       toRet.files = files;
       return toRet;
     }
+    else if (isDirectoryPath(filename)){
+      const folderContents = await processFolder(filename);
+      toRet.folderContents = folderContents;
+      console.log("folderContents", folderContents);
+      return toRet;
+    }
 
     const audioResult = await text_to_audio(filename, 1);
     if (audioResult) {
@@ -98,6 +105,13 @@ export async function loader({ request }): Promise<LoaderReturn> {
   return toRet;
 }
 
+function isDirectoryPath(path) {
+  // Implement a logic to check if the provided path is a directory
+  // You might use regular expressions or other methods to check.
+  // For example, if the path ends with "/", it's likely a directory.
+  return path.endsWith("/");
+}
+
 function Error({ error }) {
   const msg = error.data
     ? error.data.detail

stopes/ui/seamlisten/react_app/src/components/Notebook.css

@@ -0,0 +1,67 @@
+/* Notebook container */
+.notebook-container {
+    display: flex;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  /* Folder navigation panel */
+  .folder-navigation {
+    flex: 1;
+    padding: 10px;
+    background-color: #f5f5f5;
+  }
+
+  /* Folder item */
+  .folder-item {
+    padding: 8px;
+    cursor: pointer;
+    border-radius: 3px;
+    margin-bottom: 5px;
+    transition: background-color 0.2s;
+  }
+
+  .folder-item:hover {
+    background-color: #e0e0e0;
+  }
+
+  .selected {
+    background-color: #2196f3;
+    color: white;
+    font-weight: bold;
+  }
+
+  /* Notebook content panel */
+  .notebook-content {
+    flex: 3;
+    padding: 10px;
+    border-left: 1px solid #ccc;
+  }
+
+  /* File viewer */
+  .file-viewer {
+    padding: 10px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    min-height: 200px;
+    overflow: auto;
+  }
+
+  /* File content */
+  pre {
+    white-space: pre-wrap;
+    font-family: monospace;
+  }
+
+  /* Default text style */
+  div {
+    font-family: Arial, sans-serif;
+  }
+
+  /* Centered text */
+  .text-center {
+    text-align: center;
+  }
+