#177 graph screen improvements

angular-client/src/pages/graph-page/graph-header/graph-header.component.html

@@ -4,7 +4,7 @@
     <typography
       variant="large-header"
       additionalStyles="margin-top: 10px; margin-left: 15px; margin-bottom: 0px"
-      [content]="time | date: 'HH:mm:ss'"
+      [content]="time | date: 'h:mm:ss'"
     />
   </div>
   <div header-right>

angular-client/src/pages/graph-page/graph-page.component.html

@@ -10,7 +10,12 @@
   <div class="container">
     <graph-header class="graph-header" [runId]="run?.id" />
     <div class="content-div">
-      <graph-sidebar [nodes]="nodes!" [selectDataType]="setSelectedDataType" class="desktop-sidebar" />
+      <graph-sidebar
+        [nodes]="nodes!"
+        [selectDataType]="setSelectedDataType"
+        [selectedDataType]="selectedDataType"
+        class="desktop-sidebar"
+      />
       <div class="right-container">
         <graph [valuesSubject]="selectedDataTypeValuesSubject" class="graph" />
         <graph-caption

angular-client/src/pages/graph-page/graph-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { MessageService } from 'primeng/api';
 import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import { getDataByDataTypeNameAndRunId } from 'src/api/data.api';
@@ -37,6 +37,8 @@ export default class GraphPage implements OnInit {
   selectedDataTypeValuesError?: Error;
   subscription?: Subscription;
 
+  dataTypeName?: string;
+
   constructor(
     private serverService: APIService,
     private storage: Storage,
@@ -97,7 +99,6 @@ export default class GraphPage implements OnInit {
           this.selectedDataTypeValuesIsError = true;
         });
         dataQueryResponse.data.subscribe((data: DataValue[]) => {
-          console.log(data);
           this.selectedDataTypeValuesSubject.next(data.map((value) => ({ x: +value.time, y: +value.values[0] })));
           this.currentValue.next(data.pop());
         });
@@ -109,6 +110,10 @@ export default class GraphPage implements OnInit {
         });
       }
     };
