jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(player): pick tabstate for console panel and timeline

Browse source
This commit is contained in:
nick-delirium 2023-05-16 09:53:57 +02:00
parent edc5d93b63
commit e58d7fc292
16 changed files with 1777 additions and 1807 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/pkg/messages/filters.go
View file

@ -11,4 +11,4 @@ func IsIOSType(id int) bool {
func IsDOMType(id int) bool {
return 0 == id || 4 == id || 5 == id || 6 == id || 7 == id || 8 == id || 9 == id || 10 == id || 11 == id || 12 == id || 13 == id || 14 == id || 15 == id || 16 == id || 18 == id || 19 == id || 20 == id || 37 == id || 38 == id || 49 == id || 50 == id || 51 == id || 54 == id || 55 == id || 57 == id || 58 == id || 59 == id || 60 == id || 61 == id || 67 == id || 69 == id || 70 == id || 71 == id || 72 == id || 73 == id || 74 == id || 75 == id || 76 == id || 77 == id || 113 == id || 114 == id || 118 == id || 119 == id || 90 == id || 93 == id || 96 == id || 100 == id || 102 == id || 103 == id || 105 == id
}
}

761
backend/pkg/messages/messages.go
View file

File diff suppressed because it is too large Load diff

2404
backend/pkg/messages/read-message.go
View file

File diff suppressed because it is too large Load diff

26
frontend/app/components/Session_/Player/Controls/Controls.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import cn from 'classnames';
import { connect } from 'react-redux';
import { selectStorageType, STORAGE_TYPES } from 'Player';
import { selectStorageType, STORAGE_TYPES, StorageType } from 'Player';
import { PlayButton, PlayingState, FullScreenButton } from 'App/player-ui'
import { Icon, Tooltip } from 'UI';
@ -67,17 +67,21 @@ function Controls(props: any) {
completed,
skip,
speed,
cssLoading,
messagesLoading,
inspectorMode,
markedTargets,
exceptionsList,
profilesList,
graphqlList,
logMarkedCountNow: logRedCount,
resourceMarkedCountNow: resourceRedCount,
stackMarkedCountNow: stackRedCount,
currentTab,
tabStates
} = store.get();
const cssLoading = tabStates[currentTab]?.cssLoading ?? false;
const exceptionsList = tabStates[currentTab]?.exceptionsList || [];
const profilesList = tabStates[currentTab]?.profilesList || [];
const graphqlList = tabStates[currentTab]?.graphqlList || [];
const logRedCount = tabStates[currentTab]?.logMarkedCountNow || 0;
const resourceRedCount = tabStates[currentTab]?.resourceMarkedCountNow || 0;
const stackRedCount = tabStates[currentTab]?.stackMarkedCountNow || 0;
const {
bottomBlock,
toggleBottomBlock,
@ -86,10 +90,10 @@ function Controls(props: any) {
skipInterval,
disabledRedux,
showStorageRedux,
session
session,
} = props;
const storageType = selectStorageType(store.get());
const storageType = store.get().tabStates[currentTab] ? selectStorageType(store.get().tabStates[currentTab]) : StorageType.NONE
const disabled = disabledRedux || cssLoading || messagesLoading || inspectorMode || markedTargets;
const profilesCount = profilesList.length;
const graphqlCount = graphqlList.length;

8
frontend/app/components/Session_/Player/Controls/Timeline.tsx
View file

@ -13,6 +13,7 @@ import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import { DateTime, Duration } from 'luxon';
import Issue from "Types/session/issue";
import { toJS } from 'mobx'
function getTimelinePosition(value: number, scale: number) {
const pos = value * scale;
@ -35,20 +36,23 @@ function Timeline(props: IProps) {
playing,
time,
skipIntervals,
eventList: events,
skip,
skipToIssue,
ready,
endTime,
devtoolsLoading,
domLoading,
tabStates,
} = store.get()
const { issues } = props;
const notes = notesStore.sessionNotes
const progressRef = useRef<HTMLDivElement>(null)
const timelineRef = useRef<HTMLDivElement>(null)
const events = Object.values(tabStates)
.map(({ eventList }) => eventList)
.flat()
.filter(Boolean)
const scale = 100 / endTime;

3
frontend/app/components/Session_/Player/Overlay.tsx
View file

@ -22,13 +22,14 @@ function Overlay({
const {
playing,
messagesLoading,
cssLoading,
completed,
autoplay,
inspectorMode,
markedTargets,
activeTargetIndex,
tabStates,
} = store.get()
const cssLoading = Object.values(tabStates).some(({ cssLoading }) => cssLoading)
const loading = messagesLoading || cssLoading
const showAutoplayTimer = completed && autoplay && nextId

26
frontend/app/components/Session_/Subheader.js
View file

@ -24,16 +24,18 @@ function SubHeader(props) {
width,
height,
location: currentLocation,
fetchList,
graphqlList,
resourceList,
exceptionsList,
eventList: eventsList,
endTime,
currentTab,
tabs,
tabStates,
currentTab,
tabs,
} = store.get();
const resourceList = tabStates[currentTab]?.resourceList || []
const exceptionsList = tabStates[currentTab]?.exceptionsList || []
const eventsList = tabStates[currentTab]?.eventsList || []
const graphqlList = tabStates[currentTab]?.graphqlList || []
const fetchList = tabStates[currentTab]?.fetchList || []
const enabledIntegration = useMemo(() => {
const { integrations } = props;
if (!integrations || !integrations.size) {
@ -117,7 +119,15 @@ function SubHeader(props) {
</>
)}
{tabs.map((tab, i) => (
<div className={currentTab === tab ? 'outline-active-blue-border outline m-2' : 'm-2'}>
<div
key={tab}
onClick={() => player.changeTab(tab)}
className={
currentTab === tab
? 'outline-active-blue-border outline m-2 cursor-pointer'
: 'm-2 cursor-pointer'
}
>
Tab {i+1}
</div>
))}

5
frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
View file

@ -13,6 +13,7 @@ import { useModal } from 'App/components/Modal';
import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter'
import useCellMeasurerCache from 'App/hooks/useCellMeasurerCache'
import { toJS } from 'mobx'
const ALL = 'ALL';
const INFO = 'INFO';
@ -74,7 +75,9 @@ function ConsolePanel({ isLive }: { isLive: boolean }) {
const { player, store } = React.useContext(PlayerContext)
const jump = (t: number) => player.jump(t)
const { logList, exceptionsList, logListNow, exceptionsListNow } = store.get()
const { currentTab, tabStates } = store.get()
const { logList = [], exceptionsList = [], logListNow = [], exceptionsListNow = [] } = tabStates[currentTab]
const list = isLive ?
useMemo(() => logListNow.concat(exceptionsListNow).sort((a, b) => a.time - b.time),
[logListNow.length, exceptionsListNow.length]

1
frontend/app/components/shared/DevTools/useAutoscroll.ts
View file

@ -6,6 +6,7 @@ import useCancelableTimeout from 'App/hooks/useCancelableTimeout'
const TIMEOUT_DURATION = 5000;
export function getLastItemTime(...lists: Timed[][]) {
console.log(lists)
return Math.max(...lists.map(l => l.length ? l[l.length-1].time : 0))
}

2
frontend/app/player/common/ListWalker.ts
View file

@ -148,7 +148,7 @@ export default class ListWalker<T extends Timed> {
changed = true;
}
console.log(this.list[this.p - 1])
// console.log(this.list[this.p - 1])
return changed ? this.list[ this.p - 1 ] : null;
}

226
frontend/app/player/web/MessageManager.ts
View file

@ -2,29 +2,20 @@
import { Decoder } from "syncod";
import logger from 'App/logger';
import { TYPES as EVENT_TYPES } from 'Types/session/event';
import type { Store } from 'Player';
import ListWalker from '../common/ListWalker';
import PagesManager from './managers/PagesManager';
import MouseMoveManager from './managers/MouseMoveManager';
import PerformanceTrackManager from './managers/PerformanceTrackManager';
import WindowNodeCounter from './managers/WindowNodeCounter';
import ActivityManager from './managers/ActivityManager';
import { MouseThrashing, MType } from "./messages";
import type {
Message,
SetPageLocation,
ConnectionInformation,
SetViewportSize,
SetViewportScroll,
MouseClick,
} from './messages';
import Lists, { INITIAL_STATE as LISTS_INITIAL_STATE, State as ListsState } from './Lists';
import Lists from './Lists';
import Screen, {
INITIAL_STATE as SCREEN_INITIAL_STATE,
@ -32,26 +23,24 @@ import Screen, {
} from './Screen/Screen';
import type { InitialLists } from './Lists'
import type { PerformanceChartPoint } from './managers/PerformanceTrackManager';
import type { SkipInterval } from './managers/ActivityManager';
import TabManager from "Player/web/TabManager";
import TabSessionManager, { TabState } from "Player/web/TabManager";
import ActiveTabManager from "Player/web/managers/ActiveTabManager";
export interface State extends ScreenState, ListsState {
performanceChartData: PerformanceChartPoint[],
export interface State extends ScreenState {
skipIntervals: SkipInterval[],
connType?: string,
connBandwidth?: number,
location?: string,
performanceChartTime?: number,
performanceAvailability?: PerformanceTrackManager['availability']
tabStates: {
[tabId: string]: TabState,
}
domContentLoadedTime?: { time: number, value: number },
domBuildingTime?: number,
loadTime?: { time: number, value: number },
error: boolean,
messagesLoading: boolean,
cssLoading: boolean,
ready: boolean,
lastMessageTime: number,
@ -75,11 +64,11 @@ export const visualChanges = [
export default class MessageManager {
static INITIAL_STATE: State = {
...SCREEN_INITIAL_STATE,
...LISTS_INITIAL_STATE,
performanceChartData: [],
tabStates: {
'': { ...TabSessionManager.INITIAL_STATE },
},
skipIntervals: [],
error: false,
cssLoading: false,
ready: false,
lastMessageTime: 0,
firstVisualEvent: 0,
@ -89,117 +78,53 @@ export default class MessageManager {
tabs: [],
}
private locationEventManager: ListWalker<any>/*<LocationEvent>*/ = new ListWalker();
private locationManager: ListWalker<SetPageLocation> = new ListWalker();
private loadedLocationManager: ListWalker<SetPageLocation> = new ListWalker();
private connectionInfoManger: ListWalker<ConnectionInformation> = new ListWalker();
private performanceTrackManager: PerformanceTrackManager = new PerformanceTrackManager();
private windowNodeCounter: WindowNodeCounter = new WindowNodeCounter();
private clickManager: ListWalker<MouseClick> = new ListWalker();
private mouseThrashingManager: ListWalker<MouseThrashing> = new ListWalker();
private resizeManager: ListWalker<SetViewportSize> = new ListWalker([]);
private pagesManager: PagesManager;
private mouseMoveManager: MouseMoveManager;
private scrollManager: ListWalker<SetViewportScroll> = new ListWalker();
public readonly decoder = new Decoder();
private lists: Lists;
private activityManager: ActivityManager | null = null;
private readonly sessionStart: number;
private navigationStartOffset: number = 0;
private lastMessageTime: number = 0;
private firstVisualEventSet = false;
private tabs: Record<string,TabManager> = {};
private mouseMoveManager: MouseMoveManager;
private activeTabManager = new ActiveTabManager()
public readonly decoder = new Decoder();
private readonly sessionStart: number;
private lastMessageTime: number = 0;
private firstVisualEventSet = false;
public readonly tabs: Record<string, TabSessionManager> = {};
private activeTab = ''
constructor(
private readonly session: any /*Session*/,
private readonly state: Store<State>,
private readonly session: Record<string, any>,
private readonly state: Store<State & { time: number }>,
private readonly screen: Screen,
private readonly initialLists?: Partial<InitialLists>,
private readonly uiErrorHandler?: { error: (error: string) => void, },
) {
this.pagesManager = new PagesManager(screen, this.session.isMobile, this.setCSSLoading)
this.mouseMoveManager = new MouseMoveManager(screen)
this.sessionStart = this.session.startedAt
this.lists = new Lists(initialLists)
initialLists?.event?.forEach((e: Record<string, string>) => { // TODO: to one of "Movable" module
if (e.type === EVENT_TYPES.LOCATION) {
this.locationEventManager.append(e);
}
})
this.activityManager = new ActivityManager(this.session.duration.milliseconds) // only if not-live
}
public getListsFullState = () => {
return this.lists.getFullListsState()
// fullstate by tab
console.log(Object.values(this.tabs)[0].getListsFullState())
return Object.values(this.tabs)[0].getListsFullState()
}
public updateLists(lists: Partial<InitialLists>) {
Object.keys(lists).forEach((key: 'event' | 'stack' | 'exceptions') => {
const currentList = this.lists.lists[key]
lists[key]!.forEach(item => currentList.insert(item))
})
lists?.event?.forEach((e: Record<string, string>) => {
if (e.type === EVENT_TYPES.LOCATION) {
this.locationEventManager.append(e);
}
})
this.state.update({ ...this.lists.getFullListsState() });
}
private setCSSLoading = (cssLoading: boolean) => {
this.screen.displayFrame(!cssLoading)
this.state.update({ cssLoading, ready: !this.state.get().messagesLoading && !cssLoading })
// update each tab with tabid from events !!!
Object.values(this.tabs)[0].updateLists(lists)
}
public _sortMessagesHack = (msgs: Message[]) => {
// @ts-ignore Hack for upet (TODO: fix ordering in one mutation in tracker(removes first))
const headChildrenIds = msgs.filter(m => m.parentID === 1).map(m => m.id);
this.pagesManager.sortPages((m1, m2) => {
if (m1.time === m2.time) {
if (m1.tp === MType.RemoveNode && m2.tp !== MType.RemoveNode) {
if (headChildrenIds.includes(m1.id)) {
return -1;
}
} else if (m2.tp === MType.RemoveNode && m1.tp !== MType.RemoveNode) {
if (headChildrenIds.includes(m2.id)) {
return 1;
}
} else if (m2.tp === MType.RemoveNode && m1.tp === MType.RemoveNode) {
const m1FromHead = headChildrenIds.includes(m1.id);
const m2FromHead = headChildrenIds.includes(m2.id);
if (m1FromHead && !m2FromHead) {
return -1;
} else if (m2FromHead && !m1FromHead) {
return 1;
}
}
}
return 0;
})
Object.values(this.tabs).forEach(tab => tab._sortMessagesHack(msgs))
}
private waitingForFiles: boolean = false
public onFileReadSuccess = () => {
const stateToUpdate : Partial<State>= {
performanceChartData: this.performanceTrackManager.chartData,
performanceAvailability: this.performanceTrackManager.availability,
...this.lists.getFullListsState(),
}
if (this.activityManager) {
this.activityManager.end()
stateToUpdate.skipIntervals = this.activityManager.list
this.state.update({ skipIntervals: this.activityManager.list })
}
this.state.update(stateToUpdate)
}
public onFileReadFailed = (e: any) => {
@ -220,19 +145,12 @@ export default class MessageManager {
}
resetMessageManagers() {
this.locationEventManager = new ListWalker();
this.locationManager = new ListWalker();
this.loadedLocationManager = new ListWalker();
this.connectionInfoManger = new ListWalker();
this.clickManager = new ListWalker();
this.scrollManager = new ListWalker();
this.resizeManager = new ListWalker();
this.performanceTrackManager = new PerformanceTrackManager()
this.windowNodeCounter = new WindowNodeCounter();
this.pagesManager = new PagesManager(this.screen, this.session.isMobile, this.setCSSLoading)
this.mouseMoveManager = new MouseMoveManager(this.screen);
this.activityManager = new ActivityManager(this.session.duration.milliseconds);
this.activeTabManager = new ActiveTabManager()
Object.values(this.tabs).forEach(tab => tab.resetMessageManagers())
}
move(t: number): any {
@ -248,10 +166,15 @@ export default class MessageManager {
this.screen.cursor.shake();
}
if (tabId && this.state.get().currentTab !== tabId) {
if (tabId && this.activeTab !== tabId) {
this.state.update({ currentTab: tabId })
this.activeTab = tabId
}
this.tabs[this.state.get().currentTab].move(t)
if (!this.tabs[this.activeTab]) {
console.log(this.tabs, this.activeTab, tabId, this.activeTabManager.list)
}
// console.log(this.tabs, this.activeTab)
this.tabs[this.activeTab].move(t)
})
if (this.waitingForFiles && this.lastMessageTime <= t && t !== this.session.duration.milliseconds) {
@ -259,22 +182,26 @@ export default class MessageManager {
}
}
public changeTab(tabId) {
this.activeTab = tabId
this.state.update({ currentTab: tabId })
this.tabs[tabId].move(this.state.get().time)
}
distributeMessage = (msg: Message & { tabId: string }): void => {
if (!this.tabs[msg.tabId]) {
console.log(msg.tabId)
this.tabs[msg.tabId] = new TabManager(
this.tabs[msg.tabId] = new TabSessionManager(
this.session,
this.state,
this.screen,
msg.tabId,
this.setSize,
this.sessionStart,
this.initialLists,
)
}
// return this.tabs[msg.tabId].distributeMessage(msg)
const lastMessageTime = Math.max(msg.time, this.lastMessageTime)
this.lastMessageTime = lastMessageTime
this.state.update({ lastMessageTime })
@ -295,73 +222,16 @@ export default class MessageManager {
case MType.MouseClick:
this.clickManager.append(msg);
break;
// /* Lists: */
// case MType.ConsoleLog:
// if (msg.level === 'debug') break;
// this.lists.lists.log.append(
// // @ts-ignore : TODO: enums in the message schema
// Log(msg)
// )
// break;
// case MType.ResourceTimingDeprecated:
// case MType.ResourceTiming:
// // TODO: merge `resource` and `fetch` lists into one here instead of UI
// if (msg.initiator !== ResourceType.FETCH && msg.initiator !== ResourceType.XHR) {
// // @ts-ignore TODO: typing for lists
// this.lists.lists.resource.insert(getResourceFromResourceTiming(msg, this.sessionStart))
// }
// break;
// case MType.Fetch:
// case MType.NetworkRequest:
// this.lists.lists.fetch.insert(getResourceFromNetworkRequest(msg, this.sessionStart))
// break;
// case MType.Redux:
// this.lists.lists.redux.append(msg);
// break;
// case MType.NgRx:
// this.lists.lists.ngrx.append(msg);
// break;
// case MType.Vuex:
// this.lists.lists.vuex.append(msg);
// break;
// case MType.Zustand:
// this.lists.lists.zustand.append(msg)
// break
// case MType.MobX:
// this.lists.lists.mobx.append(msg);
// break;
// case MType.GraphQl:
// this.lists.lists.graphql.append(msg);
// break;
// case MType.Profiler:
// this.lists.lists.profiles.append(msg);
// break;
/* ===|=== */
default:
switch (msg.tp) {
case MType.CreateDocument:
if (!this.firstVisualEventSet) {
this.activeTabManager.append({ tp: MType.TabChange, tabId: msg.tabId, time: 0 })
this.state.update({ firstVisualEvent: msg.time, currentTab: msg.tabId, tabs: [msg.tabId] });
this.firstVisualEventSet = true;
}
// break;
// case MType.CreateTextNode:
// case MType.CreateElementNode:
// this.windowNodeCounter.addNode(msg.id, msg.parentID);
// this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
// break;
// case MType.MoveNode:
// this.windowNodeCounter.moveNode(msg.id, msg.parentID);
// this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
// break;
// case MType.RemoveNode:
// this.windowNodeCounter.removeNode(msg.id);
// this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
// break;
}
this.tabs[msg.tabId].distributeMessage(msg)
// this.performanceTrackManager.addNodeCountPointIfNeed(msg.time)
// isDOMType(msg.tp) && this.pagesManager.appendMessage(msg)
break;
}
}
@ -372,7 +242,7 @@ export default class MessageManager {
}
decodeMessage(msg: Message) {
return this.decoder.decode(msg)
return this.tabs[this.activeTab].decodeMessage(msg)
}
private setSize({ height, width }: { height: number, width: number }) {
@ -383,8 +253,6 @@ export default class MessageManager {
// TODO: clean managers?
clean() {
this.state.update(MessageManager.INITIAL_STATE);
// @ts-ignore
this.pagesManager.reset();
}
}

109
frontend/app/player/web/TabManager.ts
View file

@ -9,18 +9,29 @@ import {
import PerformanceTrackManager from "Player/web/managers/PerformanceTrackManager";
import WindowNodeCounter from "Player/web/managers/WindowNodeCounter";
import PagesManager from "Player/web/managers/PagesManager";
// @ts-ignore
import { Decoder } from "syncod";
import Lists, { InitialLists } from "Player/web/Lists";
import type { Store } from '../common/types';
import Lists, { InitialLists, INITIAL_STATE as LISTS_INITIAL_STATE, State as ListsState } from "Player/web/Lists";
import type { Store } from 'Player';
import Screen from "Player/web/Screen/Screen";
import { TYPES as EVENT_TYPES } from "Types/session/event";
import MouseMoveManager from "Player/web/managers/MouseMoveManager";
import ActivityManager from "Player/web/managers/ActivityManager";
import type { PerformanceChartPoint } from './managers/PerformanceTrackManager';
import { getResourceFromNetworkRequest, getResourceFromResourceTiming, Log, ResourceType } from "Player";
import { isDOMType } from "Player/web/messages/filters.gen";
import { State, visualChanges } from './MessageManager'
export default class TabManager {
export interface TabState extends ListsState {
performanceAvailability?: PerformanceTrackManager['availability']
performanceChartData: PerformanceChartPoint[],
cssLoading: boolean,
}
export default class TabSessionManager {
static INITIAL_STATE: TabState = {
...LISTS_INITIAL_STATE,
performanceChartData: [],
cssLoading: false,
}
private locationEventManager: ListWalker<any>/*<LocationEvent>*/ = new ListWalker();
private locationManager: ListWalker<SetPageLocation> = new ListWalker();
private loadedLocationManager: ListWalker<SetPageLocation> = new ListWalker();
@ -34,19 +45,20 @@ export default class TabManager {
public readonly decoder = new Decoder();
private lists: Lists;
private navigationStartOffset = 0
constructor(
private readonly session: any,
private readonly state: Store<{}>,
private readonly state: Store<{ tabStates: { [tabId: string]: TabState } }>,
private readonly screen: Screen,
private readonly id: string,
private readonly setSize: ({ height, width }: { height: number, width: number }) => void,
private readonly sessionStart: number,
initialLists?: Partial<InitialLists>,
) {
this.pagesManager = new PagesManager(screen, this.session.isMobile, this.setCSSLoading)
this.lists = new Lists(initialLists)
initialLists?.event?.forEach((e: Record<string, string>) => { // TODO: to one of "Moveable" module
initialLists?.event?.forEach((e: Record<string, string>) => { // TODO: to one of "Movable" module
if (e.type === EVENT_TYPES.LOCATION) {
this.locationEventManager.append(e);
}
@ -64,15 +76,33 @@ export default class TabManager {
}
})
this.state.update({ ...this.lists.getFullListsState() });
this.updateLocalState({ ...this.lists.getFullListsState() });
}
updateLocalState(state: Partial<TabState>) {
this.state.update({
tabStates: {
...this.state.get().tabStates,
[this.id]: {
...this.state.get().tabStates[this.id],
...state
}
}
})
}
private setCSSLoading = (cssLoading: boolean) => {
this.screen.displayFrame(!cssLoading)
this.state.update({ cssLoading, ready: !this.state.get().messagesLoading && !cssLoading })
this.updateLocalState({
cssLoading
})
this.state.update({
// @ts-ignore
ready: !this.state.get().messagesLoading && !cssLoading
})
}
resetMessageManagers() {
public resetMessageManagers() {
this.locationEventManager = new ListWalker();
this.locationManager = new ListWalker();
this.loadedLocationManager = new ListWalker();
@ -115,6 +145,7 @@ export default class TabManager {
/* Lists: */
case MType.ConsoleLog:
if (msg.level === 'debug') break;
console.log(msg)
this.lists.lists.log.append(
// @ts-ignore : TODO: enums in the message schema
Log(msg)
@ -180,7 +211,6 @@ export default class TabManager {
}
move(t: number, index?: number): void {
const stateToUpdate: Partial<State> = {};
/* == REFACTOR_ME == */
const lastLoadedLocationMsg = this.loadedLocationManager.moveGetLast(t, index);
@ -222,7 +252,7 @@ export default class TabManager {
}
Object.assign(stateToUpdate, this.lists.moveGetState(t))
Object.keys(stateToUpdate).length > 0 && this.state.update(stateToUpdate);
Object.keys(stateToUpdate).length > 0 && this.updateLocalState(stateToUpdate);
/* Sequence of the managers is important here */
// Preparing the size of "screen"
@ -236,9 +266,54 @@ export default class TabManager {
this.screen.window.scrollTo(lastScroll.x, lastScroll.y);
}
})
}
// if (this.waitingForFiles && this.lastMessageTime <= t && t !== this.session.duration.milliseconds) {
// this.setMessagesLoading(true)
// }
public decodeMessage(msg: Message) {
return this.decoder.decode(msg)
}
public _sortMessagesHack = (msgs: Message[]) => {
// @ts-ignore Hack for upet (TODO: fix ordering in one mutation in tracker(removes first))
const headChildrenIds = msgs.filter(m => m.parentID === 1).map(m => m.id);
this.pagesManager.sortPages((m1, m2) => {
if (m1.time === m2.time) {
if (m1.tp === MType.RemoveNode && m2.tp !== MType.RemoveNode) {
if (headChildrenIds.includes(m1.id)) {
return -1;
}
} else if (m2.tp === MType.RemoveNode && m1.tp !== MType.RemoveNode) {
if (headChildrenIds.includes(m2.id)) {
return 1;
}
} else if (m2.tp === MType.RemoveNode && m1.tp === MType.RemoveNode) {
const m1FromHead = headChildrenIds.includes(m1.id);
const m2FromHead = headChildrenIds.includes(m2.id);
if (m1FromHead && !m2FromHead) {
return -1;
} else if (m2FromHead && !m1FromHead) {
return 1;
}
}
}
return 0;
})
}
public onFileReadSuccess = () => {
const stateToUpdate : Partial<State>= {
performanceChartData: this.performanceTrackManager.chartData,
performanceAvailability: this.performanceTrackManager.availability,
...this.lists.getFullListsState(),
}
this.updateLocalState(stateToUpdate)
}
public getListsFullState = () => {
return this.lists.getFullListsState()
}
clean() {
this.pagesManager.reset()
}
}

4
frontend/app/player/web/WebPlayer.ts
View file

@ -163,6 +163,10 @@ export default class WebPlayer extends Player {
this.screen.cursor.showTag(name)
}
changeTab = (tab: string) => {
this.messageManager.changeTab(tab)
}
clean = () => {
super.clean()
this.screen.clean()

2
frontend/app/player/web/managers/ActiveTabManager.ts
View file

@ -11,7 +11,7 @@ export default class ActiveTabManager extends ListWalker<TabChange> {
}
this.currentTime = t
const msg = this.moveGetLastDebug(t)
console.log('move', t, msg, this.list)
// console.log('move', t, msg, this.list)
return Promise.resolve(msg?.tabId || null)
}

1
frontend/app/player/web/messages/MFileReader.ts
View file

@ -22,6 +22,7 @@ export default class MFileReader extends RawMessageReader {
// 0xff 0xff 0xff 0xff 0xff 0xff 0xff 0xff = no indexes + weird failover (don't ask)
const skipIndexes = this.readCustomIndex(this.buf.slice(0, 8)) === 72057594037927940
|| this.readCustomIndex(this.buf.slice(0, 9)) === 72057594037927940
if (skipIndexes) {
this.noIndexes = true
this.skip(8)

4
tracker/tracker/src/main/app/index.ts
View file

@ -1,5 +1,5 @@
import type Message from './messages.gen.js'
import { Timestamp, Metadata, UserID, Type as MType, TabChange } from './messages.gen.js'
import { Timestamp, Metadata, UserID, Type as MType, TabChange, TabData } from './messages.gen.js'
import { now, adjustTimeOrigin, deprecationWarn } from '../utils.js'
import Nodes from './nodes.js'
import Observer from './observer/top_observer.js'
@ -259,6 +259,7 @@ export default class App {
}
private commit(): void {
if (this.worker && this.messages.length) {
this.messages.unshift(TabData(this.session.getTabId()))
this.messages.unshift(Timestamp(this.timestamp()))
this.worker.postMessage(this.messages)
this.commitCallbacks.forEach((cb) => cb(this.messages))
@ -530,6 +531,7 @@ export default class App {
})
if (!isNewSession) {
console.log('continuing session on new tab', this.session.getTabId())
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
this.send(TabChange(this.session.getTabId()))
}
// (Re)send Metadata for the case of a new session