diff --git a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx index 4382ae0b9..8ff9af3f3 100644 --- a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx +++ b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx @@ -18,6 +18,7 @@ function OverviewPanel({ issuesList }: { issuesList: Record[] }) { const [dataLoaded, setDataLoaded] = React.useState(false); const [selectedFeatures, setSelectedFeatures] = React.useState([ 'PERFORMANCE', + 'FRUSTRATIONS', 'ERRORS', 'NETWORK', ]); diff --git a/frontend/app/player/web/Screen/Cursor.ts b/frontend/app/player/web/Screen/Cursor.ts index dc3637c1b..19283d9d4 100644 --- a/frontend/app/player/web/Screen/Cursor.ts +++ b/frontend/app/player/web/Screen/Cursor.ts @@ -8,6 +8,7 @@ export default class Cursor { private tagElement: HTMLDivElement; private coords = { x: 0, y: 0 }; private isMoving = false; + private onClick: () => void; constructor(overlay: HTMLDivElement, isMobile: boolean) { this.cursor = document.createElement('div'); @@ -75,13 +76,14 @@ export default class Cursor { click() { const styleList = this.isMobile ? styles.clickedMobile : styles.clicked this.cursor.classList.add(styleList) + this.onClick?.() setTimeout(() => { this.cursor.classList.remove(styleList) }, 600) } - // TODO (to keep on a different playing speed): - // transition - // setTransitionSpeed() + setOnClickHook(callback: () => void) { + this.onClick = callback + } } diff --git a/frontend/app/player/web/managers/DOM/SelectionManager.ts b/frontend/app/player/web/managers/DOM/SelectionManager.ts index c457ec3b8..6e1ef8ff2 100644 --- a/frontend/app/player/web/managers/DOM/SelectionManager.ts +++ b/frontend/app/player/web/managers/DOM/SelectionManager.ts @@ -6,12 +6,13 @@ import Screen from 'Player/web/Screen/Screen'; export default class SelectionManager extends ListWalker { constructor(private readonly vElements: Map, private readonly screen: Screen) { super(); + this.screen.cursor.setOnClickHook(this.clearSelection) } private selected: [{ id: number, node: Element } | null, { id: number, node: Element } | null] = [null, null]; private markers: Element[] = [] - clearSelection() { + public clearSelection = () => { this.selected[0] && this.screen.overlay.removeChild(this.selected[0].node) && this.selected[0].node.remove(); this.selected[1] && this.screen.overlay.removeChild(this.selected[1].node) && this.selected[1].node.remove(); this.markers.forEach(marker => marker.remove())