Remove tree-view button #3647 (#3748)

* Remove tree-view button #3647

* Add changes to changelog #3647

* Fix failing e2e tests #3647

visualization/CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Changed
 
 - Change OrbitControls to MapControls for improved map navigation [#3693](https://github.com/MaibornWolff/codecharta/pull/3693)
+- Remove unnecessary button that opened and closed the file explorer [#3647](https://github.com/MaibornWolff/codecharta/pull/3748)
 - Overhaul Focus and Unfocus functionality[#3706](https://github.com/MaibornWolff/codecharta/pull/3706)
 
 ### Chore 👨‍💻 👩‍💻

visualization/app/codeCharta/state/effects/nodeContextMenu/nodeContextMenu.e2e.ts

@@ -1,19 +1,19 @@
 import { clearIndexedDB, goto } from "../../../../puppeteer.helper"
 import { NodeContextMenuPageObject } from "./nodeContextMenu.po"
-import { SearchPanelModeSelectorPageObject } from "../../../ui/ribbonBar/searchPanel/searchPanelModeSelector/searchPanelModeSelector.po"
 import { MapTreeViewLevelPageObject } from "../../../ui/ribbonBar/searchPanel/mapTreeView/mapTreeView.level.po"
 import { CodeMapPageObject } from "../../../ui/codeMap/codeMap.po"
+import { SearchPanelPageObject } from "../../../ui/ribbonBar/searchPanel/searchPanel.po"
 
 describe("NodeContextMenu", () => {
     let contextMenu: NodeContextMenuPageObject
-    let searchPanelModeSelector: SearchPanelModeSelectorPageObject
+    let searchPanel: SearchPanelPageObject
     let mapTreeViewLevel: MapTreeViewLevelPageObject
     let codeMap: CodeMapPageObject
 
     beforeEach(async () => {
         await jestPuppeteer.resetPage()
         contextMenu = new NodeContextMenuPageObject()
-        searchPanelModeSelector = new SearchPanelModeSelectorPageObject()
+        searchPanel = new SearchPanelPageObject()
         mapTreeViewLevel = new MapTreeViewLevelPageObject()
         codeMap = new CodeMapPageObject()
 
@@ -25,15 +25,15 @@ describe("NodeContextMenu", () => {
     })
 
     it("right clicking a folder should open a context menu with color options", async () => {
-        await searchPanelModeSelector.toggleTreeView()
+        await searchPanel.toggle()
         await mapTreeViewLevel.openContextMenu("/root")
 
         const result = await contextMenu.hasColorButtons()
         expect(await result.isIntersectingViewport()).toBe(true)
     })
 
     it("clicking the map should close open node context menu", async () => {
-        await searchPanelModeSelector.toggleTreeView()
+        await searchPanel.toggle()
         await mapTreeViewLevel.openContextMenu("/root")
 
         await contextMenu.isOpened()
@@ -43,7 +43,7 @@ describe("NodeContextMenu", () => {
     })
 
     it("right clicking the map should close open node context menu already on mousedown", async () => {
-        await searchPanelModeSelector.toggleTreeView()
+        await searchPanel.toggle()
         await mapTreeViewLevel.openContextMenu("/root")
 
         await contextMenu.isOpened()
@@ -53,7 +53,7 @@ describe("NodeContextMenu", () => {
     }, 60_000)
 
     it("zoom in and out or using mouse wheel on the map should close open node context menu", async () => {
-        await searchPanelModeSelector.toggleTreeView()
+        await searchPanel.toggle()
         await mapTreeViewLevel.openContextMenu("/root")
 
         await contextMenu.isOpened()

visualization/app/codeCharta/ui/legendPanel/legendPanel.e2e.ts

@@ -2,20 +2,20 @@ import { clearIndexedDB, clickButtonOnPageElement, goto } from "../../../puppete
 import { expect } from "@jest/globals"
 import { LegendPanelObject } from "./legendPanel.po"
 import { MapTreeViewLevelPageObject } from "../ribbonBar/searchPanel/mapTreeView/mapTreeView.level.po"
-import { SearchPanelModeSelectorPageObject } from "../ribbonBar/searchPanel/searchPanelModeSelector/searchPanelModeSelector.po"
 import { UploadFileButtonPageObject } from "../toolBar/uploadFilesButton/uploadFilesButton.po"
+import { SearchPanelPageObject } from "../ribbonBar/searchPanel/searchPanel.po"
 
 describe("LegendPanel", () => {
     let legendPanelObject: LegendPanelObject
     let uploadFilesButton: UploadFileButtonPageObject
     let mapTreeViewLevel: MapTreeViewLevelPageObject
-    let searchPanelModeSelector: SearchPanelModeSelectorPageObject
+    let searchPanel: SearchPanelPageObject
 
     beforeEach(async () => {
         legendPanelObject = new LegendPanelObject()
         uploadFilesButton = new UploadFileButtonPageObject()
         mapTreeViewLevel = new MapTreeViewLevelPageObject()
-        searchPanelModeSelector = new SearchPanelModeSelectorPageObject()
+        searchPanel = new SearchPanelPageObject()
 
         await goto()
         await setupTest()
@@ -28,7 +28,7 @@ describe("LegendPanel", () => {
     async function setupTest() {
         await uploadFilesButton.openFiles(["./app/codeCharta/resources/sample1_with_different_edges.cc.json"])
         await legendPanelObject.open()
-        await searchPanelModeSelector.toggleTreeView()
+        await searchPanel.toggle()
         await mapTreeViewLevel.openContextMenu("/root")
         await clickButtonOnPageElement(".colorButton:nth-child(2)")
     }

visualization/app/codeCharta/ui/ribbonBar/searchPanel/mapTreeView/mapTreeView.level.e2e.ts

@@ -1,16 +1,16 @@
 import { clearIndexedDB, goto } from "../../../../../puppeteer.helper"
 import { MapTreeViewLevelPageObject } from "./mapTreeView.level.po"
-import { SearchPanelModeSelectorPageObject } from "../searchPanelModeSelector/searchPanelModeSelector.po"
 import { NodeContextMenuPageObject } from "../../../../state/effects/nodeContextMenu/nodeContextMenu.po"
+import { SearchPanelPageObject } from "../searchPanel.po"
 
 describe("MapTreeViewLevel", () => {
     let mapTreeViewLevel: MapTreeViewLevelPageObject
-    let searchPanelModeSelector: SearchPanelModeSelectorPageObject
+    let searchPanel: SearchPanelPageObject
     let nodeContextMenu: NodeContextMenuPageObject
 
     beforeEach(async () => {
         mapTreeViewLevel = new MapTreeViewLevelPageObject()
-        searchPanelModeSelector = new SearchPanelModeSelectorPageObject()
+        searchPanel = new SearchPanelPageObject()
         nodeContextMenu = new NodeContextMenuPageObject()
 
         await goto()
@@ -24,7 +24,7 @@ describe("MapTreeViewLevel", () => {
         it("excluding a building should exclude it from the tree-view as well", async () => {
             const filePath = "/root/sample1.cc.json/ParentLeaf/smallLeaf.html"
 
-            await searchPanelModeSelector.toggleTreeView()
+            await searchPanel.toggle()
             await mapTreeViewLevel.openFolder("/root/sample1.cc.json")
             await mapTreeViewLevel.openFolder("/root/sample1.cc.json/ParentLeaf")
             await mapTreeViewLevel.openContextMenu(filePath)
@@ -38,7 +38,7 @@ describe("MapTreeViewLevel", () => {
         it("NodeContextMenu path should remain marked when hovering over another mapTreeView Element", async () => {
             const filePath = "/root/sample1.cc.json/ParentLeaf/smallLeaf.html"
 
-            await searchPanelModeSelector.toggleTreeView()
+            await searchPanel.toggle()
             await mapTreeViewLevel.openFolder("/root/sample1.cc.json")
             await mapTreeViewLevel.openFolder("/root/sample1.cc.json/ParentLeaf")
             await mapTreeViewLevel.openContextMenu(filePath)

visualization/app/codeCharta/ui/ribbonBar/searchPanel/searchPanelModeSelector/searchPanelModeSelector.component.html

@@ -1,9 +1,4 @@
-<mat-button-toggle-group [value]="searchPanelMode">
-    <mat-button-toggle id="tree-view" value="tree-view" (click)="updateSearchPanelMode('treeView')">
-        <i class="fa fa-sitemap"></i>
-    </mat-button-toggle>
-    <mat-button-toggle id="blacklist" value="blacklist" (click)="updateSearchPanelMode('blacklist')">
-        <i class="fa fa-eye-slash"></i>
-        <div class="has-blacklist-items-indicator" [hidden]="hideBlacklistItemsIndicator$ | async"></div>
-    </mat-button-toggle>
-</mat-button-toggle-group>
+<mat-button-toggle id="blacklist" value="blacklist" (click)="updateSearchPanelMode('blacklist')">
+    <i class="fa fa-eye-slash"></i>
+    <div class="has-blacklist-items-indicator" [hidden]="hideBlacklistItemsIndicator$ | async"></div>
+</mat-button-toggle>

visualization/app/codeCharta/ui/ribbonBar/searchPanel/searchPanelModeSelector/searchPanelModeSelector.component.scss

@@ -1,8 +1,7 @@
 cc-search-panel-mode-selector {
-    mat-button-toggle-group {
+    mat-button-toggle {
         height: 100%;
         align-items: center;
-        font-size: 12px;
     }
 
     .has-blacklist-items-indicator {