Skip to content

Redesign the docs site as a widget-style app - #11

Merged
CSSFrancis merged 7 commits into
mainfrom
website-redesign
Aug 20, 2026
Merged

CSSFrancis merged 7 commits into
mainfrom
website-redesign

Conversation

@CSSFrancis

Copy link
Copy Markdown
Owner

Rebuilds the documentation site to look and browse like the Jupyter widget
(dark Catppuccin), with a top nav of Examples / API / All Data / Add Dataset.

Stacked on #10 → #8. This branch builds on the settings + widget branches
(it reuses browser.css and em_database.catalogue), so the diff includes
their commits until they merge. Merge order: #8, then #10, then this.

What's new

  • Landing page — a prominent search bar + technique tabs (All, 4D-STEM, EELS,
    EDS, EBSD, STEM, In-situ, Cryo) over a live-filtered, grouped dataset list with
    a details panel. Same UI as em_database.browse(), fed by the real catalogue
    baked in at build time.
  • All Data — the full widget-style dataset browser.
  • Add Dataset — a schema-driven form (one control per json-schema.json
    field, enum dropdowns, repeatable authors, a live YAML preview, and client-side
    validation of the required fields + patterns). On submit it opens GitHub's
    prefilled create new file page at em_database/datasets/<Name>.yaml with the
    built YAML, so the user commits to a branch and opens a PR — no backend needed.
    A secondary link submits via the existing issue form.
  • Examples (sphinx-gallery) and API (autodoc) still build; a
    _static/custom.css themes the pydata pages to match the app.

Implementation

Generated pages are self-contained (inline browser.css + baked catalogue
JSON), produced by the existing Sphinx build-finished hook in conf.py via new
generators in em_database/_build_docs.py (generate_landing_html,
generate_all_data_html, generate_add_dataset_html). Each generator is guarded
so a failure never kills the build.

Verification

  • All three app pages generate valid, non-empty self-contained HTML with the
    Catppuccin palette and the real dataset data; nav has all four sections.
  • The Add Dataset form covers every schema field; the PR URL is
    https://github.com/CSSFrancis/em_data/new/main?filename=...&value=<yaml>, and
    a sample YAML round-trips through yaml.safe_load + the package loader.
  • All generated JS passes node --check.

Not verified locally / follow-ups

  • A full themed sphinx-build wasn't run locally (the dev venv lacks
    pydata_sphinx_theme/sphinx_design) — the self-contained app pages are
    unaffected, but the pydata theming in custom.css/navbar options is
    best-effort and worth an eyeball on the first CI Pages build. Build locally
    with pip install -e .[doc] && cd doc && make html.
  • Pre-existing (out of scope): .github/scripts/issue_to_yaml.py has a bug
    (references an undefined dataset_name; writes microscope: instead of
    microscope_model:) that affects the "submit as an issue" fallback path.

- em_database.settings is a live, rcParams-style dict seeded at import from
  ~/.em_database/settings.yaml (override with EM_DATABASE_CONFIG). Mutate in
  memory for an immediate effect; settings.save() / set_data_dir(persist=True)
  persist across sessions. No env var is needed; EM_DATABASE_DATA_DIR is still
  honored as a backward-compat seed.
- save() writes only values that differ from the defaults, so a default (like
  the data dir) is never frozen into the file - it stays dynamic and obeyed.
- Data can be installed system-wide: filepath()/download() search shared
  locations first (EM_DATABASE_SHARED_DIR, a shared_data_dirs setting, or a
  system config at /etc/em_database or %PROGRAMDATA%), then the user's data
  dir, and only download (into the user dir) if it is nowhere to be found.
- Colab: auto-enable the custom widget manager and broaden notebook detection
  so browse()/display()/toasts work out of the box.
- Tests isolate the user + system config; add test_settings and test_shared_data.
Update the README and the changing_download_location example to use
em_database.settings (matplotlib rcParams-style, ~/.em_database/settings.yaml),
the persist/session-only set_data_dir, generic get_setting/set_setting, and the
system-wide shared-data locations. The example resets settings at the end so it
leaves nothing behind when run by the docs gallery.
display(em_database.settings) (or em_database.settings.widget()) now renders an
anywidget panel to set the data directory directly - Save (persist), Use for
session (in-memory), or Reset - and shows the settings-file path and the
shared-then-user search order. Falls back to the dict repr without anywidget.
Pick a folder with a hidden webkitdirectory <input> in the browser and fill the
path field client-side (deriving the absolute path from File.path where the
environment exposes it, e.g. desktop/Electron), then Save. No kernel-side dialog.
The webkitdirectory input made the browser show an "upload" dialog. Use a plain
file <input> instead (a normal "Open" dialog) and take the selected file's
parent as the directory. Move the Browse button onto the directory line, to the
right of the path field.
Rebuild the documentation site to look and browse like the Jupyter widget
(dark Catppuccin), with a top nav of Examples / API / All Data / Add Dataset.

- Landing page: a prominent search bar + technique tabs over a live-filtered,
  grouped dataset list with a details panel - the same UI as em_database.browse(),
  fed by the real catalogue baked in at build time.
- All Data: the full widget-style dataset browser.
- Add Dataset: a schema-driven form (one control per json-schema field, enum
  dropdowns, repeatable authors, live YAML preview + client-side validation)
  that opens GitHub's prefilled create-file page to open a PR adding the
  dataset YAML - no backend needed on a static site.
- Examples (sphinx-gallery) and API (autodoc) still build; a _static/custom.css
  themes the pydata pages to match the app.

Generated pages are self-contained (inline browser.css + baked catalogue) and
written by the existing build-finished hook.
- Every page shares the exact same app nav: override pydata's sections/header.html
  to render the app nav (brand + Examples/API/All Data/Add Dataset pills, active
  state via pagename), and neutralize pydata's navbar shell in custom.css.
- Remove the diamond from the brand; hide the widget's "Datasets" diamond on the
  website via the browser overrides.
- No sidebars anywhere (html_sidebars {"**": []}, secondary_sidebar_items []),
  no breadcrumbs, minimal footer.
- Full-width, larger type: app pages go edge-to-edge (was a 1180px column) with a
  16px base; the browser list/details fonts are bumped and the details metadata
  is a tidy 2-column block; the pydata Examples/API pages are forced full width
  with a 17px root, a roomy auto-fit gallery grid, and app-styled download links.
- Ignore Sphinx/gallery/autosummary output generated into doc/source.
@CSSFrancis
CSSFrancis merged commit 5947887 into main Aug 20, 2026
19 of 20 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant