Refactor/datasets content

DashAI/front/src/api/datasets.ts

@@ -81,7 +81,7 @@ export const updateDataset = async (
 
 export const deleteDataset = async (id: string): Promise<object> => {
   const response = await api.delete(`${datasetEndpoint}/${id}`);
-  return response.data;
+  return response;
 };
 
 export const getDatasetFile = async (path: string, page = 0, pageSize = 5) => {

DashAI/front/src/api/notebook.ts

@@ -2,7 +2,6 @@ import api from "./api";
 import { INotebook } from "../types/notebook";
 import { IExplorer } from "../types/explorer";
 import { IConverter } from "../types/converter";
-import { IDataset } from "../types/dataset";
 
 const notebookEndpoint = "/v1/notebook";
 
@@ -39,8 +38,9 @@ export const getConvertersByNotebookId = async (
   return response.data;
 };
 
-export const deleteNotebook = async (id: number): Promise<void> => {
-  await api.delete(`${notebookEndpoint}/${id}`);
+export const deleteNotebook = async (id: number): Promise<object> => {
+  const response = await api.delete(`${notebookEndpoint}/${id}`);
+  return response;
 };
 
 export const updateNotebook = async (

DashAI/front/src/components/DatasetVisualization.jsx

@@ -2,32 +2,23 @@ import { useCallback, useState, useEffect } from "react";
 import {
   Button,
   Grid,
-  Paper,
   Typography,
   CircularProgress,
   Box,
-  Chip,
   Alert,
   Divider,
   Tabs,
   Tab,
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import {
-  AddCircleOutline as AddIcon,
-  CheckCircle as CheckIcon,
-} from "@mui/icons-material";
+import { AddCircleOutline as AddIcon } from "@mui/icons-material";
 import {
   getDatasetFile,
   getDatasetInfo,
   getDatasetFileFiltered,
 } from "../api/datasets";
-import DatasetTable from "./notebooks/dataset/DatasetTable";
-import { getComponents } from "../api/component";
 import { useTourContext } from "./tour/TourProvider";
-import { useSnackbar } from "notistack";
 import JobQueueWidget from "./jobs/JobQueueWidget";
-import { getDatasetStatus } from "../utils/datasetStatus";
 import { formatDate } from "../pages/results/constants/formatDate";
 import Header from "./notebooks/dataset/header/Header";
 import Tooltip from "@mui/material/Tooltip";
@@ -39,63 +30,59 @@ import CorrelationsTab from "./notebooks/dataset/tabs/CorrelationsTab";
 import { QualityAlerts } from "./notebooks/dataset/QualityAlerts";
 import { TextTab } from "./notebooks/dataset/tabs/TextTab";
 import { useTranslation } from "react-i18next";
-
+import { useDatasetsAndNotebooks } from "./custom/contexts/DatasetsAndNotebooksContext";
 /**
  * Component to visualize dataset information including quality metrics, statistics, and data preview.
  * Can be used across different modules (Notebooks, Models) with customizable action buttons.
  * @param {Object} props
  * @param {Object} props.dataset - Dataset object containing id, name, file_path, status, and created date
- * @param {Function} props.onItemCreated - Callback function when a new item (notebook/session) is created
  * @param {Function} props.onNewItem - Callback function when "New Item" button is clicked
  * @param {string} [props.newItemButtonText="New Item"] - Custom text for the action button (e.g., "New Notebook", "New Session")
  * @param {Array} [props.existingItems=[]] - Array of existing items (notebooks/sessions) for validation
  */
 export default function DatasetVisualization({
   dataset,
-  onItemCreated,
   onNewItem,
   newItemButtonText = "New Item",
-  existingItems = [],
   tourContextType = null,
 }) {
   const { t } = useTranslation(["datasets", "common"]);
   const theme = useTheme();
 
-  if (!dataset) {
-    return (
-      <Box
-        sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
-      >
-        <CircularProgress sx={{ color: theme.palette.primary.main }} />
-        <Typography>{t("common:loading")}</Typography>
-      </Box>
-    );
-  }
-
   const [datasetInfo, setDatasetInfo] = useState(null);
   const [tab, setTab] = useState(0);
   const tourContext = useTourContext();
 
+  const status = dataset.status;
+  const isProcessing = !(status === 3 || status === 4); // Finished or Error
+
+  const { fetchDatasets } = useDatasetsAndNotebooks();
+
   useEffect(() => {
+    if (!dataset) return;
+
     setTab(0);
     const fetchDatasetInfo = async () => {
-      if (isProcessing) return;
-
+      if (isProcessing) {
+        setTimeout(() => {
+          fetchDatasets();
+        }, 1000);
+        return;
+      }
       try {
-        const info = await getDatasetInfo(dataset.id);
+        const info = await getDatasetInfo(Number(dataset.id));
         setDatasetInfo(info);
       } catch (error) {
         setDatasetInfo(null);
       }
     };
-
     fetchDatasetInfo();
-  }, [dataset.id, dataset.status]);
+  }, [dataset]);
 
   // fetchPage compatible with server-side filtering
   const fetchDatasetPage = useCallback(
     async (page, pageSize, filterModel) => {
-      if (isProcessing) return { rows: [], total: 0 };
+      if (!dataset || isProcessing) return { rows: [], total: 0 };
       try {
         // Use getDatasetFile if no filters, else use getDatasetFileFiltered
         const hasFilters =
@@ -118,11 +105,23 @@ export default function DatasetVisualization({
         return { rows: [], total: 0 };
       }
     },
-    [dataset.file_path, dataset.status, dataset.id],
+    [
+      dataset && dataset.file_path,
+      dataset && dataset.status,
+      dataset && dataset.id,
+    ],
   );
 
-  const status = dataset.status;
-  const isProcessing = !(status === 3 || status === 4); // Finished or Error
+  if (!dataset) {
+    return (
+      <Box
+        sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
+      >
+        <CircularProgress sx={{ color: theme.palette.primary.main }} />
+        <Typography>{t("common:loading")}</Typography>
+      </Box>
+    );
+  }
 
   return (
     <>

DashAI/front/src/components/custom/contexts/DatasetsAndNotebooksContext.jsx

@@ -0,0 +1,92 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+import { useTranslation } from "react-i18next";
+import { useDatasets } from "../../../hooks/datasets/useDatasets";
+import { useNotebooks } from "../../../hooks/datasets/useNotebooks";
+
+const DatasetsAndNotebooksContext = createContext();
+
+export const useDatasetsAndNotebooks = () =>
+  useContext(DatasetsAndNotebooksContext);
+
+export const OptionsEnum = Object.freeze({
+  DATASET: "dataset",
+  NOTEBOOK: "notebook",
+  NEW: "new",
+});
+
+export const DatasetsAndNotebooksProvider = ({ children }) => {
+  const { t } = useTranslation(["datasets", "common"]);
+  const {
+    datasets,
+    createDataset,
+    selectedDatasetId,
+    fetchDatasets,
+    selectDataset,
+    clearSelectedDataset,
+    deleteDataset,
+    deleteDatasetById,
+    editDataset,
+    addDatasetOptimistically,
+    enrichDatasetsWithInfo,
+    replaceDatasets,
+    startDatasetPolling,
+  } = useDatasets({ t });
+
+  const {
+    notebooks,
+    selectedNotebookId,
+    fetchNotebooks,
+    selectNotebook,
+    clearSelectedNotebook,
+    deleteNotebookById,
+    editNotebook,
+    removeNotebooksByDatasetId,
+  } = useNotebooks({ t });
+
+  const [step, setStep] = useState(0);
+  const [selectedOption, setSelectedOption] = useState(OptionsEnum.NEW); // "datasets" or "notebooks"
+
+  const [rightBarContent, setRightBarContent] = useState(null);
+
+  useEffect(() => {
+    fetchDatasets();
+    fetchNotebooks();
+  }, []);
+
+  const value = {
+    datasets,
+    createDataset,
+    selectedDatasetId,
+    fetchDatasets,
+    selectDataset,
+    clearSelectedDataset,
+    deleteDataset,
+    deleteDatasetById,
+    editDataset,
+    addDatasetOptimistically,
+    enrichDatasetsWithInfo,
+    replaceDatasets,
+    startDatasetPolling,
+    notebooks,
+    selectedNotebookId,
+    fetchNotebooks,
+    selectNotebook,
+    clearSelectedNotebook,
+    deleteNotebookById,
+    editNotebook,
+    removeNotebooksByDatasetId,
+    selectedOption,
+    setSelectedOption,
+    step,
+    setStep,
+    rightBarContent,
+    setRightBarContent,
+  };
+
+  return (
+    <DatasetsAndNotebooksContext.Provider value={value}>
+      {children}
+    </DatasetsAndNotebooksContext.Provider>
+  );
+};

DashAI/front/src/components/generative/ParamsBar.jsx

@@ -12,7 +12,7 @@ import {
   updateGenerativeSessionParams,
 } from "../../api/generativeTask";
 import { preprocessSchema, buildYupSchema } from "./utils";
-import SideBar from "../threeSectionLayout/SideBar";
+import SideBar from "../threeSectionLayout/panelContainers/SideBar";
 import { useTranslation } from "react-i18next";
 
 export default function ParamsBar({

DashAI/front/src/components/generative/SessionBar.jsx

@@ -7,7 +7,7 @@ import InfoSessionModal from "./InfoSessionModal";
 import Footer from "./Footer";
 import SessionList from "./SessionList";
 import NewItemButton from "../threeSectionLayout/NewItemButton";
-import SideBar from "../threeSectionLayout/SideBar";
+import SideBar from "../threeSectionLayout/panelContainers/SideBar";
 import BarHeader from "../threeSectionLayout/BarHeader";
 import { useTranslation } from "react-i18next";
 

DashAI/front/src/components/layout/ModuleContainer.jsx

@@ -0,0 +1,15 @@
+import { Box } from "@mui/material";
+
+export default function ModuleContainer({ children, ...props }) {
+  return (
+    <Box
+      height="calc(100vh - 74px)"
+      width="100%"
+      display="flex"
+      data-container="datasets"
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}

DashAI/front/src/components/models/LeftBar.jsx

@@ -6,7 +6,7 @@ import StorageIcon from "@mui/icons-material/Storage";
 import Biotech from "@mui/icons-material/Biotech";
 import Footer from "../threeSectionLayout/Footer";
 import BarHeader from "../threeSectionLayout/BarHeader";
-import SideBar from "../threeSectionLayout/SideBar";
+import SideBar from "../threeSectionLayout/panelContainers/SideBar";
 import CollapsibleList from "../threeSectionLayout/CollapsibleList";
 import GroupedCollapsibleList from "../threeSectionLayout/GroupedCollapsibleList";
 import SearchBar from "../threeSectionLayout/SearchBar";

DashAI/front/src/components/models/RightBar.jsx

@@ -10,7 +10,7 @@ import {
 import { useTheme } from "@mui/material/styles";
 import { ChevronRight, Search as SearchIcon } from "@mui/icons-material";
 import { useSnackbar } from "notistack";
-import SideBar from "../threeSectionLayout/SideBar";
+import SideBar from "../threeSectionLayout/panelContainers/SideBar";
 import { getComponents } from "../../api/component";
 import ModelListItem from "./model/ModelListItem";
 import { useTranslation } from "react-i18next";