From 3fe88ffcfac30c7a875b3e0896008a5fbc473726 Mon Sep 17 00:00:00 2001 From: Danila Khodjaef Date: Thu, 13 Aug 2026 12:52:50 +0300 Subject: [PATCH] Document Tree of Art layouts, colour helpers, deep-links, and caption i18n. Co-authored-by: Cursor --- Documentation/basics.md | 28 +++++++++++++++------------- Documentation/i18n-russian.md | 10 ++++++++++ Documentation/movement-tree.md | 9 +++++++++ README.md | 2 +- 4 files changed, 35 insertions(+), 14 deletions(-) diff --git a/Documentation/basics.md b/Documentation/basics.md index a3db093..52a025c 100644 --- a/Documentation/basics.md +++ b/Documentation/basics.md @@ -44,7 +44,6 @@ Gallery/ │ │ ├── components/PaintingDetail.tsx # Detail view + debug panel │ │ ├── components/ArtistBio.tsx # Biography + portrait debug panel │ │ ├── components/DebugSearchResultsModal.tsx # “More” search picker (20 results) -│ │ ├── components/Timeline.tsx # Era bar, year ticks, event markers │ │ ├── components/Timeline.tsx # Classic horizontal era bar │ │ ├── components/VerticalTimeline.tsx # Bottom-up vertical era rail │ │ ├── components/MovementBands.tsx # Movement flow (SVG streams + branches) @@ -61,13 +60,14 @@ Gallery/ │ │ ├── pages/AuditPage.tsx # Admin curator activity reports │ │ ├── components/ToursPopup.tsx # Public published-tours modal │ │ ├── i18n/ # react-i18next bootstrap -│ │ └── locales/{en,ru}/ # UI chrome strings +│ │ ├── locales/{en,ru}/ # UI chrome strings (incl. timeline layout + captions) │ │ ├── data/historical-events.ts # Timeline event markers (UI) │ │ ├── data/movement-lineage.ts # Curated movement predecessor links (UI) │ │ ├── utils/parquetFloorTexture.ts # Procedural parquet floor │ │ ├── utils/debugMode.ts # Debug mode + “Show more” localStorage prefs -│ │ └── utils/timelineView.ts # Shared zoom/pan math for timeline + movements -│ └── dist/ # Production build (served by API when present) +│ │ ├── utils/timelineView.ts # Shared zoom/pan math for timeline + movements +│ │ ├── utils/movementColor.ts # Shared vivid/shade hex helpers for all movement charts +│ │ └── utils/movementTree.ts # View-independent Tree of Art layout engine│ └── dist/ # Production build (served by API when present) ├── scripts/ # Seed, bios, catalog expansion, image fetch, checkup tools │ ├── seed-wikipedia.js │ ├── seed-catalog-data.js @@ -174,23 +174,25 @@ Implementation: `goToTimelineHome()` in `HomePage.tsx` — do not use the browse ## Timeline and movement flow -The home page shows two linked views over the **same year window** (`viewStart` / `viewEnd` in `HomePage.tsx`). A header link switches between layouts: +The home page shows linked era + movement views over the **same year window** (`viewStart` / `viewEnd` in `HomePage.tsx`). Header links switch among three layouts; the active layout is also deep-linked: -| Layout | Era rail | Movement flow | Time direction | -|--------|----------|---------------|----------------| -| **Classic** (default) | `Timeline.tsx` (top bar) | `MovementBands.tsx` | Left → right | -| **Vertical** | `VerticalTimeline.tsx` (left rail) | `VerticalMovementBands.tsx` (streams + lineage branches; no portraits) | Bottom → top | -| **Tree of art** | `VerticalTimeline.tsx` (left rail) | `MovementTree.tsx` (lineage as a growing tree; no portraits) | Bottom → top | +| Layout | Era rail | Movement flow | Time direction | URL | +|--------|----------|---------------|----------------|-----| +| **Classic** (default) | `Timeline.tsx` (top bar) | `MovementBands.tsx` | Left → right | omit or `?layout=classic` | +| **Vertical** | `VerticalTimeline.tsx` (left rail) | `VerticalMovementBands.tsx` (streams + lineage; no portraits) | Bottom → top | `?layout=vertical` | +| **Tree of art** | `VerticalTimeline.tsx` (left rail) | `MovementTree.tsx` (lineage as a growing tree; no portraits) | Bottom → top | `?layout=tree` | -Deep-link: `?layout=tree` (or `vertical` / `classic`) is read on load and updated when switching layouts. +`HomePage` reads `?layout=` once on load and calls `history.replaceState` when the user switches. Classic clears the param so the default URL stays clean. Alias `horizontal` maps to classic. | View | Component | Purpose | |------|-----------|---------| | Era bar / rail | `Timeline.tsx` / `VerticalTimeline.tsx` | Historical eras, major event markers, click-to-zoom | -| Movement flow | `MovementBands.tsx` / `VerticalMovementBands.tsx` | Streams per movement, artist portraits (classic also draws lineage branches) | +| Movement flow | `MovementBands.tsx` / `VerticalMovementBands.tsx` / `MovementTree.tsx` | Streams or tree limbs per movement; classic also places artist portraits | +| Stream colours | `utils/movementColor.ts` | Shared `vividMovementColor` / `shadeMovementColor` for all three charts | + +Hint captions under each rail/chart (`captionClassicTimeline`, `captionClassicFlow`, `captionVerticalTimeline`, `captionVerticalFlow`, `captionTreeFlow`) live in `locales/{en,ru}/home.json` and follow the EN|RU toggle. All three layouts share zoom/pan behaviour via `client/src/utils/timelineView.ts` (`zoomTimelineView`, `panTimelineView`, `chooseTimelineTickInterval`, `createViewChangeScheduler`). The home page uses a **fixed viewport** (`100vh`). Classic stacks timeline above movements; vertical and tree place the year rail beside the flow (`home-timeline-stack-vertical`). The tree layout keeps its horizontal geometry fixed across zoom — rules in [movement-tree.md](movement-tree.md). - ### Catalog search (timeline header) `CatalogSearchBar.tsx` calls `GET /api/search?q=…` (public, no login). The dropdown is stacked above the timeline (`z-index` on `.site-header`) so results are not hidden by movement bands. diff --git a/Documentation/i18n-russian.md b/Documentation/i18n-russian.md index 165d05b..ee736cc 100644 --- a/Documentation/i18n-russian.md +++ b/Documentation/i18n-russian.md @@ -25,6 +25,16 @@ Timeline header: **EN | RU** toggle (`LocaleSwitcher`). - Passes `?locale=ru` on catalog API requests - Refetches bootstrap catalog when locale changes +Timeline **layout** chrome and chart hints are also localised in `home.json`: + +| Key | Where | +|-----|--------| +| `layoutHorizontal` / `layoutVertical` / `layoutTree` | Header layout switch | +| `captionClassicTimeline` / `captionClassicFlow` | Classic era bar + movement streams | +| `captionVerticalTimeline` / `captionVerticalFlow` | Vertical rail + streams | +| `captionTreeFlow` | Tree of Art chart | + +Shareable layout URLs (`?layout=tree` etc.) are language-independent; captions follow the active locale. --- ## Setup (dev) diff --git a/Documentation/movement-tree.md b/Documentation/movement-tree.md index 3071fee..55f4223 100644 --- a/Documentation/movement-tree.md +++ b/Documentation/movement-tree.md @@ -81,6 +81,15 @@ change. Clicking any limb or label opens the movement's artist picker and then its 3D movement gallery, exactly as the other two layouts do. +## Colours and captions + +- Limb fill/shading uses [`utils/movementColor.ts`](../client/src/utils/movementColor.ts) + (`vividMovementColor`, `shadeMovementColor`) — the same helpers as the classic and + vertical charts. Malformed catalogue hex falls back to the input string; values longer + than six digits keep the first six (`#rrggbbaa` → `#rrggbb`). +- The chart hint under the canvas is `captionTreeFlow` in + `locales/{en,ru}/home.json` (same pattern as the other layouts). + ## Tuning All constants sit at the top of the two files and are safe to tune: diff --git a/README.md b/README.md index b0ced12..7cb26d0 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Art Gallery -Interactive virtual art gallery: zoomable historical timeline with era click-to-zoom, major event markers (vertical guides into the movement flow), branching art-movement streams (click a movement name to enter its **3D movement gallery** — photorealistic period interiors with painted walls, stone, and wood textures; chronological wings with up to ~55 works each, side-wall windows, wing navigator), one 3D hall per artist (parquet floor, movement-tinted walls, black/gold frames by review status, corridor layout for large catalogs, museum-style exit doors, golden influence lamps, canvas placeholders for missing works, influence-linked exits), painting detail with art-history annotations, prev/next catalog browsing and fullscreen lightbox, **curator-gated** debug-mode image audit on painting detail and artist bio (**Checked** / **Fix it** / **More** / **Clear** / **Upload**; painting detail also **Remove entry**), optional **Show more** auto-opens the search picker, Checkup page, preserved gallery camera on return, and Wikipedia-sourced artist biographies. Anonymous visitors browse freely; curators sign in via **Curator login** in the header. +Interactive virtual art gallery: zoomable historical timeline (classic left→right, vertical, or **Tree of Art** lineage chart — shareable via `?layout=`) with era click-to-zoom, major event markers (vertical guides into the movement flow), branching art-movement streams (click a movement name to enter its **3D movement gallery** — photorealistic period interiors with painted walls, stone, and wood textures; chronological wings with up to ~55 works each, side-wall windows, wing navigator), one 3D hall per artist (parquet floor, movement-tinted walls, black/gold frames by review status, corridor layout for large catalogs, museum-style exit doors, golden influence lamps, canvas placeholders for missing works, influence-linked exits), painting detail with art-history annotations, prev/next catalog browsing and fullscreen lightbox, **curator-gated** debug-mode image audit on painting detail and artist bio (**Checked** / **Fix it** / **More** / **Clear** / **Upload**; painting detail also **Remove entry**), optional **Show more** auto-opens the search picker, Checkup page, preserved gallery camera on return, and Wikipedia-sourced artist biographies. Anonymous visitors browse freely; curators sign in via **Curator login** in the header. ## Documentation