Combine segment summary and cell heat map by bracyw · Pull Request #532 · Northeastern-Electric-Racing/Argos

bracyw · 2026-02-22T21:05:09Z

Changes

Combines the segment summary stats and cell heatmap into unified segment rows on the BMS debug page. Each row has a dark controls zone (segment label, view selector, "See more" link) and a light content zone with the hex-tile heatmap and overview stats side by side.

Key architectural decisions:

Extracted reusable components: SegmentRowComponent, SegmentHeatmapComponent, SegmentOverviewComponent, and HexTileComponent — each segment row is self-contained with its own view selector
Refactored CellReading to a single-cell model (from paired cells) so each hex tile maps 1:1 to a cell reading. This simplifies the data flow and makes the heatmap config-driven via BMS_CONFIG
Extracted BMS_CONFIG to bms.config.ts to break a circular import between bms.utils.ts and topic.utils.ts
Temperature view uses merged double-hex tiles — thermistors map to groups of cells via ALPHA_THERM_CELL_MAP / BETA_THERM_CELL_MAP. The double-hex shape uses a V-notch clip-path polygon to visually distinguish temperature tiles from single-cell voltage/balancing tiles
Multi-cell comparison dialog — clicking any hex tile selects it (with a glow highlight), opening a shared comparison dialog. Multiple cells can be selected across segments. Clicking a temperature double-hex expands to show each cell in the therm group as separate columns
View selectors sync via HeatMapService — a globalView$ BehaviorSubject drives the "Set ALL Maps" selector and the initial default for per-row selectors. Per-row selectors subscribe to their segment's view and stay in sync when the global selector changes. The SelectDropdownComponent now uses an effect() to reactively track defaultValue changes
Dynamic sizing with clamp() for hex tiles and row heights to support 70–150% browser zoom

Notes

The two #525 commits at the base are from the 525-generalize-bms-cell-data-model branch which this depends on
Cell comparison dialog uses setInterval polling to refresh MQTT values — this could be replaced with proper observable subscriptions in a follow-up

Test Cases

Switching view selector on a single row changes only that row's heatmap
"Set ALL Maps" changes all row selectors and heatmaps simultaneously
Per-row selectors visually sync when "Set ALL Maps" is used
Clicking a voltage/balancing tile selects it with glow, opens comparison dialog
Clicking a second tile adds it as another column in the dialog
Clicking a selected tile deselects it; deselecting all closes the dialog
Clicking a temperature double-hex tile expands to show all cells in the therm group
Browser zoom from 70% to 150% renders hex tiles and rows without overflow or clipping

Checklist

It can be helpful to check the Checks and Files changed tabs.
Please review the contributor guide and reach out to your Tech Lead if anything is unclear.
Please request reviewers and ping on slack only after you've gone through this whole checklist.

Closes #527

bracyw

Some changes I would like to make before merging

bracyw · 2026-03-09T02:13:17Z

angular-client/src/components/select-dropdown/select-dropdown.component.ts

+  constructor() {
+    // React to defaultValue changes (e.g. from "Set ALL Maps" selector)
+    effect(() => {
+      const val = this.defaultValue();


This is unneeded we should just put the correct default value in the first time. I believe initial problem was with synchronizing set all and single selectors.

bracyw · 2026-03-09T02:17:06Z

angular-client/src/pages/bms-debug-page/bms-segment-view/bms-segment-view.component.html

+        style="width: 100%; height: 100%"
+        [title]="this.getHeatmapTitle()"
+        svgIcon="battery_charging_2"
+        [slicedLeftCorner]="true"


add option for percentage that the corner is sliced.

bracyw · 2026-03-09T02:23:47Z

angular-client/src/pages/bms-debug-page/bms-segment-view/bms-segment-view.component.ts

  ]
 })
