fix: enhance time travel player (#641)

* feat: fix replayer issues, add color scheme tracking, prevent player size from jumping

* feat: add smooth snapshots loading, steps syncing with timeline

* feat: fix fast loading animations, fix history and snapshots out of sync

* fix: self-review fixes part 1

* fix: self-review fixes part 2

* fix: self-review fixes part 3

* chore: fix linter errors

* fix: fix player knob border

* fix: use css classes instead of inline styles

* fix: use css classes instead of inline styles in player

* fix: reset player state on result change

* feat: handle missing snapshots in time travel

* fix: enhance missing snapshot styling

Author: shadowusr

lib/adapters/event-handling/testplane/snapshots.ts

@@ -10,7 +10,7 @@ import yazl from 'yazl';
 
 import {ReporterTestResult} from '../../test-result';
 import {SNAPSHOTS_PATH} from '../../../constants';
-import {AttachmentType, SnapshotAttachment} from '../../../types';
+import {AttachmentType, SnapshotAttachment, TestStepKey} from '../../../types';
 import {EventSource} from '../../../gui/event-source';
 import {ClientEvents} from '../../../gui/constants';
 
@@ -92,7 +92,51 @@ export const finalizeSnapshotsForTest = async ({testResult, attempt, reportPath,
             return [];
         }
 
+        if (testResult.history && testResult.history.length > 0 && snapshots.length > 0) {
+            const firstSnapshotTime = snapshots[0].timestamp;
+            const lastSnapshotTime = snapshots[snapshots.length - 1].timestamp;
+
+            const firstHistoryTime = testResult.history[0][TestStepKey.TimeStart];
+            const lastHistoryTime = Math.max(testResult.history[testResult.history.length - 1][TestStepKey.TimeStart], firstHistoryTime + testResult.duration);
+
+            if (firstHistoryTime < firstSnapshotTime) {
+                const fakeStartSnapshot: RrwebEvent & {seqNo?: number} = {
+                    data: {id: 1, source: 3, x: 0, y: 0},
+                    timestamp: firstHistoryTime,
+                    type: 3,
+                    seqNo: -1
+                };
+                snapshots.unshift(fakeStartSnapshot);
+            }
+
+            if (lastHistoryTime > lastSnapshotTime) {
+                const fakeEndSnapshot: RrwebEvent & {seqNo?: number} = {
+                    data: {id: 1, source: 3, x: 0, y: 0},
+                    timestamp: lastHistoryTime,
+                    type: 3,
+                    seqNo: snapshots.length
+                };
+                snapshots.push(fakeEndSnapshot);
+            }
+
+            snapshots.forEach((snapshot, index) => {
+                (snapshot as RrwebEvent & {seqNo: number}).seqNo = index;
+            });
+        }
+
         const snapshotsSerialized = snapshots.map(s => JSON.stringify(s)).join('\n');
+        let maxWidth = 0, maxHeight = 0;
+        for (const snapshot of snapshots) {
+            if (snapshot.type !== 4) {
+                continue;
+            }
+            if (snapshot.data.width > maxWidth) {
+                maxWidth = snapshot.data.width;
+            }
+            if (snapshot.data.height > maxHeight) {
+                maxHeight = snapshot.data.height;
+            }
+        }
 
         const zipFilePath = createSnapshotFilePath({
             attempt,
@@ -114,7 +158,9 @@ export const finalizeSnapshotsForTest = async ({testResult, attempt, reportPath,
         zipfile.outputStream.pipe(output).on('close', () => {
             done([{
                 type: AttachmentType.Snapshot,
-                path: zipFilePath
+                path: zipFilePath,
+                maxWidth,
+                maxHeight
             }]);
         });
 

lib/static/icons/broken-snapshot.svg

@@ -50,6 +50,8 @@ export default {
     GROUP_TESTS_SET_CURRENT_EXPRESSION: 'GROUP_TESTS_SET_CURRENT_EXPRESSION',
     TOGGLE_BROWSER_CHECKBOX: 'TOGGLE_BROWSER_CHECKBOX',
     SUITES_PAGE_SET_CURRENT_SUITE: 'SUITES_PAGE_SET_CURRENT_SUITE',
+    SUITES_PAGE_SET_CURRENT_STEP: 'SUITES_PAGE_SET_CURRENT_STEP',
+    SUITES_PAGE_SET_CURRENT_HIGHLIGHT_STEP: 'SUITES_PAGE_SET_CURRENT_HIGHLIGHT_STEP',
     SUITES_PAGE_SET_SECTION_EXPANDED: 'SUITES_PAGE_SET_SECTION_EXPANDED',
     SUITES_PAGE_SET_TREE_NODE_EXPANDED: 'SUITES_PAGE_SET_TREE_NODE_EXPANDED',
     SUITES_PAGE_SET_ALL_TREE_NODES: 'SUITES_PAGE_SET_ALL_TREE_NODES',
@@ -67,5 +69,6 @@ export default {
     SORT_TESTS_SET_DIRECTION: 'SORT_TESTS_SET_DIRECTION',
     SET_GUI_SERVER_CONNECTION_STATUS: 'SET_GUI_SERVER_CONNECTION_STATUS',
     SET_AVAILABLE_FEATURES: 'SET_AVAILABLE_FEATURES',
-    SET_SNAPSHOTS_PLAYER_HIGHLIGHT_TIME: 'SET_SNAPSHOTS_PLAYER_HIGHLIGHT_TIME'
+    SET_SNAPSHOTS_PLAYER_HIGHLIGHT_TIME: 'SET_SNAPSHOTS_PLAYER_HIGHLIGHT_TIME',
+    SNAPSHOTS_PLAYER_GO_TO_TIME: 'SNAPSHOTS_PLAYER_GO_TO_TIME'
 } as const;

lib/static/modules/action-names.ts

@@ -3,11 +3,22 @@ import actionNames from '@/static/modules/action-names';
 
 export type SetSnapshotsPlayerHighlightTimeAction = Action<typeof actionNames.SET_SNAPSHOTS_PLAYER_HIGHLIGHT_TIME, {
     startTime: number;
+    endTime: number;
+    isActive: boolean;
 }>;
-export const setCurrentPlayerTime = (payload: SetSnapshotsPlayerHighlightTimeAction['payload']): SetSnapshotsPlayerHighlightTimeAction => ({
+export const setCurrentPlayerHighlightTime = (payload: SetSnapshotsPlayerHighlightTimeAction['payload']): SetSnapshotsPlayerHighlightTimeAction => ({
     type: actionNames.SET_SNAPSHOTS_PLAYER_HIGHLIGHT_TIME,
     payload
 });
 
+export type SnapshotsPlayerGoToTimeAction = Action<typeof actionNames.SNAPSHOTS_PLAYER_GO_TO_TIME, {
+    time: number;
+}>;
+export const goToTimeInSnapshotsPlayer = (payload: SnapshotsPlayerGoToTimeAction['payload']): SnapshotsPlayerGoToTimeAction => ({
+    type: actionNames.SNAPSHOTS_PLAYER_GO_TO_TIME,
+    payload
+});
+
 export type SnapshotsAction =
-    | SetSnapshotsPlayerHighlightTimeAction;
+    | SetSnapshotsPlayerHighlightTimeAction
+    | SnapshotsPlayerGoToTimeAction;

lib/static/modules/actions/snapshots.ts

@@ -11,6 +11,20 @@ export const setCurrentTreeNode = (payload: SuitesPageSetCurrentTreeNodeAction['
     return {type: actionNames.SUITES_PAGE_SET_CURRENT_SUITE, payload};
 };
 
+export type SuitesPageSetCurrentStepAction = Action<typeof actionNames.SUITES_PAGE_SET_CURRENT_STEP, Partial<{
+    stepId: string | null;
+}>>;
+export const setCurrentStep = (payload: SuitesPageSetCurrentStepAction['payload']): SuitesPageSetCurrentStepAction => {
+    return {type: actionNames.SUITES_PAGE_SET_CURRENT_STEP, payload};
+};
+
+export type SuitesPageSetCurrentHighlightStepAction = Action<typeof actionNames.SUITES_PAGE_SET_CURRENT_HIGHLIGHT_STEP, Partial<{
+    stepId: string | null;
+}>>;
+export const setCurrentHighlightStep = (payload: SuitesPageSetCurrentHighlightStepAction['payload']): SuitesPageSetCurrentHighlightStepAction => {
+    return {type: actionNames.SUITES_PAGE_SET_CURRENT_HIGHLIGHT_STEP, payload};
+};
+
 type SetTreeNodeExpandedStateAction = Action<typeof actionNames.SUITES_PAGE_SET_TREE_NODE_EXPANDED, {
     nodeId: string;
     isExpanded: boolean;
@@ -57,4 +71,6 @@ export type SuitesPageAction =
     | SetSectionExpandedStateAction
     | SetStepsExpandedStateAction
     | RevealTreeNodeAction
-    | SetTreeViewModeAction;
+    | SetTreeViewModeAction
+    | SuitesPageSetCurrentStepAction
+    | SuitesPageSetCurrentHighlightStepAction;

lib/static/modules/actions/suites-page.ts

@@ -103,7 +103,9 @@ export default Object.assign({config: configDefaults}, {
         suitesPage: {
             currentBrowserId: null,
             currentTreeNodeId: null,
-            currentGroupId: null
+            currentGroupId: null,
+            currentStepId: null,
+            currentHighlightedStepId: null
         },
         visualChecksPage: {
             currentNamedImageId: null
@@ -130,8 +132,11 @@ export default Object.assign({config: configDefaults}, {
         guiServerConnection: {
             isConnected: false
         },
-        snapshots: {
-            currentPlayerTime: 0
+        snapshotsPlayer: {
+            isActive: false,
+            highlightStartTime: 0,
+            highlightEndTime: 0,
+            goToTime: 0
         }
     },
     ui: {

lib/static/modules/default-state.ts

@@ -10,14 +10,14 @@ export default (state: State, action: SomeAction): State => {
     switch (action.type) {
         case actionNames.INIT_GUI_REPORT:
         case actionNames.INIT_STATIC_REPORT: {
-            const features: Feature[] = state.app.availableFeatures;
+            const features: Feature[] = [...state.app.availableFeatures];
 
             const toolName = action.payload.apiValues?.toolName;
             if (toolName === ToolName.Testplane) {
                 features.push(ShowTimeTravelExperimentFeature);
 
-                const isTimeTravelAvailable = localStorageWrapper.getItem(getTimeTravelFeatureLocalStorageKey(toolName ?? ''), false);
-                if (isTimeTravelAvailable) {
+                const isTimeTravelEnabled = localStorageWrapper.getItem(getTimeTravelFeatureLocalStorageKey(toolName ?? ''), true);
+                if (isTimeTravelEnabled) {
                     features.push(TimeTravelFeature);
                 }
             }

lib/static/modules/reducers/features.ts

@@ -8,8 +8,20 @@ export default (state: State, action: SomeAction): State => {
         case actionNames.SET_SNAPSHOTS_PLAYER_HIGHLIGHT_TIME: {
             return applyStateUpdate(state, {
                 app: {
-                    snapshots: {
-                        currentPlayerTime: action.payload.startTime
+                    snapshotsPlayer: {
+                        isActive: action.payload.isActive,
+                        highlightStartTime: action.payload.startTime,
+                        highlightEndTime: action.payload.endTime
+                    }
+                }
+            });
+        }
+
+        case actionNames.SNAPSHOTS_PLAYER_GO_TO_TIME: {
+            return applyStateUpdate(state, {
+                app: {
+                    snapshotsPlayer: {
+                        goToTime: action.payload.time
                     }
                 }
             });

lib/static/modules/reducers/snapshots.ts

@@ -145,6 +145,24 @@ export default (state: State, action: SomeAction): State => {
                 }
             }) as State;
         }
+        case actionNames.SUITES_PAGE_SET_CURRENT_STEP: {
+            return applyStateUpdate(state, {
+                app: {
+                    suitesPage: {
+                        currentStepId: action.payload.stepId
+                    }
+                }
+            });
+        }
+        case actionNames.SUITES_PAGE_SET_CURRENT_HIGHLIGHT_STEP: {
+            return applyStateUpdate(state, {
+                app: {
+                    suitesPage: {
+                        currentHighlightedStepId: action.payload.stepId
+                    }
+                }
+            });
+        }
         default:
             return state;
     }

lib/static/modules/reducers/suites-page.ts

@@ -10,6 +10,18 @@
 
     --color-pink-100: #fce0ff;
     --color-pink-600: #be00ffbf;
+
+    --color-neutral-50: oklch(0.985 0 0);
+    --color-neutral-100: oklch(0.97 0 0);
+    --color-neutral-200: oklch(0.922 0 0);
+    --color-neutral-300: oklch(0.87 0 0);
+    --color-neutral-400: oklch(0.708 0 0);
+    --color-neutral-500: oklch(0.556 0 0);
+    --color-neutral-600: oklch(0.439 0 0);
+    --color-neutral-700: oklch(0.371 0 0);
+    --color-neutral-800: oklch(0.269 0 0);
+    --color-neutral-900: oklch(0.205 0 0);
+    --color-neutral-950: oklch(0.145 0 0);
 }
 
 .g-root {

lib/static/new-ui.css

@@ -4,7 +4,7 @@
     overflow-x: scroll;
     overflow-y: hidden;
     background: #101827;
-    border-radius: 5px;
+    border-radius: 10px;
     padding: 12px;
     box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.1) 0 4px 6px -4px;
 }

lib/static/new-ui/components/ErrorInfo/index.module.css

@@ -7,6 +7,8 @@
     --g-text-body-1-line-height: 22px;
     --g-text-body-font-weight: normal;
 
+    color: var(--color-title, #000);
+
     line-height: 20px;
 
     padding: 4px 0;
@@ -20,6 +22,15 @@
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
 
+.tree-view-item--active {
+    background: var(--g-color-base-brand);
+    --g-color-base-simple-hover: var(--g-color-base-brand);
+    --color-title: #fff;
+    --color-icon: #fff;
+    --color-tag-title: rgba(255, 255, 255, .7);
+    --color-tag-bg: rgba(255, 255, 255, .15);
+}
+
 .tree-view-item--error {
     --g-color-base-simple-hover: var(--g-color-private-red-50);
     background: var(--g-color-private-red-100);

lib/static/new-ui/components/TreeViewItem/index.module.css

@@ -22,8 +22,10 @@ interface TreeListItemProps<T> {
     list: UseListResult<T>;
     mapItemDataToContentProps: (data: T) => ListItemViewContentType;
     status?: 'error' | 'corrupted';
+    isActive?: boolean;
     onItemClick?: (data: {id: string}) => unknown;
     onMouseMove?: () => unknown;
+    onMouseLeave?: () => unknown;
 }
 
 export function TreeViewItem<T>(props: TreeListItemProps<T>): ReactNode {
@@ -35,9 +37,11 @@ export function TreeViewItem<T>(props: TreeListItemProps<T>): ReactNode {
     >
         <ListItemView
             onMouseMove={props.onMouseMove}
-            className={classNames([styles.treeViewItem, {
-                [styles['tree-view-item--corrupted']]: props.status === 'corrupted',
-                [styles['tree-view-item--error']]: props.status === 'error'
+            onMouseLeave={props.onMouseLeave}
+            className={classNames([props.className, styles.treeViewItem, {
+                [styles['tree-view-item--active']]: props.isActive,
+                [styles['tree-view-item--corrupted']]: !props.isActive && props.status === 'corrupted',
+                [styles['tree-view-item--error']]: !props.isActive && props.status === 'error'
             }])}
             activeOnHover={true}
             style={{'--indent': indent + Number(!hasChildren)} as React.CSSProperties}