Added basic frontend for apportionment

[Lionqueen94]

Closes #739

TODO

• Add frontend tests
• Update frontend based on Joris' comments and design updates
  • Kunnen we voorkomen dat 'aantal zetels' bij 100% zoom over twee regels gaat lopen? ==> should be ok now
  • Hoe ziet de kolom met de gemiddelden eruit als er 10.000 149/150 stemmen per zetel zijn? ==> increased width so it fits
  • Wat gebeurt er met de tabel als er meer dan 1 restzetel te verdelen is? (in design wordt 'ie breder dan de container/horizontale viewport) ==> added scroll
  • Kunnen we de top/bottom padding van de cellen zo aanpassen dat een lange lijstnaam niet leidt tot het verhogen van de rij (hebben we in inputgrid ook gedaan) ==> done
  • List number columns should be right-aligned ==> all right aligns correct now
  • Can we prevent the 'aantal restzetels' label from wrapping over 2 lines? ==> should be ok now
  • DisplayFraction:
    • When the numerator of a fraction is 0, we should not show the fraction because it evaluates to 0. ==> done
    • If the average is 0, we should show the wholes as '0' I think? ==> done
    • Fraction alignment (integer parts are all aligned to each other in the design whether they have a fraction part or not) ==> done
  • In the design, the label 'Restzetel toegekend aan lijst' label is right-aligned. You made it left-aligned. Not sure what I like better though. ==> all as designed now

Description

Apportionment

• Added apportionment context, provider and hook
• Added DisplayFraction ui element, story and tests
• Added elections/{election_id}/apportionment route
• Added apportionment page with election summary and apportionment tables
• Added whole seat detail page
• Added residual seat detail page
• Add Navbar for apportionment pages (add > Zetelverdeling for detail pages)
• Added error when election data entry has not been finalised
• Fractions in tables are aligned as designed and horizontal scroll is added to table where needed, see:

Screencast.from.2025-02-13.17-01-45.mp4

Miscellaneous

• Added css util class font-number setting font-family: "GeistMono", monospace, monospace; and font-feature-settings: "ss09" on;
  • Removed font-feature-settings: "ss09" on; from @font-face because this is not supported by chrome and edge

Not in scope

• Candidate selection ("Gekozen kandidaten") including political group candidate detail pages
• Preference threshold ("Voorkeursdrempel")

[codecov]

Codecov Report

Attention: Patch coverage is 99.60815% with 10 lines in your changes missing coverage. Please review.

Project coverage is 91.95%. Comparing base (9e19c11) to head (5e13c4d).
Report is 1 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...d/app/module/apportionment/ApportionmentLayout.tsx	45.45%	6 Missing ⚠️
...nd/lib/api/apportionment/ApportionmentProvider.tsx	88.88%	2 Missing ⚠️
...d/lib/api/apportionment/useApportionmentContext.ts	77.77%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #940      +/-   ##
==========================================
+ Coverage   90.29%   91.95%   +1.66%     
==========================================
  Files         249      272      +23     
  Lines       13226    15740    +2514     
  Branches     1348     1426      +78     
==========================================
+ Hits        11942    14474    +2532     
+ Misses       1187     1169      -18     
  Partials       97       97              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Sigrid maintainability feedback

✅ You wrote maintainable code and achieved your objective of 3.5 stars

Show details

Sigrid compared your code against the baseline of 2025-02-20.

👍 What went well?

You fixed or improved 0 refactoring candidates.

👎 What could be better?

Unfortunately, 20 refactoring candidates were introduced or got worse.

Risk	System property	Location
🔴	Duplication (Introduced)	frontend/app/component/form/data_entry/polling_station_choice/PollingStationChoiceForm.module.css line 4-13 frontend/app/component/form/data_entry/polling_station_choice/PollingStationSelector.module.css line 16-25
🔴	Duplication (Introduced)	backend/src/apportionment/mod.rs line 180-186 backend/src/apportionment/mod.rs line 223-229
🔴	Unit Size (Worsened)	backend/src/error.rs IntoResponse.into_response()
🔴	Unit Interfacing (Introduced)	backend/src/apportionment/api.rs election_apportionment(any,any,any,any,any,any,any)
🟠	Unit Size (Worsened)	frontend/app/routes.tsx routes.tsx
🟡	Unit Size (Introduced)	backend/src/apportionment/api.rs election_apportionment(any,any,any,any,any,any,any)
🟡	Unit Size (Worsened)	backend/src/apportionment/mod.rs seat_allocation(u64,ElectionSummary)
🟡	Unit Size (Worsened)	frontend/lib/ui/index.ts index.ts
⚫️		+ 12 more

📚 Remaining technical debt

31 refactoring candidates didn't get better or worse, but are still present in the code you touched.

View this system in Sigrid to explore your technical debt

⭐️ Sigrid ratings

System property	System on 2025-02-20	Before changes	New/changed code
Volume	5.2	N/A	N/A
Duplication	4.3	4.5	4.8
Unit Size	2.4	2.1	2.3
Unit Complexity	3.4	4.9	4.8
Unit Interfacing	3.0	3.2	3.8
Module Coupling	4.0	5.5	5.4
Component Independence	2.8	N/A	N/A
Component Entanglement	3.7	N/A	N/A
Maintainability	3.6	4.2	4.3

💬 Did you find this feedback helpful?

We would like to know your thoughts to make Sigrid better.
Your username will remain confidential throughout the process.

• ✅ Yes, these findings are useful
• 🔸 The findings are false positives
• 🔹 These findings are not important to me

---

View this system in Sigrid

[praseodym]

• Changed backend apportionment API method from post to get

What's the rationale for this? In the future we'll have to submit back results such as any deceased candidates and the results of a drawing of lots, so I think a POST makes the most sense for this endpoint.

[praseodym]

Looks good, just two small things!

[praseodym]

Added css util class font-number setting font-family: "GeistMono", monospace, monospace; and font-feature-settings: "ss09" on;

• Removed font-feature-settings: "ss09" on; from @font-face because this is not supported by chrome and edge

Was there some linter that complained about this, or did you observe rendering differences between browsers?

[Lionqueen94]

Added css util class font-number setting font-family: "GeistMono", monospace, monospace; and font-feature-settings: "ss09" on;

• Removed font-feature-settings: "ss09" on; from @font-face because this is not supported by chrome and edge

Was there some linter that complained about this, or did you observe rendering differences between browsers?

Yes I observed the differences, or more precisely, noticed that the setting in font-face wasn't working in some browsers, hence why it was by default also set in the css for the input cells in the input grid. When we checked the font-face support it turned out to be terrible, hence the decision to make a util for it and use that instead of setting font-feature-settings separately everywhere we use GeistMono. Would be awesome if we have a linter checking for this though haha.

[praseodym]

Yes I observed the differences, or more precisely, noticed that the setting in font-face wasn't working in some browsers, hence why it was by default also set in the css for the input cells in the input grid. When we checked the font-face support it turned out to be terrible, hence the decision to make a util for it and use that instead of setting font-feature-settings separately everywhere we use GeistMono. Would be awesome if we have a linter checking for this though haha.

And by 'observed the differences' you mean that the slashed zero was rendered?

[Lionqueen94]

Yes I observed the differences, or more precisely, noticed that the setting in font-face wasn't working in some browsers, hence why it was by default also set in the css for the input cells in the input grid. When we checked the font-face support it turned out to be terrible, hence the decision to make a util for it and use that instead of setting font-feature-settings separately everywhere we use GeistMono. Would be awesome if we have a linter checking for this though haha.

And by 'observed the differences' you mean that the slashed zero was rendered?

Yes, in chrome (my main dev setup) I got the slahed zeroes, and Joris commented on it. Then looked up the font-feature-settings we had and the compatibility in font-face (because it wasn't working in my code and was in inputgrid, where it was also set in the css). So that's when I figured ok let's take it out of font-face and set it in a separate util. To prevent confusion in the future.

[praseodym]

lgtm!