diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..1cbe6404 Binary files /dev/null and b/.DS_Store differ diff --git a/angular-client/src/pages/graph-page/graph-header/graph-header.component.html b/angular-client/src/pages/graph-page/graph-header/graph-header.component.html index 8655d6d2..c517aee0 100644 --- a/angular-client/src/pages/graph-page/graph-header/graph-header.component.html +++ b/angular-client/src/pages/graph-page/graph-header/graph-header.component.html @@ -4,7 +4,7 @@
diff --git a/angular-client/src/pages/graph-page/graph-page.component.html b/angular-client/src/pages/graph-page/graph-page.component.html index c22f2630..e79e3fb1 100644 --- a/angular-client/src/pages/graph-page/graph-page.component.html +++ b/angular-client/src/pages/graph-page/graph-page.component.html @@ -10,7 +10,12 @@
- +
{ - 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); + } } diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html index d8eae964..97b4b64b 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html +++ b/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 || isNodeOpen(node)" /> -
+
diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts index 0ba7c9da..febd51ae 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts +++ b/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 = new Subject(); nodesWithVisibilityToggle!: Observable; filterForm: FormGroup = new FormGroup({ @@ -58,6 +59,7 @@ export default class GraphSidebarDesktop implements OnInit { searchFilter: string = ''; dataValuesMap: Map = 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 { diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar.component.html b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar.component.html index a569fedf..ca561f3a 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar.component.html +++ b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar.component.html @@ -2,5 +2,5 @@
- + diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar.component.ts b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar.component.ts index 9f75cfa0..db91e637 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar.component.ts +++ b/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 = new Subject(); @Input() onRunSelected!: (run: Run) => void; isMobile!: boolean; diff --git a/angular-client/src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.css b/angular-client/src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.css index 881fccdf..ad7e05e0 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.css +++ b/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; } } diff --git a/angular-client/src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.html b/angular-client/src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.html index cd97cdb6..e2d767b0 100644 --- a/angular-client/src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.html +++ b/angular-client/src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.html @@ -1,15 +1,15 @@ -
+
- +
{ - card.classList.remove('selected'); - }, 250); - } - const dropDown = document.getElementById(this.iconId); - if (dropDown) { - dropDown.classList.toggle('selected'); - } - } } diff --git a/scylla-server-typescript/.DS_Store b/scylla-server-typescript/.DS_Store new file mode 100644 index 00000000..fb25e864 Binary files /dev/null and b/scylla-server-typescript/.DS_Store differ diff --git a/scylla-server-typescript/src/.DS_Store b/scylla-server-typescript/src/.DS_Store new file mode 100644 index 00000000..16c61882 Binary files /dev/null and b/scylla-server-typescript/src/.DS_Store differ