Super-imposed plots card width#56
Merged
Demonstrandum merged 3 commits intoFeb 19, 2026
Merged
Conversation
The superimposed cards grid had its column width hardcoded via a SCSS variable ($metrics-min-card-width: 335px) and never read the dynamic cardMinWidth setting from the store. Regular card grids (CardGridComponent) receive cardMinWidth as an input and apply it via [style.grid-template-columns], which overrides the SCSS default. Superimposed cards were missing this entirely. Changes: - SuperimposedCardsViewContainer: select getMetricsCardMinWidth from the store and pass it as [cardMinWidth] to the presentation component. - SuperimposedCardsViewComponent: accept cardMinWidth input, compute gridTemplateColumn in ngOnChanges (same logic as CardGridComponent), and bind it via [style.grid-template-columns] on the grid div. Fixes #55 Co-authored-by: Samuel <samuel@knutsen.co>
|
Cursor Agent can help with this pull request. Just |
Preview Deployment
Details
|
When a line chart has disableUpdate=true (card not yet visible via intersection observer), the container may be resized by persistResize restoring a saved height, or by a full-width class being applied asynchronously from the store. The ResizeDetectorDirective's skip(1) can batch this resize with the initial ResizeObserver event, causing the only notification to be swallowed. The chart then holds stale dimensions from ngAfterViewInit, so the renderer draws curves at one scale while the interactive overlay positions tooltip dots at another. Fix: when disableUpdate transitions from true to false, re-read the DOM dimensions and resize the chart renderer so both the canvas and the coordinate mapping match the current layout. Co-authored-by: Samuel <samuel@knutsen.co>
Co-authored-by: Samuel <samuel@knutsen.co>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation for features / changes
Fixes #55. Superimposed plots previously ignored the "card width" setting because their grid column width was hardcoded in SCSS, unlike regular card grids which dynamically apply the setting via a style binding.
Technical description of changes
superimposed_cards_view_component.ts:cardMinWidth@Input().ngOnChangesto compute thegridTemplateColumnstyle string based on thecardMinWidthinput, including validation to ensure the width is within the allowed range (335px to 735px).[style.grid-template-columns]="gridTemplateColumn"binding to the griddivin the template, allowing the dynamic width to override the default SCSS.superimposed_cards_view_container.ts:getMetricsCardMinWidthfrom the NgRx store.cardMinWidthvalue as an input to theSuperimposedCardsViewComponent.Screenshots of UI changes (or N/A)
N/A
Detailed steps to verify changes work correctly (as executed by you)
Alternate designs / implementations considered (or N/A)
N/A