From 99ec34186e995dd3b6ea4cf1b0d1ab9cb45cded5 Mon Sep 17 00:00:00 2001
From: wakonig_k <klaus.wakonig@psi.ch>
Date: Wed, 11 Jun 2025 14:39:13 +0200
Subject: [PATCH] wip - refactored dashboard

---
 backend/bec_atlas/model/model.py              |  2 +
 .../app/dashboard/dashboard.component.html    | 49 ++++---------
 .../app/dashboard/dashboard.component.scss    |  3 +-
 .../src/app/dashboard/dashboard.component.ts  | 72 ++++++++++---------
 frontend/bec_atlas/src/index.html             | 16 +++++
 5 files changed, 70 insertions(+), 72 deletions(-)

diff --git a/backend/bec_atlas/model/model.py b/backend/bec_atlas/model/model.py
index 77c6d07..d443ce1 100644
--- a/backend/bec_atlas/model/model.py
+++ b/backend/bec_atlas/model/model.py
@@ -171,6 +171,8 @@ class State(AccessProfile):
 class Session(MongoBaseModel, AccessProfile):
     deployment_id: str
     name: str
+    prefix: str = ""
+    description: str = ""
 
 
 SessionPartial = make_all_fields_optional(Session, "SessionPartial")
diff --git a/frontend/bec_atlas/src/app/dashboard/dashboard.component.html b/frontend/bec_atlas/src/app/dashboard/dashboard.component.html
index 54ba06e..78f0cc4 100644
--- a/frontend/bec_atlas/src/app/dashboard/dashboard.component.html
+++ b/frontend/bec_atlas/src/app/dashboard/dashboard.component.html
@@ -4,46 +4,23 @@
       <img
         src="assets/BEC-Atlas-full-transparent.png"
         alt="BEC"
-        width="80"
-        height="80"
+        width="25"
+        height="25"
         style="margin: 10px"
       />
     </div>
-    <mat-divider></mat-divider>
-
-    <!-- Username expansion panel -->
-    <mat-expansion-panel>
-      <mat-expansion-panel-header>
-        <mat-icon>account_circle</mat-icon>
-        <span class="menu-text">Username</span>
-      </mat-expansion-panel-header>
-
-      <button mat-button>Profile</button>
-      <button mat-button>Settings</button>
-      <button mat-button (click)="logout()">Logout</button>
-    </mat-expansion-panel>
 
     <mat-divider></mat-divider>
-
-    <!--  Data Browser -->
-    <mat-expansion-panel>
-      <mat-expansion-panel-header>
-        <mat-icon>table_chart</mat-icon>
-        <span class="menu-text">Data Browser</span>
-      </mat-expansion-panel-header>
-
-      <button
-        mat-button
-        class="menu-item"
-        [routerLink]="['/dashboard/scan-table']"
-      >
-        Scan Data
-      </button>
-      <button mat-button class="menu-item">Device Data</button>
-    </mat-expansion-panel>
+    <app-sidepanel-icon icon="science" label="Experiment"></app-sidepanel-icon>
+    <app-sidepanel-icon icon="description" label="Data"></app-sidepanel-icon>
+    <app-sidepanel-icon
+      icon="manage_accounts"
+      label="Access"
+      [active]="true"
+    ></app-sidepanel-icon>
 
     <!-- Experiment Control Expansion -->
-    <mat-expansion-panel
+    <!-- <mat-expansion-panel
       (opened)="panelOpened()"
       [hideToggle]="hideExperimentPanel"
     >
@@ -70,10 +47,10 @@
       <button mat-button class="menu-item" (click)="openDeploymentDialog()">
         <span class="menu-text">{{ selectOrSwitchButtonTitle }}</span>
       </button>
-    </mat-expansion-panel>
+    </mat-expansion-panel> -->
 
     <!-- Help -->
-    <button mat-button class="menu-item">
+    <!-- <button mat-button class="menu-item">
       <mat-icon>help</mat-icon>
       <span class="menu-text">Help</span>
     </button>
@@ -84,7 +61,7 @@
       <div class="menu-text">{{ realm_name }}</div>
       <div class="menu-text">{{ deployment_name }}</div>
     </div>
-    }
+    } -->
   </mat-sidenav>
 
   <mat-sidenav-content>
diff --git a/frontend/bec_atlas/src/app/dashboard/dashboard.component.scss b/frontend/bec_atlas/src/app/dashboard/dashboard.component.scss
index bd7cfaa..66657e7 100644
--- a/frontend/bec_atlas/src/app/dashboard/dashboard.component.scss
+++ b/frontend/bec_atlas/src/app/dashboard/dashboard.component.scss
@@ -7,10 +7,9 @@
 }
 
 mat-sidenav {
-  width: 250px;
+  width: 70px;
   background: var(--mat-sys-surface-container);
   border-radius: 0px;
-  padding-left: 6px;
   text-align: center;
   @include mat.elevation(3);
 }
