Add visual bars to Performance Analysis table#159
Conversation
|
Screenshot of performance Analysis table with visual bars @gabegma @christyler3030 @JosephMarinier |
|
Recent screenshot:
|
JosephMarinier
left a comment
JosephMarinier
left a comment
There was a problem hiding this comment.
I feel like those colors should come from our theme.
instead of the new very light `primary.light` color.
to add it later with careful design
to avoiding the need for `useTheme`. Also remove `visualBarPercentage()` to make definitions more straightforward and avoid some typing.
|
See discussion with design team in Mattermost |
| renderCell: ({ value }: GridCellParams<number>) => | ||
| visualBarPercentage(value, theme.palette[OUTCOME_COLOR[outcome]].main), | ||
| renderCell: ({ value }: GridCellParams<number>) => ( | ||
| <VisualBar | ||
| formattedValue={formatRatioAsPercentageString(value, 1)} | ||
| value={value} | ||
| color={(theme) => theme.palette[OUTCOME_COLOR[outcome]].main} | ||
| /> | ||
| ), |
There was a problem hiding this comment.
can we still not go with function? any reason to call the component directly on each function as format is similar for outcome and custom metric columns?
No hard requirement. As I said in the commit message, I simply did that "to make definitions more straightforward and avoid some typing". I was too lazy to import BoxProps to use BoxProps["color"] in the function. Also, the function was only used twice, and didn't support the third case of the ECE column. Now it's more uniform and you don't need to scroll back an forth to understand what is going on. But that's a detail. Would you prefer that I put it back? I don't mind.
There was a problem hiding this comment.
okay then it make sense and I agree in terms of readability and to reduce one import which is boxprops. Let it be this way then
|
Screenshot captured after final changes done. |
|
Beauuutiful! |
|
It looks SO good!! I tagged you Nandhini in our Mattermost thread. |
|
thank you @JosephMarinier for the Approval and your time to contribute some final change and reviews. I will merge this once the checks are completed. |
|
@gabegma thanks.. I'm sorry I forgot to notice that. I was looking for updates in the teams and forgot about mattermost.. |
JosephMarinier
changed the title
3 participants
Description: Added a visual bar display for the following columns in performance analysis table and semantic similar utterance table
Performance analysis table columns:
Semantic similar utterance column:
Checklist:
You should check all boxes before the PR is ready. If a box does not apply, check it to acknowledge
it.
ran
pre-commit run --all-filesat the end.Run
cd webapp && yarn typeswhile the back-end is running.our users.
READMEfiles and our wiki for any big design decisions, if relevant.