Guided tours for the Datafile Hub, and a --no-tours flag - #896

Summary

The Datafile Hub (/app/data/hub) was the only part of the Data module without a guided tour. This PR adds two interactive tours. The user does the real clicks and the tour advances on its own:

• hub (9 steps, /app/data/hub): pick a source, search, select a dataset, download it and add it to dashAI.
• hubImport (10 steps, /app/data/hub/import/:id): pick the file, the DataLoader, review the preview and import it as a dataset.

Both walk through a fixed example: HuggingFace → scikit-learn/iris → Iris.csv → CSV Data Loader. It needs no credentials and downloads in seconds. OpenML was the first choice, but its API was returning 503 during testing, so relying on it would make the tour fragile.

While testing the tours end to end, three more things came up and are fixed here:

• Loader cache leaked into the datafile. Hub preview and import passed the datafile folder as the DataLoader's temp_path. CSVDataLoader uses it as the HuggingFace datasets cache_dir, so after one import the file picker listed csv\default-…\csv-train.arrow and dataset_info.json next to Iris.csv. Both paths now use a temporary directory.
• The tour close button (X) was hard to click, in every tour. The "STEP X / Y" line is a full-width block with the same zIndex as the X and comes later in the DOM, so it covered the button's centre. Only its corners were clickable.
• Tours get in the way of demos. On a fresh machine every section opens its tour on first visit. python -m DashAI --no-tours (or DASHAI_NO_TOURS=1) now stops them from opening automatically. The navbar help button still starts any tour on demand.

Type of Change

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

Changes (by file)

Tour infrastructure

• front/src/components/tour/tourUtils.js (new): helpers for multi-screen tours.
  • isTourAtTarget guards asynchronous advances (search results, downloads) so they only move the tour from the step they belong to.
  • useTourStageSync: steps can declare a stage. When the user changes screen (route or wizard step), or relaunches the tour from a later screen, the tour jumps to the first step of that stage once its target renders. This replaces ad-hoc MutationObservers.
• front/src/hooks/useTour.js, front/src/components/tour/TourProvider.jsx: expose markTourAsCompleted in the tour context. Both new tours end with a click that navigates away, so without it they would never be marked as seen and would reopen.
• front/src/components/tour/CustomTooltip.jsx: raise the close button above the step counter and content, and pad the counter so they don't overlap.

Hub tours

• front/src/constants/tours/hubTour.js, hubImportTour.js (new), index.js: step definitions, registered as TOUR_KEYS.HUB and TOUR_KEYS.HUB_IMPORT.
• front/src/pages/hub/HubContent.jsx:
  • Wraps the page in the hub TourProvider and advances the tour on source, dataset and download actions.
  • If the dataset is already downloaded, it skips straight to "Add to dashAI".
  • It marks the tour as completed when leaving for the import page.
• front/src/pages/hub/HubImportPage.jsx: mounts the hubImport provider only once the datafile is ready, so the tour doesn't auto-start over the loading spinner.
• front/src/components/hub/HubImportPanel.jsx: tour anchors, and advances on file and DataLoader selection. It marks the tour as completed after a successful import.
• front/src/components/hub/DatasetGrid.jsx, DatasetCard.jsx, DatasetDetail.jsx, DatafileInfoPanel.jsx: data-tour anchors. The search step spotlights both the search and tag fields.
• front/src/components/custom/ComponentDetailsPanel.jsx, threeSectionLayout/CollapsibleList.jsx, notebooks/DatasetNotebookLeftBar.jsx: optional dataTour prop / anchor.
• front/src/utils/i18n/locales/{en,es,pt,de,zh}/hubTour.json (new), utils/i18n/index.js: tour texts, which use the same button and loader labels shown in the UI.

Loader cache fix

• back/job/dataset_job.py: the hub import path loads into a tempfile.mkdtemp() directory. The existing finally removes it after the dataset is saved; the loaded dataset is backed by that cache until then.
• back/api/api_v1/endpoints/dataset_source.py: the preview fallback loads inside a TemporaryDirectory.

--no-tours flag

• DashAI/__main__.py: new --no-tours / -nt option that sets DASHAI_NO_TOURS=1.
• back/api/api_v1/endpoints/app_config.py (new), api.py: GET /api/v1/app-config returns {"tours_autostart": bool}.
• front/src/api/appConfig.ts (new): fetches the config once per page load. If the backend can't be reached, tours keep the usual behaviour.
• front/src/hooks/useTour.js: checks tours_autostart before auto-starting a tour.

Tests

• front/src/constants/tours/hubTours.test.js: every step has a valid target, and its text exists in all five locales. Also covers the tourUtils helpers.
• front/src/hooks/useTour.test.js: a tour auto-starts, stays closed with --no-tours, can still be started manually, and stays closed once completed.
• tests/back/api/test_dataset_source_api.py: preview and import with a loader that writes cache into temp_path leave the datafile folder untouched. Both tests fail without the fix.
• tests/back/api/test_app_config_api.py: DASHAI_NO_TOURS parsing.

Testing

Automated: frontend 256/256 tests pass; backend dataset-source, dataset-job and app-config tests pass; ruff, eslint and prettier are clean.

Both tours were also run end to end in the browser. To try them:

1. In the browser, remove hub and hubImport from localStorage["dashai_tours_completed"] (or use a fresh profile).
2. Open /app/data/hub. The hub tour starts.
3. Follow it: HuggingFace → search scikit-learn/iris → select the card → Download to dashAI → Add to dashAI.
4. The hubImport tour starts on the import page: Iris.csv → CSV Data Loader → preview → Import Datafile.
5. Check that:
   • the iris dataset is created (150 rows);
   • the datafile's file list still shows only Iris.csv and database.sqlite, with no cache files;
   • the X closes the tour on the first click;
   • the navbar help button relaunches either tour.

For the flag, start the app with uv run python -m DashAI --no-tours and open a section you haven't visited: no tour should open, and the navbar help button should still start it.

Notes

• The Hub entry card in the Data menu is still hidden (from 80877c021), so these tours only run when the Hub is reached directly. Nothing in this PR re-enables it.
• The tour depends on HuggingFace and scikit-learn/iris being reachable. If the search returns nothing, the user can skip the tour with the usual button.
• Datafiles imported before this fix may still contain the leaked cache files on disk. Deleting and re-downloading the datafile cleans them up.
• --no-tours only affects auto-start. It doesn't mark tours as seen, so starting without the flag later behaves as before.

🤖 Generated with Claude Code