Slide transition from execution list to route diagram page #62

New Issue

claude · 2026-03-14T21:56:05+01:00

claude commented

2026-03-14 21:56:05 +01:00

Problem

Currently navigating from the execution search results to the route diagram page requires expanding a row and clicking a button. The transition is a standard page navigation with no visual continuity.

Expected

Clicking an execution row in the search results should trigger a slide animation:

The search results view swipes out to the left
The route diagram page slides in from the right
Single swift, fluid animation

Navigation back:

A visible left-arrow button on the diagram page to go back
Backspace key also navigates back
Back transition reverses the animation (diagram slides right, results slide in from left)

This should feel like a single-page drill-down, not a full page navigation.

Notes

May require replacing or wrapping React Router navigation with a shared layout that animates between the two views
Consider framer-motion AnimatePresence or CSS view transitions API
The execution context (which row was clicked) should be preserved when navigating back

## Problem Currently navigating from the execution search results to the route diagram page requires expanding a row and clicking a button. The transition is a standard page navigation with no visual continuity. ## Expected Clicking an execution row in the search results should trigger a **slide animation**: - The search results view swipes out to the **left** - The route diagram page slides in from the **right** - Single swift, fluid animation **Navigation back:** - A visible **left-arrow** button on the diagram page to go back - **Backspace** key also navigates back - Back transition reverses the animation (diagram slides right, results slide in from left) This should feel like a single-page drill-down, not a full page navigation. ## Notes - May require replacing or wrapping React Router navigation with a shared layout that animates between the two views - Consider `framer-motion` AnimatePresence or CSS view transitions API - The execution context (which row was clicked) should be preserved when navigating back

claude added the feature route-diagram ui labels 2026-03-14 21:56:09 +01:00

claude closed this issue

2026-03-14 22:13:06 +01:00

claude referenced this issue from a commit

2026-03-14 22:14:30 +01:00

Fix route diagram open issues: bugs, visual polish, interactive features

claude referenced this issue

2026-03-14 22:34:42 +01:00

UX overhaul: streamline navigation from search results to route diagram #69

claude commented

2026-03-14 22:34:55 +01:00

Updated context post-UX overhaul (#69)

The slide transition was originally designed for the inline-expand → diagram navigation. With #69, the inline expand is removed and row clicks navigate directly to RoutePage.

The view transitions CSS still applies — it now animates the ExecutionExplorer → RoutePage transition (table slides left, diagram slides in from right). The back arrow + Backspace behavior remains unchanged.

No code changes needed for this issue — it already works for the new flow.

**Updated context post-UX overhaul (#69)** The slide transition was originally designed for the inline-expand → diagram navigation. With #69, the inline expand is removed and row clicks navigate directly to RoutePage. The view transitions CSS still applies — it now animates the `ExecutionExplorer → RoutePage` transition (table slides left, diagram slides in from right). The back arrow + Backspace behavior remains unchanged. No code changes needed for this issue — it already works for the new flow.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cameleer/cameleer-server#62