Merge branch 'develop' into Uploadable-Playbackable-Videos

Author: Peyton-McKee

.github/dependabot.yml

@@ -3,11 +3,11 @@ updates:
   - package-ecosystem: "cargo"
     directory: "/scylla-server/"
     schedule:
-      interval: "weekly"
+      interval: "monthly"
   # Enable version updates for GitHub Actions
   - package-ecosystem: "github-actions"
     # Workflow files stored in the default location of `.github/workflows`
     # You don't need to specify `/.github/workflows` for `directory`. You can use `directory: "/"`.
     directory: "/"
     schedule:
-      interval: "weekly"
+      interval: "monthly"

angular-client/src/app/app-nav-bar/app-nav-bar.component.ts

@@ -5,6 +5,7 @@ import { interval, map, Observable, startWith } from 'rxjs';
 import { startNewRun } from 'src/api/run.api';
 import APIService from 'src/services/api.service';
 import SidebarService from 'src/services/sidebar.service';
+import { appRoutes } from '../app-routing.module';
 
 interface NavItem {
   label: string;
@@ -57,13 +58,14 @@ export class AppNavBarComponent implements OnInit {
   };
 
   navItems: NavItem[] = [
-    { label: 'Home', route: '/landing', icon: 'home' },
-    { label: 'Charging', route: '/charging', icon: 'ev_station' },
-    { label: 'Graph', route: '/graph', icon: 'bar_chart' },
-    { label: 'Map', route: '/map', icon: 'map' },
-    { label: 'BMS', route: '/bms', icon: 'action_key' },
-    { label: 'Faults', route: '/faults', icon: 'error' },
-    { label: 'Camera', route: '/camera', icon: 'linked_camera' }
+    { label: 'Home', route: appRoutes.landingRoute(), icon: 'home' },
+    { label: 'Charging', route: appRoutes.chargingRoute(), icon: 'ev_station' },
+    { label: 'Graph', route: appRoutes.graphRoute(), icon: 'bar_chart' },
+    // TODO: fix map
+    // { label: 'Map', route: appRoutes.mapRoute(), icon: 'map' },
+    { label: 'BMS', route: appRoutes.bmsRoute(), icon: 'action_key' },
+    { label: 'Faults', route: appRoutes.faultsRoute(), icon: 'error' },
+    { label: 'Camera', route: appRoutes.cameraRoute(), icon: 'linked_camera' }
   ];
 
   navigateTo(route: string): void {

angular-client/src/app/app-routing.module.ts

@@ -1,20 +1,47 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { BmsDebugPageComponent } from 'src/pages/bms-debug-page/bms-debug-page.component';
+import { BmsSegmentViewComponent } from 'src/pages/bms-debug-page/bms-segment-view/bms-segment-view.component';
 import { CameraPageComponent } from 'src/pages/camera-page/camera-page.component';
 import ChargingPageComponent from 'src/pages/charging-page/charging-page.component';
 import FaultPageComponent from 'src/pages/fault-page/fault-page.component';
 import GraphPageComponent from 'src/pages/graph-page/graph-page.component';
 import LandingPageComponent from 'src/pages/landing-page/landing-page.component';
 import MapComponent from 'src/pages/map/map.component';
+import { Segment } from 'src/utils/bms.utils';
 
+const landingRoute = () => `/landing`;
+const graphRoute = () => `/graph`;
+const mapRoute = () => `/map`;
+const chargingRoute = () => `/charging`;
+const bmsRoute = () => `/bms`;
+const bmsSegmentViewRoute = (id: Segment) => `/bms/segment/${id + 1}`;
+const cameraRoute = () => `/camera`;
+const faultsRoute = () => `/faults`;
+const faultsGraphRoute = () => `/faults/fault-graph`;
+
+export const appRoutes = {
+  landingRoute,
+  graphRoute,
+  mapRoute,
+  chargingRoute,
+  bmsRoute,
+  bmsSegmentViewRoute,
+  cameraRoute,
+  faultsRoute,
+  faultsGraphRoute
+};
+
+// Routes should be defined carefully in accordance with the appRoutes
 const routes: Routes = [
   { path: 'landing', component: LandingPageComponent },
   { path: 'graph', component: GraphPageComponent },
-  { path: '', redirectTo: '/landing', pathMatch: 'full' },
+  { path: '', redirectTo: appRoutes.landingRoute(), pathMatch: 'full' },
   { path: 'map', component: MapComponent },
   { path: 'charging', component: ChargingPageComponent },
   { path: 'bms', component: BmsDebugPageComponent },
+  // NOTE: paramaterized routes should be even more carefully defined in accordance with the appRoutes
+  { path: 'bms/segment/:id', component: BmsSegmentViewComponent },
   { path: 'faults', component: FaultPageComponent },
   { path: 'faults/fault-graph', component: GraphPageComponent },
   { path: 'camera', component: CameraPageComponent }

angular-client/src/app/app.module.ts

@@ -135,6 +135,14 @@ import { FaultDisplayInfoComponent } from 'src/pages/graph-page/graph-caption/fa
 import { FaultButtonsComponent } from 'src/pages/graph-page/graph-caption/fault-buttons/fault-buttons.component';
 import { GeneralDisplayInfoComponent } from 'src/pages/graph-page/graph-caption/general-display-info/general-display-info.component';
 import { CameraPageComponent } from 'src/pages/camera-page/camera-page.component';
+import { BmsSegmentViewComponent } from 'src/pages/bms-debug-page/bms-segment-view/bms-segment-view.component';
+import { SegmentAtAGlanceComponent } from 'src/pages/bms-debug-page/components/segment-at-a-glance/segment-at-a-glance.component';
+import { CellByCellHeatMapComponent } from 'src/pages/bms-debug-page/components/cell-by-cell-heat-map/cell-by-cell-heat-map.component';
+import { CellViewComponent } from 'src/pages/bms-debug-page/components/cell-view/cell-view.component';
+import { ChipDiagnosticsComponent } from 'src/pages/bms-debug-page/components/chip-diagnostics/chip-diagnostics.component';
+import { ChipFaultsComponent } from 'src/pages/bms-debug-page/components/chip-faults/chip-faults.component';
+import { CellTileComponent } from 'src/pages/bms-debug-page/components/cell-by-cell-heat-map/cell-tile/cell-tile.component';
+import { ChipFaultPipe } from 'src/utils/pipes/chip-fault.pipe';
 
 @NgModule({
   declarations: [
@@ -193,6 +201,7 @@ import { CameraPageComponent } from 'src/pages/camera-page/camera-page.component
     BatteryInfoDesktopComponent,
     BatteryInfoMobileComponent,
     NodeFilterPipe,
+    ChipFaultPipe,
     CombinedStatusDisplayComponent,
     StateOfChargeDisplayComponent,
     PackTempComponent,
@@ -243,7 +252,14 @@ import { CameraPageComponent } from 'src/pages/camera-page/camera-page.component
     FaultButtonsComponent,
     GeneralDisplayInfoComponent,
     FaultDisplayInfoComponent,
-    CameraPageComponent
+    CameraPageComponent,
+    BmsSegmentViewComponent,
+    SegmentAtAGlanceComponent,
+    CellViewComponent,
+    CellByCellHeatMapComponent,
+    ChipDiagnosticsComponent,
+    ChipFaultsComponent,
+    CellTileComponent
   ],
   bootstrap: [AppContextComponent],
   imports: [
@@ -279,6 +295,7 @@ import { CameraPageComponent } from 'src/pages/camera-page/camera-page.component
   providers: [
     DialogService,
     MessageService,
+    ChipFaultPipe,
     provideHttpClient(withInterceptorsFromDi()),
     provideClientHydration(),
     provideAnimationsAsync(),

angular-client/src/app/context/app-context.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { io } from 'socket.io-client';
 import { environment } from 'src/environment/environment';
+import { CellService } from 'src/services/cell.service';
+import { HeatMapService } from 'src/services/heat-map.service';
 import { FaultService } from 'src/services/fault.service';
 import SocketService from 'src/services/socket.service';
 import Storage from 'src/services/storage.service';
@@ -14,12 +16,16 @@ import Storage from 'src/services/storage.service';
 })
 export default class AppContextComponent implements OnInit {
   private storage = inject(Storage);
+  private cellService = new CellService(this.storage);
+  private heatmapService = inject(HeatMapService);
   private faultService = inject(FaultService);
+  private chipFaultPipe = inject(FaultService);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   socket = io((environment as any).url || 'http://localhost:8000');
   socketService = new SocketService(this.socket);
 
   ngOnInit(): void {
+    this.cellService.updateCellInfo();
     this.socketService.receiveData(this.storage, this.faultService);
   }
 }

angular-client/src/components/info-background/info-background.component.css

@@ -11,13 +11,22 @@ mat-icon {
   width: 100%;
 }
 
+.container.sliced-left-corner {
+  padding: 15px 12px 12px 15px;
+  clip-path: polygon(125px 0, 100% 0, 100% 100%, 0 100%, 0 145px);
+}
+
 .title-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 }
 
+.title.sliced-left-corner {
+  padding-left: 120px;
+}
+
 .title {
   display: flex;
   flex-direction: row;

angular-client/src/components/info-background/info-background.component.html

@@ -1,11 +1,16 @@
-<div class="container" (click)="onClick ? onClick() : undefined" [style]="{ 'background-color': backgroundColor }">
-  @if (title) {
+<div
+  class="container"
+  (click)="onClick()?.()"
+  [style]="{ 'background-color': this.backgroundColor() }"
+  [class.sliced-left-corner]="this.slicedLeftCorner()"
+>
+  @if (this.title(); as title) {
     <div class="title-container">
-      <div class="title">
-        @if (icon) {
+      <div class="title" [class.sliced-left-corner]="this.slicedLeftCorner()">
+        @if (this.icon(); as icon) {
           <mat-icon aria-hidden="false" [fontIcon]="icon" />
         }
-        @if (svgIcon) {
+        @if (this.svgIcon(); as svgIcon) {
           <mat-icon aria-hidden="false" [svgIcon]="svgIcon" />
         }
         <typography variant="info-title" content="{{ title }}" />
@@ -22,9 +27,17 @@
           }
         </div>
       }
+      @if (this.selectorConfig(); as selectorConfig) {
+        <select-dropdown [options]="selectorConfig.options" [placeholder]="selectorConfig.placeholder"></select-dropdown>
+      }
+      @if (this.topRightInfo(); as topRightInfo) {
+        <div class="top-right-info">
+          <typography variant="info-subtitle" [content]="topRightInfo" additionalStyles="fontSize: 19px;" />
+        </div>
+      }
     </div>
   }
-  @if (onClick) {
+  @if (this.onClick(); as onClick) {
     <typography additionalStyles="text-align: left;" variant="info-subtitle" content="Click for more details" />
   }
   <ng-content />

angular-client/src/components/info-background/info-background.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, input, Input } from '@angular/core';
 import Theme from 'src/services/theme.service';
+import { SelectorConfig } from '../select-dropdown/select-dropdown.component';
 
 /**
  * Component that is essentially the template/background for
@@ -17,10 +18,14 @@ interface ButtonInputs {
   styleUrls: ['./info-background.component.css']
 })
 export class InfoBackgroundComponent {
-  @Input() icon?: string;
-  @Input() svgIcon?: string;
-  @Input() backgroundColor?: string = Theme.infoBackground;
-  @Input() title!: string;
-  @Input() onClick!: (() => void) | undefined;
+  icon = input<string>();
+  svgIcon = input<string>();
+  backgroundColor = input<Theme>(Theme.infoBackground);
+  title = input<string>();
+  onClick = input<(() => void) | undefined>(undefined);
   @Input() button?: ButtonInputs;
+  selectorConfig = input<SelectorConfig | undefined>(undefined);
+  topRightInfo = input<string | undefined>(undefined);
+
+  slicedLeftCorner = input<boolean>(false); // slice out the upper left corner
 }

angular-client/src/components/info-value-dispaly/info-value-display.component.html

@@ -1,7 +1,12 @@
 <vstack spacing="0px" [style]="containerStyle()">
   <hstack spacing="5px" [style]="valueUnitContainerStyle()">
-    <typography variant="info-value" [content]="formattedValue" />
-    <typography variant="info-unit" [content]="unit()" />
+    @if (this.boolValue() !== undefined) {
+      <typography variant="info-value" [content]="this.boolValue() ? 'YES' : 'NO'" />
+      <typography variant="info-unit" [content]="this.unit()" />
+    } @else {
+      <typography variant="info-value" [content]="this.formattedValue" style="margin-bottom: -10px" />
+      <typography variant="info-unit" [content]="this.unit()" />
+    }
 
     @if (this.enableWidget() && this.widget(); as widget) {
       @switch (widget.type) {
@@ -24,7 +29,7 @@
     }
   </hstack>
 
-  @if (subtitle() !== '') {
-    <typography variant="info-subtitle" [content]="subtitle()" [additionalStyles]="subtitleStyle()" />
+  @if (this.subtitle() !== '') {
+    <typography variant="info-subtitle" [content]="subtitle()" [additionalStyles]="this.getSubtitleStyle()" />
   }
 </vstack>

angular-client/src/components/info-value-dispaly/info-value-display.component.ts

@@ -34,6 +34,7 @@ export class InfoValueDisplayComponent implements OnInit, OnChanges {
   containerStyle = input<string>('');
   valueUnitContainerStyle = input<string>('');
   value = input<number>();
+  boolValue = input<boolean>();
   precision = input<number>(1);
   subtitle = input<string>('');
   subtitleStyle = input<string>('');
@@ -51,4 +52,11 @@ export class InfoValueDisplayComponent implements OnInit, OnChanges {
   getStatusMessage = (connectDotConfig: ConnectionDotConfig): (() => string) => {
     return connectDotConfig.getStatusMessage ? connectDotConfig.getStatusMessage : () => '';
   };
+
+  getSubtitleStyle = (): string => {
+    if (this.unit() === '' && this.boolValue() === undefined) {
+      return this.subtitleStyle() + 'margin-top: 1vh';
+    }
+    return this.subtitleStyle();
+  };
 }