Improve bounding box frontend components #5305
Conversation
|
Code Climate has analyzed commit 9535cd3 and detected 5 issues on this pull request. Here's the issue category breakdown:
The test coverage on the diff in this pull request is 94.4% (85% is the threshold). This pull request will bring the total coverage in the repository to 95.3% (0.0% change). View more on Code Climate. |
julieg18
changed the base branch from
bounding-boxes
to
add-bb-backend-logic
| @@ -18,7 +18,6 @@ const boundingBoxColorsList = [ | |||
| '#ff701f', | |||
| '#ffb21d', | |||
| '#cfd231', | |||
| '#48f90a', | |||
There was a problem hiding this comment.
Stephanie commented previously that this neon green color makes text hard to read.
There was a problem hiding this comment.
Along with removing the neon color, Svetlana spotted that some colors don't look deselected with the opacity change, so I updated the deselected styles:
| { | ||
| box: { bottom: 370, left: 370, right: 390, top: 343 }, | ||
| score: 0.987 | ||
| } |
There was a problem hiding this comment.
Add some extra classes so we could show how classes go into a dropdown.
| <span className={styles.showMoreButtonWrapper}> | ||
| <Button | ||
| appearance="secondary" | ||
| onClick={() => {}} |
There was a problem hiding this comment.
I went for a button like I did with Studio, but I also tested a "tooltip" option that used text instead of a VSCode button:
webview/src/plots/components/comparisonTable/cell/ComparisonTableBoundingBoxColorFilter.tsx
Outdated
Show resolved
Hide resolved
| classDetailsArr.unshift([ | ||
| 'tree', | ||
| { color: getBoundingBoxColor(classDetailsArr.length), selected: false } | ||
| ]) |
There was a problem hiding this comment.
Added a unselected option that we could view in Storybook since checks rely on the backend.
| @@ -189,22 +189,48 @@ $gap: 4px; | |||
| display: none; | |||
| } | |||
|
|
|||
| .classButtons { | |||
| font-family: $font; | |||
There was a problem hiding this comment.
Updated the font since it takes up less space and it felt like it made more sense since we use it for plot section widgets:
webview/src/plots/components/comparisonTable/ComparisonTableRowClasses.tsx
Outdated
Show resolved
Hide resolved
webview/src/plots/components/comparisonTable/ComparisonTableRowClasses.tsx
Show resolved
Hide resolved
webview/src/plots/components/comparisonTable/cell/ComparisonTableBoundingBoxColorFilter.tsx
Outdated
Show resolved
Hide resolved
webview/src/plots/components/comparisonTable/styles.module.scss
Outdated
Show resolved
Hide resolved
main<- #5227 <- #5241 <- #5250 <- this <- #5313Updates our class logic to handle different use cases and adds other various improvements I spotted while working in Studio (details inline).
Demo
https://github.com/iterative/vscode-dvc/assets/43496356/50a95839-ce6f-47f5-819a-d8a1ea953cb6Screen.Recording.2024-02-20.at.6.17.42.AM.mov