Fix ai model list's alignment of items in actions column #8474
Conversation
📝 WalkthroughWalkthroughThis pull request modifies the UI in the AI model list view. The changes include replacing the "EditOutlined" icon with the "TeamOutlined" icon for managing access, and adding a conditional check to display the organization sharing button only when the training job state is "SUCCESS". It also introduces updated icon rendering for the Voxelytics Report and training data links, and refactors the layout to use Ant Design's Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx (2)
205-205: Consider using consistent styling for all action rowsFor better visual consistency, consider applying the same left margin to all action rows, including the organization sharing button.
- {trainingJobState === "SUCCESS" ? <Row>{organizationSharingButton}</Row> : null} + {trainingJobState === "SUCCESS" ? <Row style={{ marginLeft: 16 }}>{organizationSharingButton}</Row> : null}
214-217: Inconsistent styling pattern between iconsThe
EyeOutlinedicon uses both className and inline style properties, whileFileTextOutlineddoesn't use any special styling. For consistency, consider using the same styling approach for all icons.- <EyeOutlined - className="icon-margin-right" - style={{ color: "var(--ant-color-primary)" }} - /> + <EyeOutlined className="icon-margin-right" />Or apply the primary color styling to both icons:
- <FileTextOutlined /> + <FileTextOutlined + className="icon-margin-right" + style={{ color: "var(--ant-color-primary)" }} + />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx(2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx (1)
frontend/javascripts/admin/job/job_list_view.tsx (1)
getShowTrainingDataLink(67-109)
🔇 Additional comments (5)
frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx (5)
1-7: Appropriate icon imports added for improved visual representationThe addition of
EyeOutlined,FileTextOutlined, andTeamOutlinedicons from Ant Design provides better visual cues for the respective action items. TheTeamOutlinedicon is a more semantically appropriate choice for the "Manage Access" action compared to the previousEditOutlinedicon.
10-10: Added necessary Ant Design components for layout improvementsAdding
ColandRowcomponents from Ant Design is essential for implementing the row-based layout that addresses the alignment issues mentioned in the PR description.
190-192: Improved icon choice for Manage Access functionalityReplacing the generic
EditOutlinedicon with the more specificTeamOutlinedicon better represents the "Manage Access" functionality, improving the UI's intuitiveness.
197-201: Enhanced destructuring to support conditional renderingGood addition of the
stateproperty (aliased astrainingJobState) to the destructuring. This enables the conditional rendering of the organization sharing button based on the training job's state.
204-221: Fixed alignment of action items as intendedThis restructuring resolves the alignment issue mentioned in the PR description by:
- Using Ant Design's layout components (
ColandRow) for consistent spacing- Placing each action in its own row for clear visual separation
- Adding proper spacing with
marginLeftto create a consistent indentation pattern- Including icons that provide visual cues for different action types
The conditional rendering based on
trainingJobState === "SUCCESS"ensures the organization sharing button only appears when appropriate.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
CHANGELOG.unreleased.md (1)
35-35: Refine Changelog Entry Description
The changelog entry on line 35 reads:
- Fixed visual alignment of actions in ai model list. [#8474](https://github.com/scalableminds/webknossos/pull/8474)
Consider enhancing this entry to explicitly mention that multiple action items in the "actions" column are now displayed on their own rows and are left-aligned. This will more clearly communicate the fix in accordance with the PR objectives.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
CHANGELOG.unreleased.md(1 hunks)frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: circleci_build
…bknossos into fix-ai-model-sharing-ui
2 participants
The action items in the ai models list are misaligned if there are multiple. This PR cleans this up. All actions should now have their own row and be left aligned together. Similar to the actions column in the dataset table. See:
Oh and I added some icons as I though it looks nicer this way :D
URL of deployed dev instance (used for testing):
Steps to test:
ai_model_list_view.tsxadd<Row>{organizationSharingButton}</Row>multiple times after line 205. Allowing to check how it would look like when the job was successful.Issues:
(Please delete unneeded items, merge only when none are left open)