Added Benchmark UI Chips #534

MapleSyrupy · 2025-10-02T23:17:47Z

No description provided.

This reverts commit 95851f8.

This reverts commit 4d933af.

…pass into BenchmarkUIChips

gemini-code-assist · 2025-10-02T23:18:05Z

Summary of Changes

Hello @MapleSyrupy, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request primarily focuses on enhancing the user interface of benchmark listings by integrating a newly developed Chips component from the design system. This change standardizes the presentation of various benchmark data points, such as creation dates, levels, and trial counts, making the information more visually appealing and easier to digest. Additionally, it includes minor code cleanup and a layering fix for breadcrumbs to improve overall UI consistency and functionality.

Highlights

New Design System Component: Introduced a new reusable Chips component into the design system, wrapping Material-UI's Chip for consistent UI elements across the application.
Benchmark UI Enhancement: Refactored the BenchmarkListElement to utilize the new Chips component for displaying key benchmark information such as creation date, benchmark index, baseline, target, and current levels, and number of trials. This significantly improves visual consistency and readability.
Improved Data Presentation: Implemented conditional rendering for benchmark levels and trial counts within the Chips component, displaying '0%' or '0' with a distinct default style when data is unavailable, providing clearer feedback than 'N/A'.
Storybook Integration: Added Storybook stories for the new Chips component, showcasing its primary and default (empty) states for easy development, testing, and documentation.
Layout Z-Index Fix: Adjusted the z-index for breadcrumbs in the main layout to ensure they are always visible and layered correctly above other UI elements.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a new Chips component to enhance the UI for displaying benchmark information, which is a great improvement. My review focuses on improving the new component's naming for clarity, fixing a potential typo in the Storybook file, addressing some logic changes in data presentation that might lead to misinterpretation, and general code cleanup. Overall, the changes are positive, and with a few adjustments, the code will be even more robust and maintainable.

src/components/benchmarks/BenchmarkListElement.tsx

gemini-code-assist · 2025-10-02T23:19:24Z

src/components/benchmarks/BenchmarkListElement.tsx

+            {benchmark?.number_of_trials ? (
+              <Chips
+                label={benchmark?.number_of_trials}
+                color="primary"
+                size="medium"
+              ></Chips>
+            ) : (
+              <Chips
+                label={"0"}
+                color="default"
+                size="medium"
+                sx={{
+                  border: "1px solid",
+                  borderColor: "primary",
+                }}
+              ></Chips>
+            )}


Similar to current_level, the logic for number_of_trials has changed to display "0" instead of "N/A" for falsy values. This could be misleading if a null value means 'Not Applicable'. The previous logic || "N/A" was also flawed for a value of 0. It's better to explicitly check for null or undefined to decide whether to show the value or "N/A".

Suggested change

{benchmark?.number_of_trials ? (

<Chips

label={benchmark?.number_of_trials}

color="primary"

size="medium"

></Chips>

) : (

<Chips

label={"0"}

color="default"

size="medium"

sx={{

border: "1px solid",

borderColor: "primary",

}}

></Chips>

)}

{benchmark?.number_of_trials != null ? (

<Chips

label={benchmark.number_of_trials}

color="primary"

size="medium"

/>

) : (

<Chips

label={"N/A"}

color="default"

size="medium"

sx={{

border: "1px solid",

borderColor: "primary",

}}

/>

)}

src/components/benchmarks/BenchmarkListElement.tsx

gemini-code-assist · 2025-10-02T23:19:24Z

src/components/design_system/chip/Chip.stories.tsx

+    label: "Primary Chip",
+    sx: {
+      border: "1px solid",
+      borderColor: "Primary",


The value for borderColor is "Primary" with a capital 'P'. CSS property values and theme keys are typically lowercase. This is likely a typo and should be "primary" to match the usage in other parts of the application (e.g., BenchmarkListElement.tsx).

Suggested change

borderColor: "Primary",

borderColor: "primary",

src/components/design_system/chip/Chip.tsx

src/components/iep/Iep.tsx

francisli · 2025-10-03T00:12:03Z

Note styling differences to be corrected...

MapleSyrupy · 2025-10-08T21:37:27Z

Changed the code to align more with the Figma designs, but there might still be some issues especially with the icons on the buttons to add or view targets.

src/components/design_system/chip/Chip.tsx

src/components/design_system/chip/Chip.stories.tsx

MapleSyrupy · 2025-10-14T07:24:17Z

Don't check, not completed, just committing for the sake of saving it. I still need to check it over for any potential styling problems. Also forgot to run prettier on a file.

francisli

@MapleSyrupy I've added more comments and change requests, we can discuss on the call today if you're available.

src/components/design_system/chip/Chip.module.css

src/components/design_system/chip/Chip.tsx

src/components/design_system/chip/Chip.stories.tsx

src/components/design_system/chip/Chip.module.css

… into BenchmarkUIChips

francisli

I think this is looking good to merge now...

I made and pushed up an additional change- since you added the new "startIcon" prop to our design system Button, I added corresponding stories to preview how that looks in storybook across all variants. I then used that to tweak the layout a bit so that the icon is centered with the button label text.

MapleSyrupy added 6 commits September 28, 2025 20:57

Submit for review Commit.

4d933af

Update Layout.module.css

95851f8

Remove Bloat

df17229

Revert "Update Layout.module.css"

1a17c72

This reverts commit 95851f8.

Revert "Submit for review Commit."

b9e9e45

This reverts commit 4d933af.

Merge branch 'BenchmarkUIChips' of https://github.com/MapleSyrupy/com…

f2a948e

…pass into BenchmarkUIChips

gemini-code-assist bot reviewed Oct 2, 2025

View reviewed changes

MapleSyrupy added 2 commits October 2, 2025 16:41

Reverting Package-lock.json file

9101da1

fix lint issues

1305b61

MapleSyrupy self-assigned this Oct 3, 2025

Benchmark Chips Update

7ea1109

francisli requested changes Oct 9, 2025

View reviewed changes

src/components/design_system/chip/Chip.tsx Outdated Show resolved Hide resolved

src/components/design_system/chip/Chip.tsx Outdated Show resolved Hide resolved

src/components/design_system/chip/Chip.stories.tsx Outdated Show resolved Hide resolved

restructuring of Chip components

f325a88

MapleSyrupy and others added 3 commits October 16, 2025 15:52

checked version with new modular changes

5b3819e

Merge branch 'main' into BenchmarkUIChips

44714fb

Clean out comments, rename story title

86f4fe3

francisli requested changes Oct 23, 2025

View reviewed changes

francisli mentioned this pull request Oct 23, 2025

Updates on the individual Student page design #540

Open

MapleSyrupy and others added 3 commits October 26, 2025 22:01

Created variants for chips and made some stylistic changes

830c4eb

Merge branch 'BenchmarkUIChips' of https://github.com/sfbrigade/compass…

ae2d12b

… into BenchmarkUIChips

Add stories for Button with startIcon, tweak icon layout

5ed2f93

francisli approved these changes Oct 30, 2025

View reviewed changes

francisli merged commit a4b2c3b into main Oct 30, 2025
4 checks passed

francisli deleted the BenchmarkUIChips branch October 30, 2025 22:01

Added Benchmark UI Chips #534

Added Benchmark UI Chips #534

Uh oh!

Conversation

MapleSyrupy commented Oct 2, 2025

Uh oh!

gemini-code-assist bot commented Oct 2, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

gemini-code-assist bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

francisli commented Oct 3, 2025

Uh oh!

MapleSyrupy commented Oct 8, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MapleSyrupy commented Oct 14, 2025

Uh oh!

francisli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

francisli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants