docs: mention context menu and tree map in readme

README.md

@@ -28,7 +28,21 @@ The Team Alignment Analysis shows whether your team structure and module/domain
 
 A Hotspot is a complex file with that was previously changed quite often and hence comes with a higher risk for bugs.
 
-![Hotspots](./docs/hotspots.png)
+![Hotspots](./docs/hotspots-treemap.png)
+
+For each region, Detective calculates a hotspot score which is the product of the amount of changes and the complexity. You can see it as an sort index. Please keep in mind that this score is local to your analysis and hence cannot be compared with scores resulting from other analyses.
+
+The slider on the top left defines when a region is identified as a hotspot. For instance, 33% defines that each region having 33% or more of the maximum hotspot score is a hotspot. For a better overview, these hotspots are seperated into two equal areas: the lower half is displayed yellow and the upper half is red.
+
+When clicking on an region, the files in this region are displayed:
+
+![Details of a Hotspot](./docs/hotspot-details.png)
+
+## Tree
+
+The tree can be resized horizontally. Also, each entry has a context menu that allows to focus the current entry (making the current entry the root entry) and selecting all children:
+
+![Focus on subfolder and select all children](./docs/context-menu.png)
 
 ## Using
 

apps/frontend/src/app/features/hotspot/hotspot.component.html

@@ -19,7 +19,7 @@
     </mat-form-field>
 
     <mat-icon
-      matTooltip="A Hotspot is a complex file that was previously changed quite often and hence comes with a higher risk for bugs. The calculated hotspot score is the product of the amount of changes and the complexity. You can see it as an sort index and you cannot compare it with other hotspot analyses. The slider on the left defines when a region is identified as a hotspot. For instance, 33% defines that each region having 33% or more of the maximum hotspot score is a hotspot. For a better overview, these hotspots are seperated into two equal areas: the lowever half is displayed yellow and the upper half is red."
+      matTooltip="A Hotspot is a complex file that was previously changed quite often and hence comes with a higher risk for bugs. The calculated hotspot score is the product of the amount of changes and the complexity. You can see it as an sort index and you cannot compare it with other hotspot analyses. The slider on the left defines when a region is identified as a hotspot. For instance, 33% defines that each region having 33% or more of the maximum hotspot score is a hotspot. For a better overview, these hotspots are seperated into two equal areas: the lower half is displayed yellow and the upper half is red."
       matTooltipPosition="above"
       class="help-icon-hotspot"
     >

apps/frontend/src/app/shell/filter-tree/filter-tree.component.html

@@ -47,7 +47,7 @@
       }
       <button mat-menu-item (click)="selectChildren(node)">
         <mat-icon>checklist</mat-icon>
-        <span>Select the children</span>
+        <span>Select all children</span>
       </button>
     </mat-menu>
   </mat-tree-node>

apps/frontend/src/app/shell/filter-tree/filter-tree.component.ts

@@ -110,6 +110,7 @@ export class FilterTreeComponent implements OnInit {
       ?.addEventListener('mousedown', () => {
         trigger.closeMenu();
       });
+    removeFocus();
   }
 
   selectChildren(folder: Folder) {
@@ -199,5 +200,7 @@ export class FilterTreeComponent implements OnInit {
 }
 
 function removeFocus() {
-  (document.activeElement as HTMLElement).blur();
+  setTimeout(() => {
+    (document.activeElement as HTMLElement)?.blur();
+  });
 }