Refactor/datasets content

[Creylay]

Summary

This PR refactors the DatasetsContent.jsx module, which had grown in complexity by mixing business logic, state management, and UI rendering in a single file. The refactor aims to improve code readability, maintainability, and scalability by separating concerns, extracting reusable and specific components, and preparing the codebase for future extensions and performance improvements.

---

Type of Change

Check all that apply like this [x]:

• Backend change
• Frontend change
• CI / Workflow change
• Build / Packaging change
• Bug fix
• Documentation

---

Changes (by file)

• src/pages/datasets/DatasetsContent.jsx: Refactored to delegate business logic and UI state to specialized hooks, and to use new reusable layout components for a three-panel structure. Central render logic is now encapsulated in a dedicated subcomponent.
• src/components/threeSectionLayout/panels/LeftPanel.jsx: Reusable left sidebar panel with show/hide and resize logic, using context for state.
• src/components/threeSectionLayout/panels/RightPanel.jsx: Fully generic right sidebar panel, with customizable toggle button position via the toggleButtonTop prop, and context-driven state.
• src/components/threeSectionLayout/panels/CenterPanel.jsx: Central panel that dynamically adjusts its width based on the state of the side panels.
• src/components/notebooks/dataset/DatasetsCenterContent.jsx: New subcomponent that encapsulates all conditional rendering logic for the central panel, improving modularity and readability.
• src/context/DatasetsAndNotebooksContext.jsx: Introduces a centralized Context Provider that exposes shared state and high-level operations for datasets and notebooks, eliminating prop drilling across the three-panel layout. The provider coordinates data access while delegating entity-specific business logic to dedicated hooks, resulting in a cleaner and more maintainable architecture.
• src/hooks/datasets/useDatasets.js: Encapsulates all logic related to the Dataset entity (state, lifecycle, CRUD, polling, metadata enrichment).
• src/hooks/datasets/useNotebooks.js: Manages state and operations for the Notebook entity, including its relationship with datasets.

---

Testing (optional)

• Please verify that all dataset and notebook flows work as expected, including creation, editing, deletion, and navigation.
• Check that the three-panel layout behaves correctly: panels can be shown/hidden and resized, and the toggle button appears in the correct position.
• Ensure that the central content renders properly in all navigation states.

---

Notes (optional)

In summary, this refactor contains:

1) Datasets Module Hook Architecture

The Datasets module is now structured using multiple specialized hooks, each with a clearly defined responsibility. This reduces coupling, improves maintainability, and allows each part of the system to evolve independently.

• useDatasets: Handles all Dataset entity logic (state, CRUD, polling, metadata enrichment).
• useNotebooks: Manages Notebook entity state and operations, including its relationship with datasets.

2) Centralization of shared state via a Context Provider

**DatasetsAndNotebooksContent: **A Context Provider was introduced to expose shared datasets and notebooks state and actions, eliminating prop drilling and simplifying communication across the component tree.

3. Introduction of a reusable three-panel layout architecture

3) Three Panel Layout Components

Reusable components were introduced to encapsulate the logic and presentation of a three-section layout (left, center, right):

• LeftPanel: Manages the left sidebar, including show/hide transitions and dynamic width adjustment.
• RightPanel: Fully generic right sidebar, with a customizable toggle button position (toggleButtonTop prop).
• CenterPanel: Central panel that adapts its width based on the state of the side panels.

All panels use context to manage visibility, sizing, and user interaction events, and render their content via children.

4) Central Content Encapsulation

A new subcomponent, DatasetsCenterContent, was implemented to encapsulate and centralize the conditional rendering logic for the central panel of the datasets module. This improves readability, maintainability, and keeps the main file clean and modular.

---

[Irozuku]

These useCallback hooks are not doing anything.

[Creylay]

These useCallbacks improve the performance of the component avoiding redefining the funcion every render.
Anyways I did a small refactor beacause defining all this funcions is not necesary.

  const goToNextStep = useCallback(
    (option) => {
      if (option === "dataset") {
        setStep(1);
        setSelectedOption("dataset");
      } else {
        setStep(1);
        setSelectedOption("notebook");
      }

      clearSelectedDataset();
      clearSelectedNotebook();

      if (option === "dataset" && tourContext?.run) {
        setTimeout(() => {
          tourContext.nextStep();
        }, 600);
      }
    },
    [tourContext],
  );

[Irozuku]

You should try to delete it from the server first. If it returns a 204, 200, or 202 HTTP status code, then delete it from the local list.

[Creylay]

I fix it.

  const deleteDatasetById = async (id) => {
    try {
      await deleteDataset(id);
      setDatasets((prev) => prev.filter((d) => d.id !== id));
      if (id === selectedDatasetId) {
        setSelectedDatasetId(null);
      }
      return true;
    } catch (error) {
      enqueueSnackbar(t("datasets:error.failedToDeleteDataset"), {
        variant: "error",
      });
      console.error("Error deleting dataset:", error);
    }
    return false;
  };

Cheking the exact status code is not necesary, beacause if it fails it will raise an exception.

[Irozuku]

You should try to delete it from the server first, and if it succeeds, delete it locally.

[Creylay]

I did the same changes that in deleteDatasetById.

  const deleteNotebookById = async (id) => {
    try{
      await deleteNotebook(id);
      setNotebooks((prev) => prev.filter((n) => n.id !== id));
      return true;
    } catch (error) {
      enqueueSnackbar(t("datasets:error.failedToDeleteNotebook"), {
        variant: "error",
      });
      console.error("Error deleting notebook:", error);
    }
    return false;
  };