diff --git a/frontend/bec_atlas/src/app/dashboard/dashboard.component.ts b/frontend/bec_atlas/src/app/dashboard/dashboard.component.ts
index 2d73d74..ea0de96 100644
--- a/frontend/bec_atlas/src/app/dashboard/dashboard.component.ts
+++ b/frontend/bec_atlas/src/app/dashboard/dashboard.component.ts
@@ -16,6 +16,9 @@ import {
 import { DeploymentSelectionComponent } from '../deployment-selection/deployment-selection.component';
 import { RedisConnectorService } from '../core/redis-connector.service';
 import { AuthDataService } from '../core/remote-data.service';
+import { SidePanelComponent } from '../scan-table/side-panel/side-panel.component';
+import { SidepanelIconComponent } from './sidepanel-icon/sidepanel-icon.component';
+
 @Component({
   selector: 'app-dashboard',
   imports: [
@@ -27,6 +30,8 @@ import { AuthDataService } from '../core/remote-data.service';
     MatButtonModule,
     MatDialogModule,
     RouterModule,
+    SidePanelComponent,
+    SidepanelIconComponent,
   ],
   providers: [DeploymentService, RedisConnectorService],
   templateUrl: './dashboard.component.html',
@@ -50,21 +55,20 @@ export class DashboardComponent {
   ngOnInit(): void {
     // check if the user has already selected a deployment
     // if not, open the deployment selection dialog
-    this.deploymentService.selectedDeployment.subscribe((deployment) => {
-      if (deployment) {
-        console.log('Updating deployment name to: ', deployment.name);
-        this.deployment_name = deployment.name;
-        this.realm_name = deployment.realm_id;
-        this.hideExperimentPanel = false;
-        this.selectOrSwitchButtonTitle = 'Switch Deployment';
-      } else {
-        this.deployment_name = '';
-        this.realm_name = '';
-        this.hideExperimentPanel = true;
-        this.selectOrSwitchButtonTitle = 'Select Deployment';
-      }
-    });
-
+    // this.deploymentService.selectedDeployment.subscribe((deployment) => {
+    //   if (deployment) {
+    //     console.log('Updating deployment name to: ', deployment.name);
+    //     this.deployment_name = deployment.name;
+    //     this.realm_name = deployment.realm_id;
+    //     this.hideExperimentPanel = false;
+    //     this.selectOrSwitchButtonTitle = 'Switch Deployment';
+    //   } else {
+    //     this.deployment_name = '';
+    //     this.realm_name = '';
+    //     this.hideExperimentPanel = true;
+    //     this.selectOrSwitchButtonTitle = 'Select Deployment';
+    //   }
+    // });
     // this.breakpointObserver
     //   .observe([Breakpoints.Small, Breakpoints.XSmall])
     //   .subscribe((result) => {
@@ -72,26 +76,26 @@ export class DashboardComponent {
     //   });
   }
 
-  openDeploymentDialog() {
-    // open deployment dialog
-    let dialogConfig: MatDialogConfig = {
-      disableClose: true,
-      width: '80%',
-    };
-    let dialogRef = this.dialog.open(
-      DeploymentSelectionComponent,
-      dialogConfig
-    );
-    dialogRef.afterClosed().subscribe((result) => {
-      this.deploymentService.selectDeployment(result);
-    });
-  }
+  // openDeploymentDialog() {
+  //   // open deployment dialog
+  //   let dialogConfig: MatDialogConfig = {
+  //     disableClose: true,
+  //     width: '80%',
+  //   };
+  //   let dialogRef = this.dialog.open(
+  //     DeploymentSelectionComponent,
+  //     dialogConfig
+  //   );
+  //   dialogRef.afterClosed().subscribe((result) => {
+  //     this.deploymentService.selectDeployment(result);
+  //   });
+  // }
 
-  panelOpened() {
-    if (!this.deploymentService.selectedDeployment.value) {
-      this.openDeploymentDialog();
-    }
-  }
+  // panelOpened() {
+  //   if (!this.deploymentService.selectedDeployment.value) {
+  //     this.openDeploymentDialog();
+  //   }
+  // }
 
   logout() {
     this.authDataService.logout();
diff --git a/frontend/bec_atlas/src/index.html b/frontend/bec_atlas/src/index.html
index 1bd567c..d4e1cb2 100644
--- a/frontend/bec_atlas/src/index.html
+++ b/frontend/bec_atlas/src/index.html
@@ -18,6 +18,22 @@
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
+      rel="stylesheet"
+    />
   </head>
   <body class="mat-typography">
     <app-root></app-root>