-export class BmsSegmentViewComponent implements OnInit {
+export class BmsSegmentViewComponent implements OnInit, OnDestroy {


add comment

bracyw · 2026-03-09T02:26:03Z

...c/pages/bms-debug-page/components/cell-by-cell-heat-map/cell-by-cell-heat-map.component.html

-          ></cell-tile>
-        }
-
+      @for (cell of betaCells.slice().reverse(); track cell) {


add comment saying that reverse is to better match the actual battery setup.

bracyw · 2026-03-09T02:27:18Z

angular-client/src/pages/bms-debug-page/bms-segment-view/bms-segment-view.component.css

 }
+
+.segment-page-heatmap {
+  --hex-w: clamp(60px, 5.5vw, 85px);


add comments with explanation for css

bracyw · 2026-03-09T20:13:21Z

...ar-client/src/pages/bms-debug-page/components/segment-overview/segment-overview.component.ts

+  private subscriptions: Subscription[] = [];
+
+  segment = input.required<Segment>();
+  temperature!: number;


abstract to be able to take in multiple values, that have format functions tied to them

bracyw · 2026-03-09T20:15:59Z

angular-client/src/pages/bms-debug-page/components/segment-row/segment-row.component.html

@@ -0,0 +1,29 @@
+<!-- Unified segment row: dark wrapper with light heatmap and overview panels -->


Going to make ticket to abstract to be a general wrapper that can have two related parts, then use that abstracted component here. Not supper necessary but will be nice to have and a lot easier to maintain.

bracyw · 2026-03-09T20:16:14Z

angular-client/src/pages/bms-debug-page/components/segment-row/segment-row.component.css

+  display: block;
+}
+
+/* ── Segment Row ── */


add ai-gen ack, and more comments

bracyw · 2026-03-09T20:16:31Z

angular-client/src/pages/bms-debug-page/bms-debug-page.component.css

  overflow: visible !important; /* Allow dropdown to overflow */
 }
+
+/* ── Section header row ── */


AI gen ack and more comments

bracyw · 2026-03-09T20:17:30Z

angular-client/src/pages/bms-debug-page/bms-debug-page.component.html

+    </mat-grid-list>
+
+    <!-- Section header with "Set ALL Maps" dropdown -->
+    <div class="section-header">


abstract section header to it's own re-usable component, with left and right title inputs and select drop down options (allow for multiple select dropdowns, via a list of selector configs.)

bracyw added 24 commits February 21, 2026 22:57

#525 Generalize BMS cell data model for config-driven counts

5b9705c

#525 Extract BMS_CONFIG to own file to fix circular import

c68574c

#527 Combine segment summary and heat map into unified rows

e959516

#527 Extract heatmap and overview components, style controls

2ea9599

#527 Style heatmap cells and segment row controls

34fd2a3

#527 Fix cell dialog numbering and live update

afc49d9

#527 Make segment row sizing fully dynamic

c508468

#527 Port hex heatmap to segment detail page

b904a10

#527 Widen dynamic sizing for 70-150% zoom range

bb09fff

#527 Center overview stats and reduce row height

4239d1c

#527 Refactor CellReading to single cell model

b75ff62

#527 Revert BMS config to 26-cell counts

65bcd5c

#527 Remove cell pairing, one tile per CellReading

33a444e

#527 Shift hex offset to top row

7d26125

#527 Reduce heatmap panel padding and row height

4a2343c

#527 Tighten segment row spacing

77d3b86

#527 Improve cell selection glow and reduce row height

15c0048

#527 Add temperature view with merged double-hex tiles

ea29fd7

#527 Add multi-cell selection with comparison dialog

0938719

#527 Add multi-cell selection with comparison dialog

bf9857c

#527 Add temperature option to segment view selector

91f3497

#527 Expand therm group to individual columns in dialog

adb7861

#527 Sync row selectors with Set ALL Maps via effect

7059adc

#527 Unify default view from service globalView

43f5671

bracyw self-assigned this Feb 22, 2026

bracyw changed the title ~~Combine segment summary and cell heat map #527~~ Combine segment summary and cell heat map Feb 22, 2026

bracyw commented Mar 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Combine segment summary and cell heat map#532

Combine segment summary and cell heat map#532
bracyw wants to merge 24 commits intodevelopfrom
527-combine-segment-summary-and-cell-heat-map

bracyw commented Feb 22, 2026

Uh oh!

bracyw left a comment

Uh oh!

bracyw Mar 9, 2026

Uh oh!

bracyw Mar 9, 2026

Uh oh!

bracyw Mar 9, 2026

Uh oh!

bracyw Mar 9, 2026

Uh oh!

bracyw Mar 9, 2026

Uh oh!

bracyw Mar 9, 2026

Uh oh!

bracyw Mar 9, 2026

Uh oh!

bracyw Mar 9, 2026

Uh oh!

bracyw Mar 9, 2026

Uh oh!

bracyw Mar 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		@@ -0,0 +1,29 @@
		<!-- Unified segment row: dark wrapper with light heatmap and overview panels -->

Conversation

bracyw commented Feb 22, 2026

Changes

Notes

Test Cases

Checklist

Uh oh!

bracyw left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant