fix(player): clear selection manger on clicks; display frustrations row on xray by default

frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx

@@ -18,6 +18,7 @@ function OverviewPanel({ issuesList }: { issuesList: Record<string, any>[] }) {
   const [dataLoaded, setDataLoaded] = React.useState(false);
   const [selectedFeatures, setSelectedFeatures] = React.useState([
     'PERFORMANCE',
+    'FRUSTRATIONS',
     'ERRORS',
     'NETWORK',
   ]);

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
+  }
 
 }

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<SelectionChange> {
   constructor(private readonly vElements: Map<number, VElement>, 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())