+
+    this.selectedDataType.subscribe((dataType: DataType) => {
+      this.dataTypeName = dataType.name;
+    });
   }
 
   onRunSelected = (run: Run) => {
@@ -121,15 +126,12 @@ export default class GraphPage implements OnInit {
   };
 
   onSetRealtime = () => {
-    const currentRunId = this.storage.getCurrentRunId().value;
-    if (currentRunId) {
-      this.run = this.allRuns.find((run) => run.id === currentRunId);
-      this.realTime = true;
-      this.selectedDataTypeValuesSubject.next([]);
-      this.selectedDataTypeValuesIsLoading = false;
-      this.selectedDataTypeValuesIsError = false;
-      this.selectedDataTypeValuesError = undefined;
-    }
+    this.run = undefined;
+    this.realTime = true;
+    this.selectedDataTypeValuesSubject.next([]);
+    this.selectedDataTypeValuesIsLoading = false;
+    this.selectedDataTypeValuesIsError = false;
+    this.selectedDataTypeValuesError = undefined;
   };
 
   /**
@@ -156,4 +158,55 @@ export default class GraphPage implements OnInit {
   setSelectedDataType!: (dataType: DataType) => void;
 
   clearDataType!: () => void;
+
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    if (this.dataTypeName === undefined) {
+      this.setSelectedDataType(this.nodes?.at(0)?.dataTypes[0] as DataType);
+    } else {
+      const node = this.getNode(this.dataTypeName as string);
+      const nodeIndex = this.getNodeIndex(this.getNode(this.dataTypeName as string));
+      const dataTypeIndex = this.getDataTypeIndex(
+        this.getNode(this.dataTypeName as string),
+        this.getDataType(this.getNode(this.dataTypeName as string), this.dataTypeName as string)
+      );
+      if (event.key === 'ArrowDown') {
+        if (dataTypeIndex + 1 === node.dataTypes.length && nodeIndex + 1 === this.nodes?.length) {
+          this.setSelectedDataType(this.nodes?.at(0)?.dataTypes[0] as DataType);
+        } else if (dataTypeIndex + 1 === node.dataTypes.length) {
+          this.setSelectedDataType(this.nodes?.at(nodeIndex + 1)?.dataTypes[0] as DataType);
+        } else {
+          this.setSelectedDataType(node.dataTypes[dataTypeIndex + 1]);
+        }
+      } else if (event.key === 'ArrowUp') {
+        if (dataTypeIndex === 0 && nodeIndex === 0) {
+          const lastNode = this.nodes?.at(this.nodes.length - 1) as Node;
+          this.setSelectedDataType(lastNode.dataTypes[(lastNode.dataTypes.length as number) - 1] as DataType);
+        } else if (dataTypeIndex === 0) {
+          const lastNode = this.nodes?.at(nodeIndex - 1) as Node;
+          this.setSelectedDataType(lastNode.dataTypes[(lastNode.dataTypes.length as number) - 1] as DataType);
+        } else {
+          this.setSelectedDataType(node.dataTypes[dataTypeIndex - 1]);
+        }
+      }
+    }
+  }
+
+  private getNode(name: string): Node {
+    return this.nodes?.filter(
+      (node: Node) => node.dataTypes.filter((dataType: DataType) => dataType.name === name)[0]
+    )[0] as Node;
+  }
+
+  private getNodeIndex(node: Node): number {
+    return this.nodes?.indexOf(node) as number;
+  }
+
+  private getDataType(node: Node, name: string) {
+    return node.dataTypes.filter((dataType: DataType) => dataType.name === name)[0];
+  }
+
+  private getDataTypeIndex(node: Node, dataType: DataType) {
+    return node.dataTypes.indexOf(dataType);
+  }
 }

angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html

@@ -16,9 +16,9 @@
           [title]="node.name"
           (click)="toggleDataTypeVisibility(node)"
           [dropDown]="true"
-          [open]="node.dataTypesAreVisible"
+          [open]="node.dataTypesAreVisible ? true : isNodeOpen(node)"
         />
-        <div *ngIf="node.dataTypesAreVisible" @toggleExpand>
+        <div *ngIf="node.dataTypesAreVisible ? true : isNodeOpen(node)" @toggleExpand>
           <div
             *ngFor="let dataType of node.dataTypesObservable | async | dataTypeFilter: 'name' : searchFilter : node.name"
             style="display: flex; justify-content: center"
@@ -27,6 +27,7 @@
               style="width: 95%; margin-left: 30px"
               [title]="dataType.name"
               [dataValue]="dataValuesMap.get(dataType.name)"
+              [selectedDataType]="selectedDataType"
               (click)="selectDataType(dataType)"
             />
           </div>

angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts

@@ -4,7 +4,7 @@ import { DataType, Node, NodeWithVisibilityToggle, NodeWithVisibilityToggleObser
 import Storage from 'src/services/storage.service';
 import { decimalPipe } from 'src/utils/pipes.utils';
 import { FormControl, FormGroup } from '@angular/forms';
-import { debounceTime, Observable, of, Subscription } from 'rxjs';
+import { debounceTime, Observable, of, Subject, Subscription } from 'rxjs';
 
 /**
  * Sidebar component that displays the nodes and their data types.
@@ -49,6 +49,7 @@ import { debounceTime, Observable, of, Subscription } from 'rxjs';
 export default class GraphSidebarDesktop implements OnInit {
   @Input() nodes!: Node[];
   @Input() selectDataType!: (dataType: DataType) => void;
+  @Input() selectedDataType: Subject<DataType> = new Subject<DataType>();
   nodesWithVisibilityToggle!: Observable<NodeWithVisibilityToggleObservable[]>;
 
   filterForm: FormGroup = new FormGroup({
@@ -58,6 +59,7 @@ export default class GraphSidebarDesktop implements OnInit {
   searchFilter: string = '';
 
   dataValuesMap: Map<string, string> = new Map();
+  dataTypeName?: string;
 
   constructor(private storage: Storage) {}
   /**
@@ -91,6 +93,14 @@ export default class GraphSidebarDesktop implements OnInit {
         });
       }
     }
+
+    this.selectedDataType.subscribe((dataType: DataType) => {
+      this.dataTypeName = dataType.name;
+    });
+  }
+
+  isNodeOpen(node: NodeWithVisibilityToggle) {
+    return node.dataTypes.filter((dataType: DataType) => dataType.name === this.dataTypeName).length > 0;
   }
 
   ngOnDestroy(): void {

angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar.component.html

@@ -2,5 +2,5 @@
   <graph-sidebar-mobile [nodes]="nodes" [selectDataType]="selectDataType" [onRunSelected]="onRunSelected" />
 </div>
 <ng-template #desktopView>
-  <graph-sidebar-desktop [nodes]="nodes" [selectDataType]="selectDataType" />
+  <graph-sidebar-desktop [nodes]="nodes" [selectDataType]="selectDataType" [selectedDataType]="selectedDataType" />
 </ng-template>

angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar.component.ts

@@ -1,4 +1,5 @@
 import { Component, HostListener, Input, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
 import { DataType, Node, Run } from 'src/utils/types.utils';
 
 /**
@@ -14,6 +15,7 @@ import { DataType, Node, Run } from 'src/utils/types.utils';
 export default class GraphSidebar implements OnInit {
   @Input() nodes!: Node[];
   @Input() selectDataType!: (dataType: DataType) => void;
+  @Input() selectedDataType: Subject<DataType> = new Subject<DataType>();
   @Input() onRunSelected!: (run: Run) => void;
 
   isMobile!: boolean;

angular-client/src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.css

@@ -2,7 +2,7 @@
   background-color: #101010;
   border-radius: 5px;
   margin: 8px;
-  height: 40px;
+  height: 25px;
   position: relative;
   text-align: center;
   transition: background-color 0.3s;
@@ -12,7 +12,7 @@
     cursor: pointer;
   }
 
-  &.selected {
+  &.choosed {
     background-color: #4f4f4f;
   }
 }

angular-client/src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.html

@@ -1,15 +1,15 @@
-<div class="card" [id]="title" [style]="dropDown ? 'marginBottom: 0px;' : 'margin: 0px;'" (click)="selectCard()">
+<div class="card" [id]="title" [style]="dropDown ? 'marginBottom: 0px;' : 'margin: 0px;'" [class.choosed]="selected">
   <div class="text-container">
     <typography
       variant="header"
       [additionalStyles]="
         dropDown
-          ? 'marginLeft: 35px; marginBottom: 10px; marginTop: 10px; fontSize: 18px'
-          : 'marginLeft: 30px; fontSize: 18px'
+          ? 'marginLeft: 30px; marginBottom: 0px; marginTop: 0px; fontSize: 12.5px'
+          : 'marginLeft: 15px; marginBottom: 0px; marginTop: 0px; fontSize: 12.5px'
       "
       [content]="title"
     />
-    <typography variant="secondary-header" additionalStyles="marginRight: 5px;" [content]="dataValue" />
+    <typography variant="secondary-header" additionalStyles="marginRight: 5px; fontSize: 12.5px" [content]="dataValue" />
   </div>
   <mat-icon
     [id]="iconId"

angular-client/src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.ts

@@ -1,4 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { DataType } from 'src/utils/types.utils';
 
 /**
  * Sidebar Card Component to display a card in the sidebar.
@@ -15,25 +17,14 @@ export default class SidebarCard implements OnInit {
   @Input() dropDown?: boolean;
   @Input() open?: boolean;
   @Input() dataValue?: string;
+  @Input() selectedDataType: Subject<DataType> = new Subject<DataType>();
   iconId!: string;
+  selected?: boolean;
 
   ngOnInit(): void {
     this.iconId = `${this.title}-icon`;
-  }
-  /**
-   * Runs animation when card is selected
-   */
-  selectCard() {
-    const card = document.getElementById(this.title);
-    if (card) {
-      card.classList.add('selected');
-      setTimeout(() => {
-        card.classList.remove('selected');
-      }, 250);
-    }
-    const dropDown = document.getElementById(this.iconId);
-    if (dropDown) {
-      dropDown.classList.toggle('selected');
-    }
+    this.selectedDataType.subscribe((dataType: DataType) => {
+      this.selected = this.title === dataType.name;
+    });
   }
 }