WIP Upgrade to Antd v6 #9117
WIP Upgrade to Antd v6 #9117
Conversation
📝 WalkthroughWalkthroughBulk migration to Ant Design v6: widespread prop and type updates (e.g., Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (2)
🧰 Additional context used🧠 Learnings (6)📓 Common learnings📚 Learning: 2025-12-04T13:41:44.919ZApplied to files:
📚 Learning: 2025-12-04T14:12:26.493ZApplied to files:
📚 Learning: 2025-12-11T15:25:53.526ZApplied to files:
📚 Learning: 2025-12-11T15:33:06.880ZApplied to files:
📚 Learning: 2025-12-11T15:54:47.778ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
frontend/javascripts/viewer/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx (1)
838-844: Revert notification API change: usemessageinstead oftitle.Ant Design v6's notification API uses the
messageprop (type: string | ReactNode), nottitle. The current code change is incorrect and will break the notification display. Update the notification.open() call to usemessageas the prop name.frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/run_ai_model_tab.tsx (1)
71-82: Inconsistent Card API usage detected.This Card component still uses
bordered={false}(line 71), while the other two Card components at lines 91 and 112 have been migrated tovariant="borderless". All Cards should be updated consistently for the Ant Design v6 migration.Apply this diff to complete the migration:
- <Radio.Button - className="aIJobSelection" - checked={aIJobModalState === APIJobType.INFER_NEURONS} - onClick={() => dispatch(setAIJobModalStateAction(APIJobType.INFER_NEURONS))} - > - <Card bordered={false}> + <Radio.Button + className="aIJobSelection" + checked={aIJobModalState === APIJobType.INFER_NEURONS} + onClick={() => dispatch(setAIJobModalStateAction(APIJobType.INFER_NEURONS))} + > + <Card variant="borderless"> <Space direction="vertical" size="small">
🧹 Nitpick comments (2)
frontend/javascripts/viewer/view/action-bar/tools/volume_specific_ui.tsx (1)
206-209: Add explicit type annotation for the onClick handler.The onClick handler parameter lacks explicit typing, which reduces TypeScript's ability to validate property access. Since the file has
strict: trueandnoImplicitAny: trueenabled, add explicit typing usingMenuProps["onClick"]:- onClick: (e) => { + onClick: ((e) => { dispatch(updateUserSettingAction("interpolationMode", e.key as InterpolationMode)); onInterpolateClick(null); - }, + }) satisfies MenuProps["onClick"],This preserves type safety and allows TypeScript to verify the handler's parameter shape matches Ant Design v6's expected
MenuPropscontract.frontend/javascripts/dashboard/dataset_view.tsx (1)
2-2: Refresh/scan split is clearer; consider also disabling Refresh while loadingThe new
DatasetRefreshButtonwith a primary Refresh action and a separate Dropdown trigger (usingDownOutlined) is a nice clarity improvement, and importingMenuPropsfrom Antd aligns the filter menu typing with the component API.One small UX tweak to consider: the Refresh button is disabled only when
context.isChecking, but not whencontext.isLoading. That means users can trigger multiple concurrentfetchDatasets()calls while a normal refresh is still in progress. You may want:- <Button onClick={() => context.fetchDatasets()} disabled={context.isChecking}> + <Button + onClick={() => context.fetchDatasets()} + disabled={context.isChecking || context.isLoading} + >to avoid redundant refreshes.
Also applies to: 22-22, 314-336
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (33)
frontend/javascripts/admin/dataset/dataset_components.tsx(1 hunks)frontend/javascripts/admin/dataset/dataset_upload_view.tsx(1 hunks)frontend/javascripts/admin/onboarding.tsx(2 hunks)frontend/javascripts/admin/organization/upgrade_plan_modal.tsx(4 hunks)frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx(0 hunks)frontend/javascripts/admin/voxelytics/task_list_view.tsx(1 hunks)frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx(1 hunks)frontend/javascripts/dashboard/dashboard_task_list_view.tsx(1 hunks)frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx(1 hunks)frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx(1 hunks)frontend/javascripts/dashboard/dataset/helper_components.tsx(1 hunks)frontend/javascripts/dashboard/dataset_folder_view.tsx(1 hunks)frontend/javascripts/dashboard/dataset_view.tsx(3 hunks)frontend/javascripts/dashboard/explorative_annotations_view.tsx(1 hunks)frontend/javascripts/dashboard/folders/folder_selection.tsx(1 hunks)frontend/javascripts/dashboard/publication_card.tsx(1 hunks)frontend/javascripts/libs/toast.tsx(1 hunks)frontend/javascripts/navbar.tsx(2 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/alignment_tab.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/run_ai_model_tab.tsx(2 hunks)frontend/javascripts/viewer/view/action-bar/tools/volume_specific_ui.tsx(1 hunks)frontend/javascripts/viewer/view/context_menu.tsx(5 hunks)frontend/javascripts/viewer/view/help_modal.tsx(1 hunks)frontend/javascripts/viewer/view/novel_user_experiences/welcome_toast.tsx(1 hunks)frontend/javascripts/viewer/view/right-border-tabs/advanced_search_popover.tsx(1 hunks)frontend/javascripts/viewer/view/right-border-tabs/comment_tab/comment_tab_view.tsx(2 hunks)frontend/javascripts/viewer/view/right-border-tabs/scrollable_virtualized_tree.tsx(3 hunks)frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx(2 hunks)frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view_helper.tsx(4 hunks)frontend/javascripts/viewer/view/right-border-tabs/sidebar_context_menu.tsx(1 hunks)frontend/javascripts/viewer/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx(1 hunks)frontend/javascripts/viewer/view/right-border-tabs/trees_tab/tree_hierarchy_renderers.tsx(1 hunks)package.json(2 hunks)
💤 Files with no reviewable changes (1)
- frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-08-14T14:12:03.293Z
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 8849
File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51
Timestamp: 2025-08-14T14:12:03.293Z
Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", etc.), allowing individual form items to override the parent Form's layout setting. This is a newer API addition that provides more granular control over form item layouts.
Applied to files:
frontend/javascripts/dashboard/dataset/helper_components.tsx
📚 Learning: 2025-11-03T17:50:57.587Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 9025
File: frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx:10-10
Timestamp: 2025-11-03T17:50:57.587Z
Learning: In the webknossos codebase, both `import { Component } from "antd";` and `import { Component } from "antd/lib";` are valid import paths for antd components. Do not flag imports from "antd/lib" as errors.
Applied to files:
frontend/javascripts/viewer/view/right-border-tabs/comment_tab/comment_tab_view.tsx
📚 Learning: 2025-09-08T13:33:47.097Z
Learnt from: MichaelBuessemeyer
Repo: scalableminds/webknossos PR: 8824
File: frontend/javascripts/viewer/view/context_menu.tsx:1033-1039
Timestamp: 2025-09-08T13:33:47.097Z
Learning: In frontend/javascripts/viewer/view/context_menu.tsx, the segmentIdLabel intentionally shows the unmapped segment ID (maybeUnmappedSegmentId) in the "within Segment ${id}" text when proofreading is active, as this can be helpful for users. The mapped segment ID (segmentIdAtPosition) is only used as a fallback when the unmapped ID is not available.
Applied to files:
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view_helper.tsxfrontend/javascripts/viewer/view/context_menu.tsx
🧬 Code graph analysis (4)
frontend/javascripts/viewer/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx (1)
frontend/javascripts/libs/format_utils.ts (1)
formatNumberToLength(219-233)
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx (1)
frontend/javascripts/viewer/model/types/tree_types.ts (1)
Tree(61-75)
frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx (1)
frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx (1)
DatasetSettingsFormData(9-15)
frontend/javascripts/viewer/view/context_menu.tsx (1)
frontend/javascripts/libs/format_utils.ts (1)
formatNumberToLength(219-233)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build-smoketest-push
- GitHub Check: backend-tests
🔇 Additional comments (30)
frontend/javascripts/dashboard/dataset_folder_view.tsx (1)
121-121: Card API migration looks correct.The change from
bordered={false}tovariant="borderless"is consistent with the Ant Design v6 Card API update applied throughout the codebase.frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/alignment_tab.tsx (1)
15-15: Card API migration looks correct.The change from
bordered={false}tovariant="borderless"is consistent with the Ant Design v6 Card API update applied throughout the codebase.frontend/javascripts/dashboard/dataset/helper_components.tsx (1)
2-2: Import path update for form types.The import source has been updated from
rc-field-form/es/interfaceto@rc-component/form/es/interface, reflecting Ant Design v6's package reorganization. The@rc-component/formpackage is correctly listed in yarn.lock and the import path is valid.frontend/javascripts/viewer/view/right-border-tabs/sidebar_context_menu.tsx (1)
28-31: Dropdown API migrations to v6 are correct.Both API changes are accurately applied:
classNames={{ root: ... }}correctly replaces the olderdropdownClassName/popupClassNamepattern for styling the popup overlaydestroyOnHiddencorrectly replaces the deprecateddestroyPopupOnHidefor controlling popup lifecycleCode looks good.
frontend/javascripts/admin/dataset/dataset_components.tsx (1)
31-31: Card API migration is incorrect and needs revision.The
variantprop does not apply to Card components in Ant Design v6. The Card component still uses theborderedboolean prop. The change frombordered={false}tovariant="borderless"will not work as intended; thevariantprop is only supported on form input components (Input, Select, DatePicker, etc.). Revert tobordered={false}to properly remove the card border.Likely an incorrect or invalid review comment.
frontend/javascripts/viewer/view/right-border-tabs/advanced_search_popover.tsx (1)
146-146: Popover API migration to v6 is correct.The change from
overlayClassNametoclassNames={{ root: "search-input-popover" }}properly follows Ant Design v6's semantic classNames API, whererootis a valid semantic key for targeting the popover root element.frontend/javascripts/dashboard/publication_card.tsx (1)
216-216: LGTM! Card API migration to Ant Design v6.The Card prop change from
bordered={false}tovariant="borderless"correctly follows the Ant Design v6 migration pattern.frontend/javascripts/dashboard/dashboard_task_list_view.tsx (1)
373-373: LGTM! Consistent Card API migration.The Card prop change aligns with Ant Design v6's
variant="borderless"API.frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/run_ai_model_tab.tsx (1)
91-102: LGTM! Card API migration completed for these components.These Card components correctly use
variant="borderless"for Ant Design v6.Also applies to: 112-123
frontend/javascripts/admin/voxelytics/task_list_view.tsx (1)
345-354: LGTM! Notification API migrated to Ant Design v6.The notification calls correctly use
titleanddescriptionfields instead of the deprecatedmessagefield, aligning with Ant Design v6's notification API.frontend/javascripts/viewer/view/right-border-tabs/trees_tab/tree_hierarchy_renderers.tsx (1)
537-544: LGTM! Notification API updated correctly.The notification field change from
messagetotitleis consistent with Ant Design v6's API.frontend/javascripts/viewer/view/novel_user_experiences/welcome_toast.tsx (1)
21-21: LGTM! Notification API migrated.The field change from
messagetotitlealigns with Ant Design v6's notification API.frontend/javascripts/dashboard/folders/folder_selection.tsx (1)
58-58: The TreeSelect styles structure is correct as written.The nested structure
styles={{ popup: { root: { maxHeight: 500, overflow: "auto" } } }}is the correct pattern for Ant Design v6's TreeSelect component. Therootnesting level is required—this is the documented migration path from the deprecateddropdownStyleprop to the new semanticstylesAPI in v6.package.json (1)
127-127: Confirm Ant Design v6.0.0 compatibility with breaking changes.Ant Design 6.0.0 is a stable release with significant breaking changes: React 18 is now required (React <18 no longer supported), CSS Variables are the default styling mode (IE support removed), component DOM/classNames have been refactored with semantic naming changes, and all v4-deprecated compatibility code has been removed. Ensure your application and its dependencies meet these requirements and that the necessary updates have been applied throughout the codebase.
Applies to
@ant-design/icons^6.0.0 (line 127) andantd^6.0.0 (line 139).frontend/javascripts/dashboard/explorative_annotations_view.tsx (1)
483-513: Borderless Card migration is fineSwitching the empty‑state Card to
variant="borderless"matches the Antd v6 Card API and preserves the previous borderless look together with the transparent background.frontend/javascripts/admin/onboarding.tsx (1)
150-165: Stepsitemsand borderless Card migration look good
OptionCard’sCardusingvariant="borderless"together with the existingstyles.bodykeeps the previous “floating card” look under the new API.- The
Stepsitems={availableSteps.map(({ title }) => ({ title, key: title }))}mirrors youravailableStepsarray and preserves the existingcurrentStepindexing logic, so step highlighting should behave exactly as before.If you want to sanity‑check the Steps rendering, it’s enough to click through the onboarding flow locally and confirm the highlighted step matches
currentStepat each transition.Also applies to: 671-688
frontend/javascripts/navbar.tsx (1)
39-40: UsingMenuProps["onClick"]for the help menu callback is reasonableTyping
openHelpModalasMenuProps["onClick"]keepsgetHelpSubMenuin sync with Antd’s menu click signature while you still pass a simple() => setIsHelpModalOpen(true)from the caller. That’s safe at runtime (extra args from Antd are ignored) and keeps types coupled to the actual library API instead of a home‑grown alias.If you ever need click metadata here (e.g., which item was used to open the modal), you can start consuming the
infoargument in theopenHelpModalimplementation without touching this helper.If TS ever tightens the callback variance, you can switch to an explicit parameter to be future‑proof:
const openHelpModal: MenuProps["onClick"] = (_info) => setIsHelpModalOpen(true);Also applies to: 310-325, 879-887
frontend/javascripts/admin/dataset/dataset_upload_view.tsx (1)
693-701: FormonValuesChangetyping update is correctAdapting
onFormValueChangeto(changedValues: Partial<UploadFormFieldTypes>, _allValues: UploadFormFieldTypes)matches Antd’sonValuesChangecontract and keeps the previous behavior of reacting only todatastoreUrlchanges.frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx (1)
130-138: Dropdown context menu props correctly migratedThe context menu’s Dropdown now uses the v6 props:
classNames={{ root: "dropdown-overlay-container-for-context-menu" }}instead ofoverlayClassName.destroyOnHiddeninstead ofdestroyPopupOnHide.Combined with the existing
open={contextMenuPosition != null}andgetPopupContainer={() => refContent}, this preserves the old behavior and styling while matching the new Dropdown API.If you notice any styling regressions around the context menu, inspect the rendered DOM to confirm the
dropdown-overlay-container-for-context-menuclass is attached to the correct overlay root element.frontend/javascripts/viewer/view/right-border-tabs/comment_tab/comment_tab_view.tsx (1)
10-18: Typed Tree ref and Dropdown menu config are correct
- Using
GetRef<typeof AntdTree>fortreeRefis the proper pattern for accessing Tree methods likescrollToand keeps the ref properly aligned with antd's Tree typings.- The
getSortDropdown()function correctly returnsMenuPropswithselectedKeys,onClick, anditems, and passing it viamenu={getSortDropdown()}to the Dropdown component matches the antd v6 API correctly.TypeScript will catch any signature drift from antd in future versions at compile time rather than runtime.
frontend/javascripts/admin/organization/upgrade_plan_modal.tsx (1)
20-20: Ref typing is correct;.valueaccess confirmedThe
GetRef<typeof InputNumber>typing is working as expected across all threeInputNumberrefs (userInputRefat lines 81 and 319,storageInputRefat line 125). Each safely accesses.valueafter null-checkingcurrent, and there are no type mismatches.No changes needed.
frontend/javascripts/libs/toast.tsx (1)
145-152: Notification option rename is correct and already consistent across the codebaseUsing
title: toastMessageintoastConfigaligns with Antd v6 notification API (which changed frommessagetotitleas the primary content property). All existing notification calls throughout the codebase already usetitle:, so no further updates are needed.frontend/javascripts/viewer/view/context_menu.tsx (3)
200-205: TypedhideContextMenucorrectly against Antd menu onClickUsing
Parameters<NonNullable<MenuProps["onClick"]>>[0]for the info parameter and guarding oninfo?.key === "load-stats"keeps this helper aligned with Antd’s menu click type while still allowing zero‑arg calls elsewhere. No issues spotted.
247-253: Notification title changes look consistentBoth measurement helpers now use
notification.open({ title: ..., icon: ... }), and the formatted strings still include both physical and voxel units. This keeps the UI text consistent and doesn’t change behavior beyond the Antd API rename.Also applies to: 270-278
2001-2007: Dropdown migration toclassNames+destroyOnHiddenlooks coherentUsing
classNames={{ root: "dropdown-overlay-container-for-context-menu" }}anddestroyOnHiddenmatches the new Dropdown API and maintains the previous overlay styling and lifecycle semantics for the context menu.frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view_helper.tsx (1)
2-2: Aligning mapping confirmation helper withMenuProps["onClick"]is soundTyping
originalOnClickandconfirmMappingActivationasMenuProps["onClick"]removes the rc‑menu dependency and matches how this helper is used from menu items. The null check before invokingoriginalOnClick(menuClickEvent)prevents crashes when no handler is supplied. This looks correct.Also applies to: 74-90, 102-139
frontend/javascripts/viewer/view/right-border-tabs/scrollable_virtualized_tree.tsx (1)
1-2: Ref type migration toGetRef<typeof AntdTree>is consistentSwitching the forwarded ref to
React.Ref<GetRef<typeof AntdTree>>keeps the wrapper’s typing aligned with Antd’s Tree instance while preserving the genericTreeProps<T>API. Runtime behavior (passing the ref to<AntdTree ref={ref} />) is unchanged.Also applies to: 13-16, 65-69
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx (1)
30-37: Tree ref now correctly typed against Antd’sTreecomponentImporting
type GetRef/type Treefrom Antd and updatingtreetoReact.RefObject<GetRef<typeof Tree>>keeps the ref type consistent withScrollableVirtualizedTree’s forwarded ref and with Antd v6’s Tree API. Calls likethis.tree.current.scrollTo({ key: ... })stay type‑safe.Also applies to: 423-428
frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx (1)
320-325: NarrowingchangedValuestoPartial<DatasetSettingsFormData>is appropriateTyping
_changedValuesasPartial<DatasetSettingsFormData>matches how Antd’sFormactually reports diffs and aligns with the updated context definition. Since the handler only toggleshasUnsavedChanges, this is a safe, type‑only improvement.frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx (1)
27-29: ContextonValuesChangesignature now matches Form/Provider usageUpdating
onValuesChangeto acceptchangedValues: Partial<DatasetSettingsFormData>keeps the context contract consistent with Antd Form’s change shape and with the provider implementation. Looks good.
| { | ||
| key: "view", | ||
| disabled: true, | ||
| label: "No actions available.", | ||
| title: "No actions available.", | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
wc -l frontend/javascripts/viewer/view/context_menu.tsxRepository: scalableminds/webknossos
Length of output: 122
🏁 Script executed:
sed -n '200,230p' frontend/javascripts/viewer/view/context_menu.tsxRepository: scalableminds/webknossos
Length of output: 839
🏁 Script executed:
rg "key:|label:|disabled:|title:" frontend/javascripts/viewer/view/context_menu.tsx -B 1 -A 1 | head -100Repository: scalableminds/webknossos
Length of output: 3183
🏁 Script executed:
cat frontend/javascripts/package.json | grep -A 5 -B 5 "antd"Repository: scalableminds/webknossos
Length of output: 133
🏁 Script executed:
find . -name "package.json" -type f | head -5Repository: scalableminds/webknossos
Length of output: 139
🏁 Script executed:
fd "package.json" | grep -E "(frontend|package)" | head -3Repository: scalableminds/webknossos
Length of output: 133
🏁 Script executed:
cat package.json | grep -A 2 -B 2 "antd"Repository: scalableminds/webknossos
Length of output: 213
🏁 Script executed:
rg "disabled.*true" frontend/javascripts/viewer/view/context_menu.tsx -B 2 -A 2Repository: scalableminds/webknossos
Length of output: 321
🌐 Web query:
Ant Design v6 Menu item label vs title property behavior
💡 Result:
Short answer: In Ant Design v6 (and since the items API introduced in v4.20+), a Menu item's display content comes from the label prop (ReactNode), while title is a separate string used only for the collapsed/tooltip text (or the native title attribute) — it does not replace or render the label. To change what users see in the menu use label; to control the tooltip shown when the menu is collapsed (or to suppress the tooltip) set title (e.g. title: '' or null to hide). Examples and docs: menu items API (label = ReactNode, title = tooltip for collapsed items). [1][2][3]
Sources:
- Menu docs (items API: label is ReactNode, title used for collapsed tooltip). [1]
- Ant Design changelog (fixes/behaviour around Menu.Item tooltip / title). [2]
- Community examples: set title: '' / null to remove default tooltip. [3]
Add label property to disabled menu item to display visible text
The menu item at lines 214-218 uses only title, but in Ant Design v6, title is for tooltip display only—the visible menu item text requires the label property. Without it, the disabled item renders as an empty row, creating a confusing visual gap in the context menu. Add label to make the text visible:
{
key: "view",
disabled: true,
+ label: "No actions available.",
title: "No actions available.",
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| { | |
| key: "view", | |
| disabled: true, | |
| label: "No actions available.", | |
| title: "No actions available.", | |
| }, | |
| { | |
| key: "view", | |
| disabled: true, | |
| label: "No actions available.", | |
| title: "No actions available.", | |
| }, |
🤖 Prompt for AI Agents
In frontend/javascripts/viewer/view/context_menu.tsx around lines 214-218, the
disabled menu item only uses the title prop (tooltip) so it renders as an empty
row in Ant Design v6; add a label property with the same visible text (e.g., "No
actions available.") to the menu item so the text is displayed while keeping it
disabled and retaining the title as the tooltip.
There was a problem hiding this comment.
it looks exactly like before
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Ant Design v6 Menu disabled item title vs label rendering
💡 Result:
Short answer
- title (string) is used as the collapsed-item tooltip / display title (not rendered as the menu content). Use it to change the text shown in the collapsed-menu tooltip. [1]
- label (ReactNode) is the actual rendered menu content (can be JSX, Tooltip, icons, etc.) and is the prop you should use if you want custom rendering or to show a tooltip for a disabled item. [1][2]
Implication for disabled items
- If you want a tooltip that appears when hovering a disabled item, put a Tooltip around the label (label: Item) because title only controls the collapsed-menu tooltip and does not let you supply arbitrary React nodes. [2]
Minimal example
- items = [{ key: '1', title: 'Short', label: Item, disabled: true }];
Sources
- Ant Design Menu docs (items API: title = display title for collapsed item; label = ReactNode). [1]
- Community guidance: wrap tooltip around label to show tooltip for disabled items (StackOverflow). [2]
- AntD item props reference. [3]
@knollengewaechs Thank you for confirming! If it's rendering correctly with just title, then the current implementation is fine. I appreciate you testing and providing that feedback.
🧠 Learnings used
Learnt from: MichaelBuessemeyer
Repo: scalableminds/webknossos PR: 8824
File: frontend/javascripts/viewer/view/context_menu.tsx:1033-1039
Timestamp: 2025-09-08T13:33:47.097Z
Learning: In frontend/javascripts/viewer/view/context_menu.tsx, the segmentIdLabel intentionally shows the unmapped segment ID (maybeUnmappedSegmentId) in the "within Segment ${id}" text when proofreading is active, as this can be helpful for users. The mapped segment ID (segmentIdAtPosition) is only used as a fallback when the unmapped ID is not available.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 9
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (8)
frontend/javascripts/viewer/view/left-border-tabs/histogram_view.tsx (1)
264-276: Revert Alert prop fromtitleback tomessage.Ant Design v6 Alert component does not have a
titleprop. The valid prop for main content ismessage. Usingtitlewill cause the alert content to not render. Change line 267 back tomessage={...}.frontend/javascripts/viewer/view/components/button_component.tsx (1)
68-71: UpdateToggleButtonto forward refs to fix positioning with overlay components.
ToggleButtonis used as a trigger for Ant Design'sPopover(involume_specific_ui.tsx:349-367), but doesn't forward refs. This breaks the ref chain that overlay components need to calculate popup position. Without the ref,Popovercannot position itself correctly relative to the trigger.Apply this change:
-export function ToggleButton(props: { active: boolean } & ButtonComponentProps) { +export const ToggleButton = React.forwardRef< + HTMLButtonElement | HTMLAnchorElement, + { active: boolean } & ButtonComponentProps +>((props, ref) => { const { active, ...restProps } = props; - return <ButtonComponent type={active ? "primary" : "default"} {...restProps} />; -} + return <ButtonComponent type={active ? "primary" : "default"} {...restProps} ref={ref} />; +}); +ToggleButton.displayName = "ToggleButton";frontend/javascripts/admin/dataset/dataset_upload_view.tsx (1)
728-735: The Alert component prop change is incorrect for Ant Design v6.The
messageprop has been renamed totitle, but Ant Design v6 Alert does not have atitleprop. The correct API usesmessagefor the main content anddescriptionfor secondary content. This change will break the Alert rendering—the alert content will not display. Revert to usingmessageprop or refactor to use the correct Ant Design v6 API withmessageanddescriptionprops as needed.Also applies to: 742-752, 816-824
frontend/javascripts/admin/auth/login_form.tsx (1)
61-78: Alert proptitledoes not exist in Ant Design v6; usemessageordescriptioninsteadThe Alert component in Ant Design v6 does not support a
titleprop. Replace it with eithermessage(for brief headings) ordescription(for longer content). Since this warning text is substantial,descriptionis more semantically appropriate. Without this fix, the Alert will render without any content, silently hiding the iFrame warning from users.frontend/javascripts/admin/tasktype/task_type_create_view.tsx (2)
224-237: Fix theshowSearchandoptionFilterPropprops at line 226 to use standalone configuration.In Ant Design v6,
optionFilterPropis a standalone prop on the Select component, not nested inside theshowSearchobject. The correct syntax is:<Select showSearch optionFilterProp="label" // ... other props />Line 226 incorrectly nests
optionFilterPropinsideshowSearch. This should be corrected to match the implementation at line 288, which uses the correct standalone pattern.
309-335: Change the "Any" option value from""(empty string) back to a value that properly represents "no preference" for the backend.The
showSearchAPI change correctly aligns with Ant Design v6. However, changing the "Any" option value fromnullto""(line 318) introduces a type contract violation.The backend expects
preferredMode: Option[TracingMode.Value]where valid values are onlyorthogonal,oblique, orflight. When the Select field is cleared withallowClear, sending an empty string""violates theAPIAllowedModetype contract—it is neither a valid mode nor properly absent. Play Framework's JSON deserialization will not recognize""as a valid enum value, causing unexpected behavior.When the user clears the field, the form should submit either
nullor leave the field undefined (which JSON serializes as missing), not an empty string. Update line 318 to usenullor implement anormalizecallback on the FormItem to convert""toundefinedbefore submission.frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/job_credit_cost_information.tsx (1)
26-36: Replacetitleprop withmessageprop on Alert componentAlert in Ant Design v6 does not support a
titleprop. The valid props aremessage(main content) anddescription(auxiliary content). Usingtitlewill silently fail to render the content—only the icon will display, leaving users with no billing/credit information. This needs to be corrected to:<Alert - title={ + message={ <> Billing for this job is not active during testing phase. This job is billed at{" "} {jobCreditCostPerGVx} {pluralize("credit", jobCreditCostPerGVx)} per Gigavoxel {jobCostInfoString}. Your organization currently has{" "} {formatCreditsString(organizationCredits)} WEBKNOSSOS credits. </> } type="info" showIcon />Note: This pattern of using
titleinstead ofmessageappears in multiple Alert usages across the codebase (e.g.,admin/user/user_list_view.tsx,admin/task/task_list_view.tsx,viewer/.../experimental_inference_alert.tsx). Audit and fix all occurrences.frontend/javascripts/admin/user/user_list_view.tsx (1)
248-256: Fix row selection toggle logic (splicemisuse and mutation)
onSelectUserRowcurrently mutates theselectedUserIdsarray and returns the removed items when deselecting, which will corrupt the selection state (e.g. leaving only the deselected ID).Use an immutable update and
filterinstead ofsplice:function onSelectUserRow(userId: string) { setSelectedUserIds((selectedUserIds) => { - const indexOfUser = selectedUserIds.indexOf(userId); - if (indexOfUser >= 0) { - return selectedUserIds.splice(indexOfUser, 1); - } else { - return [...selectedUserIds, userId]; - } + const indexOfUser = selectedUserIds.indexOf(userId); + if (indexOfUser >= 0) { + return selectedUserIds.filter((id) => id !== userId); + } else { + return [...selectedUserIds, userId]; + } }); }
♻️ Duplicate comments (1)
frontend/javascripts/viewer/view/help_modal.tsx (1)
45-48: LGTM! Correct Alert API migrations for Ant Design v6.Both changes align with the official Ant Design v6 migration guide:
- Alert's
messageprop is deprecated and replaced bytitlein v6- Alert's
closableprop is enhanced to accept an object containingonCloseandafterClosecallbacksNote: The past review comment suggesting
titleis incorrect is outdated and was based on v5 documentation. The v6 API now officially supports and recommends usingtitleinstead ofmessage.
🧹 Nitpick comments (6)
frontend/javascripts/viewer/view/right-border-tabs/connectome_tab/connectome_settings.tsx (1)
136-149:Optionvalue change looks correct; optional UX alignment withSelectvalueSwitching the disabled "No files available" option to
value=""is a sensible move for Antd v6 whereOptionvalues are typically strings/numbers rather thannull. This should resolve type/runtime gripes around anulloption.One minor thing to be aware of: in the
elsebranch,currentConnectomeFileNamewill usually benull, so theSelect’svalue(null) no longer matches this""sentinel. That means the closed control will now show the placeholder ("Select a connectome file") instead of "No files available". If you prefer to keep "No files available" visible as the selected label when there are no options, you could optionally align thevalueto""in that state (e.g., derivecurrentConnectomeFileNameas""whenavailableConnectomeFilesis empty). Otherwise, this change is fine as-is.frontend/javascripts/viewer/view/components/button_component.tsx (1)
19-66: Well-implemented forwardRef for Ant Design v6 compatibility.The implementation correctly forwards refs to support overlay positioning. The union type
HTMLButtonElement | HTMLAnchorElementis appropriate since Ant Design's Button can render as either element.Consider adding a
displayNamefor better debugging in React DevTools:}); +ButtonComponent.displayName = "ButtonComponent"; export function ToggleButton(props: { active: boolean } & ButtonComponentProps) {frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx (1)
127-134: Consider using gap for more consistent spacing.The
justify="space-between"approach will distribute buttons with maximum space between them. With a variable number of buttons (3 when auto-save is on, 4 when off), this may create inconsistent visual spacing.Consider using a
gapproperty for more consistent spacing:<Flex - justify="space-between" + gap={8} style={{ padding: "0 16px", }}frontend/javascripts/admin/statistic/project_and_annotation_type_dropdown.tsx (1)
55-59: Select search migration is good; tightenselectedFiltersinitialization
- The change to
showSearch={{ optionFilterProp: "label" }}correctly configures label‑based search with the newer Select API while keeping behavior the same.- Unrelated but nearby:
useState(Array<string>)initializesselectedFilterswith theArrayconstructor, not an empty string array, which is a bit misleading and momentarily givesSelecta non‑arrayvalue.Consider simplifying the state init for clarity and type safety:
- const [selectedFilters, setSelectedFilters] = useState(Array<string>); + const [selectedFilters, setSelectedFilters] = useState<string[]>([]);This avoids the brief incorrect initial value and better reflects the intended type.
Also applies to: 118-129
frontend/javascripts/viewer/view/action-bar/create_animation_modal.tsx (1)
492-503: Alert now correctly usestitle; consider simplifying list keysSwitching the error display to
title={...}is consistent with AntD v6AlertProps, which exposestitleas the main content prop. Thekey={errorMessage.slice(5)}is a bit magical though; using the full message as the key would be clearer and just as stable for these static strings.Example diff:
- title={ - <ul> - {validationErrors.map((errorMessage) => ( - <li key={errorMessage.slice(5)}>{errorMessage}</li> - ))} - </ul> - } + title={ + <ul> + {validationErrors.map((errorMessage) => ( + <li key={errorMessage}>{errorMessage}</li> + ))} + </ul> + }Please verify against your TS/React lint rules before changing.
frontend/javascripts/banners.tsx (1)
207-229: UpgradeVersionBanner: dismissal side effects viaclosablework; consider avoidingforceUpdateThe banner now uses
title={...}and the objectclosableprop with anonClosehandler, which is in line with AntD v6’s Alert contract. Storing the dismissal timestamp inlocalStorageand forcing a rerender ensuresshouldBannerBeShownflips tofalseand the navbar height effect runs.If you’d like to avoid the dummy reducer, you could instead track a local
dismissedstate and include it inshouldBannerBeShown, callingsetDismissed(true)inonClose(the effect would then rerun withoutforceUpdate). Behavior today is fine though, so this is optional.Please verify that dismissal still hides the banner for ~3 days and that the navbar height returns to its default immediately after closing.
Also applies to: 232-240
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (60)
frontend/javascripts/admin/account/account_profile_view.tsx(2 hunks)frontend/javascripts/admin/account/account_security_view.tsx(1 hunks)frontend/javascripts/admin/account/helpers/settings_card.tsx(1 hunks)frontend/javascripts/admin/auth/authentication_modal.tsx(1 hunks)frontend/javascripts/admin/auth/change_email_view.tsx(1 hunks)frontend/javascripts/admin/auth/login_form.tsx(1 hunks)frontend/javascripts/admin/dataset/composition_wizard/01_select_import_type.tsx(1 hunks)frontend/javascripts/admin/dataset/dataset_components.tsx(2 hunks)frontend/javascripts/admin/dataset/dataset_upload_view.tsx(5 hunks)frontend/javascripts/admin/organization/organization_cards.tsx(2 hunks)frontend/javascripts/admin/project/project_create_view.tsx(2 hunks)frontend/javascripts/admin/scripts/script_create_view.tsx(1 hunks)frontend/javascripts/admin/statistic/project_and_annotation_type_dropdown.tsx(1 hunks)frontend/javascripts/admin/task/task_create_form_view.tsx(4 hunks)frontend/javascripts/admin/task/task_list_view.tsx(1 hunks)frontend/javascripts/admin/task/task_search_form.tsx(3 hunks)frontend/javascripts/admin/tasktype/task_type_create_view.tsx(2 hunks)frontend/javascripts/admin/team/team_list_view.tsx(1 hunks)frontend/javascripts/admin/user/user_list_view.tsx(3 hunks)frontend/javascripts/admin/user/user_selection_component.tsx(1 hunks)frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx(0 hunks)frontend/javascripts/admin/voxelytics/task_list_view.tsx(4 hunks)frontend/javascripts/banners.tsx(5 hunks)frontend/javascripts/components/error_boundary.tsx(1 hunks)frontend/javascripts/components/pricing_enforcers.tsx(1 hunks)frontend/javascripts/dashboard/dashboard_task_list_view.tsx(2 hunks)frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx(2 hunks)frontend/javascripts/dashboard/dataset_view.tsx(4 hunks)frontend/javascripts/dashboard/explorative_annotations_view.tsx(4 hunks)frontend/javascripts/libs/toast.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/experimental_inference_alert.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/job_credit_cost_information.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/align_sections_form.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/custom_ai_model_inference_form.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/mitochondria_segmentation_form.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/neuron_segmentation_form.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/alignment_tab.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/run_ai_model_tab.tsx(4 hunks)frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/train_ai_model_tab.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/create_animation_modal.tsx(4 hunks)frontend/javascripts/viewer/view/action-bar/dataset_rotation_popover_view.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/download_modal_view.tsx(2 hunks)frontend/javascripts/viewer/view/action-bar/merge_modal_view.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/private_links_view.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/share_modal_view.tsx(1 hunks)frontend/javascripts/viewer/view/action-bar/tools/volume_specific_ui.tsx(4 hunks)frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx(2 hunks)frontend/javascripts/viewer/view/action_bar_view.tsx(2 hunks)frontend/javascripts/viewer/view/components/button_component.tsx(4 hunks)frontend/javascripts/viewer/view/components/markdown_modal.tsx(1 hunks)frontend/javascripts/viewer/view/help_modal.tsx(1 hunks)frontend/javascripts/viewer/view/left-border-tabs/histogram_view.tsx(1 hunks)frontend/javascripts/viewer/view/nml_upload_zone_container.tsx(1 hunks)frontend/javascripts/viewer/view/right-border-tabs/connectome_tab/connectome_settings.tsx(1 hunks)frontend/javascripts/viewer/view/right-border-tabs/connectome_tab/connectome_view.tsx(1 hunks)frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segment_statistics_modal.tsx(1 hunks)frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx(2 hunks)frontend/javascripts/viewer/view/version_view.tsx(1 hunks)frontend/stylesheets/antd_overwrites.less(13 hunks)package.json(2 hunks)
💤 Files with no reviewable changes (1)
- frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/run_ai_model_tab.tsx
- frontend/javascripts/admin/voxelytics/task_list_view.tsx
- frontend/javascripts/dashboard/dashboard_task_list_view.tsx
🧰 Additional context used
🧠 Learnings (5)
📚 Learning: 2025-10-21T10:54:16.468Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 8961
File: frontend/javascripts/viewer/model/actions/annotation_actions.ts:80-82
Timestamp: 2025-10-21T10:54:16.468Z
Learning: In frontend/javascripts/viewer/model/actions/annotation_actions.ts, the ShowManyBucketUpdatesWarningAction is intentionally not included in the AnnotationActionTypes union because it's a UI-only action that doesn't modify the annotation state through reducers.
Applied to files:
frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/experimental_inference_alert.tsxfrontend/javascripts/viewer/view/nml_upload_zone_container.tsxfrontend/javascripts/viewer/view/action-bar/download_modal_view.tsxfrontend/javascripts/viewer/view/action-bar/private_links_view.tsxfrontend/javascripts/viewer/view/action_bar_view.tsxfrontend/javascripts/viewer/view/action-bar/share_modal_view.tsx
📚 Learning: 2025-08-14T14:12:03.293Z
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 8849
File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51
Timestamp: 2025-08-14T14:12:03.293Z
Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", layout="inline"), allowing individual form items to override the parent Form's layout setting. This enables mixed layouts within a single form and was added as a new API feature in v5.18 according to the official changelog.
Applied to files:
frontend/javascripts/admin/dataset/composition_wizard/01_select_import_type.tsxfrontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/mitochondria_segmentation_form.tsxfrontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/align_sections_form.tsx
📚 Learning: 2025-08-14T14:12:03.293Z
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 8849
File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51
Timestamp: 2025-08-14T14:12:03.293Z
Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", etc.), allowing individual form items to override the parent Form's layout setting. This is a newer API addition that provides more granular control over form item layouts.
Applied to files:
frontend/javascripts/admin/dataset/composition_wizard/01_select_import_type.tsxfrontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/mitochondria_segmentation_form.tsx
📚 Learning: 2025-09-08T13:33:47.097Z
Learnt from: MichaelBuessemeyer
Repo: scalableminds/webknossos PR: 8824
File: frontend/javascripts/viewer/view/context_menu.tsx:1033-1039
Timestamp: 2025-09-08T13:33:47.097Z
Learning: In frontend/javascripts/viewer/view/context_menu.tsx, the segmentIdLabel intentionally shows the unmapped segment ID (maybeUnmappedSegmentId) in the "within Segment ${id}" text when proofreading is active, as this can be helpful for users. The mapped segment ID (segmentIdAtPosition) is only used as a fallback when the unmapped ID is not available.
Applied to files:
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segment_statistics_modal.tsx
📚 Learning: 2025-09-04T10:01:56.727Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 8895
File: frontend/javascripts/viewer/view/action_bar_view.tsx:0-0
Timestamp: 2025-09-04T10:01:56.727Z
Learning: In frontend/javascripts/viewer/view/action_bar_view.tsx, knollengewaechs prefers not to use onKeyUpCapture for preventing modal close on modifier keys because: 1) holding ctrl while opening modal will still close on keyup, 2) normal case of opening modal then pressing ctrl doesn't cause issues with just onKeyDownCapture.
Applied to files:
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsxfrontend/javascripts/viewer/view/help_modal.tsxfrontend/javascripts/viewer/view/action-bar/merge_modal_view.tsxfrontend/javascripts/viewer/view/action-bar/download_modal_view.tsxfrontend/javascripts/viewer/view/action-bar/private_links_view.tsxfrontend/javascripts/viewer/view/action-bar/share_modal_view.tsx
🧬 Code graph analysis (7)
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segment_statistics_modal.tsx (1)
frontend/javascripts/libs/utils.ts (1)
pluralize(1171-1179)
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx (2)
frontend/javascripts/viewer/view/layouting/layout_persistence.ts (1)
addNewLayout(164-186)frontend/javascripts/viewer/view/layouting/tracing_layout_view.tsx (1)
setAutoSaveLayouts(432-434)
frontend/javascripts/viewer/view/action-bar/tools/volume_specific_ui.tsx (1)
frontend/javascripts/components/fast_tooltip.tsx (1)
FastTooltip(54-123)
frontend/javascripts/admin/account/account_security_view.tsx (1)
frontend/javascripts/libs/toast.tsx (1)
messages(65-84)
frontend/javascripts/viewer/view/action-bar/share_modal_view.tsx (1)
frontend/javascripts/libs/toast.tsx (1)
message(228-247)
frontend/javascripts/components/pricing_enforcers.tsx (1)
frontend/javascripts/admin/organization/pricing_plan_utils.ts (1)
getFeatureNotAvailableInPlanMessage(93-115)
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx (1)
frontend/javascripts/viewer/model/types/tree_types.ts (1)
Tree(61-75)
🔇 Additional comments (58)
frontend/javascripts/viewer/view/action_bar_view.tsx (2)
51-58: Alert now correctly usestitlefor Antd v6Switching the main text prop from
messagetotitlematches the Antd v6AlertPropsAPI (wheretitleis the content prop), so this aligns with the new version and should avoid prop-type/TS issues without changing behavior. (jsdocs.io)
301-310: AI job button spacing change is safeReducing
marginLeftto10keeps behavior and accessibility intact (click handler, disabled state, tooltip all unchanged) and only adjusts horizontal spacing, which is fine as part of the visual tuning for the v6 upgrade.frontend/javascripts/viewer/view/components/button_component.tsx (1)
3-4: LGTM!Good use of the specific
lodash/noopimport for better tree-shaking, and the React import is correctly added forReact.forwardRef.frontend/stylesheets/antd_overwrites.less (6)
1-50: Whitespace-only changes in headings and layout sections appear safe.Lines 1–32 and 33–50 contain primarily formatting adjustments (whitespace, blank lines) with no functional style changes. The blank line added at line 42 within the
@media @smartphonesblock is a formatting normalization and should not affect CSS output.
52-131: Notification and animation styling: formatting changes only.Lines 52–131 contain whitespace and formatting adjustments to notification error styling and the
alert-wigglekeyframe animation. All actual CSS property values (colors, animation parameters) remain unchanged. These formatting adjustments are safe and should not affect runtime behavior.
179-209: Card, radio button, and menu styling: formatting adjustments only.Lines 179–209 contain whitespace and formatting normalization for card, radio button wrapper, list, and menu styling. All CSS property values remain unchanged. The blank line additions and spacing adjustments are purely cosmetic and do not affect runtime behavior.
224-289: Link button, tree, and empty state selectors reformatted; no functional changes.Lines 224–289 contain selector formatting normalization (removal of spaces around combinators) and blank line adjustments. The CSS specificity, inheritance behavior, and property values remain unchanged. These are purely stylistic improvements.
290-322: Action bar, dropdown, and radio button selectors reformatted; no functional changes.Lines 290–322 contain selector formatting normalization and blank line adjustments for action bar, dropdown menu icons, messages, and disabled radio buttons. All CSS property values and specificity remain unchanged.
142-144: Selector formatting normalized; no functional changes.The table cell padding selector at lines 142-144 is reformatted with compact combinators (
.ant-table-small>.ant-table-content>...instead of spaced format). This is a CSS style normalization with no functional impact on specificity or element targeting.The claim about a removed table overflow rule (
.ant-table-scroll > .ant-table-body { overflow-x: auto !important; }) is incorrect. This rule does not exist in the current file, was never present in git history for antd_overwrites.less, and was not removed. The file was created fresh in commit 6748da0 as a formatting change.Likely an incorrect or invalid review comment.
frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/alignment_tab.tsx (1)
15-16: The Antd v6 prop migrations are correct:
Card variant="borderless"correctly replaces the deprecatedbordered={false}Space orientation="vertical"correctly replacesdirection="vertical"with the same value preservedBoth changes follow the official Ant Design v6 API updates.
frontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/custom_ai_model_inference_form.tsx (1)
109-109: Removeorientationprop;directionis the correct Ant Design Space component prop.Ant Design's Space component uses
directionas the prop name for vertical/horizontal layout, notorientation. The web search confirms the current stable API only recognizesdirection,align,size,split, andwrapas Space props. Additionally, Ant Design v6 has not been released yet. The change fromdirection="vertical"toorientation="vertical"will cause the layout to fail since theorientationprop is not recognized by the Space component. Revert this line to usedirection="vertical".⛔ Skipped due to learnings
Learnt from: hotzenklotz Repo: scalableminds/webknossos PR: 8849 File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51 Timestamp: 2025-08-14T14:12:03.293Z Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", layout="inline"), allowing individual form items to override the parent Form's layout setting. This enables mixed layouts within a single form and was added as a new API feature in v5.18 according to the official changelog.Learnt from: hotzenklotz Repo: scalableminds/webknossos PR: 8849 File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51 Timestamp: 2025-08-14T14:12:03.293Z Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", etc.), allowing individual form items to override the parent Form's layout setting. This is a newer API addition that provides more granular control over form item layouts.frontend/javascripts/viewer/view/action-bar/download_modal_view.tsx (2)
148-155: Consistent Alert API migration.This change mirrors the previous Alert component update, correctly using
titleprop for Antd v6.
717-724: Verify the checkbox positioning visually.The position adjustment from
bottom: -62pxto-38pxlikely compensates for spacing changes in Antd v6's Modal component. Please verify that the "Keep window open" checkbox is positioned correctly in the UI after this change.frontend/javascripts/admin/dataset/dataset_upload_view.tsx (2)
693-696: LGTM! Good use of naming convention.The underscore prefix on
_allValuescorrectly indicates this parameter is intentionally unused. The function logic remains unchanged.
192-192: No issues found with the Space component prop rename.The
Spacecomponent in Ant Design v6 supports both theorientationanddirectionprops, accepting the same values. The change fromdirectiontoorientationis valid and will work correctly in v6, though both props remain supported for backward compatibility.frontend/javascripts/viewer/view/action-bar/private_links_view.tsx (1)
208-213: Array guard inExpirationDate’sonChangeis a sensible defensive fixThe early
Array.isArray(date)return matches the broader Antd v6DatePickertyping and safely ignores unexpected range-style values while preserving existing behavior for the single-date picker; just keep in mind that if this ever becomes aRangePicker, this handler will effectively no-op until it’s adapted to handle ranges explicitly.frontend/javascripts/dashboard/explorative_annotations_view.tsx (2)
24-24: LGTM! Space import aligns with v6 layout patterns.The Space component is properly imported and used later in the file (lines 698-718) to provide consistent spacing for tag elements.
698-718: LGTM! Space wrapper improves tag layout consistency.Wrapping the tags in
<Space wrap>provides consistent horizontal spacing and allows tags to wrap to multiple lines when needed. This is a recommended pattern in Antd v6 for collections of inline elements.frontend/javascripts/dashboard/dataset_view.tsx (3)
2-2: LGTM! Import updates align with Antd v6.The addition of
DownOutlinedand switchingMenuPropsfromrc-menutoantdare correct changes for the Antd v6 upgrade.Also applies to: 22-22
498-498: LGTM! Alert prop correctly updated for Antd v6.The change from
messagetotitlealigns with the Antd v6 API changes for the Alert component.
322-333: No action required. The code properly handlesundefinedorganizationId: thecheckDatasetsfunction acceptsstring | undefined(line 30, dataset_collection_context.tsx), and passes it totriggerDatasetCheckwhich also accepts optionalorganizationId?: string(line 1350, rest_api.ts) with an explicit guard at line 1355 (if (organizationId)). The refactoring fromDropdown.Buttonto separateButton+DropdowninSpace.Compactcorrectly implements the Ant Design v6 pattern.frontend/javascripts/admin/account/account_profile_view.tsx (1)
4-4: LGTM!The
Spaceimport is correctly added to support the newSpace.Compactwrapper used in the Theme selector.frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx (2)
12-12: LGTM: Flex import added for new layout structure.The addition of
Flexto the imports is appropriate for the consolidated layout actions group introduced below.
139-143: Remove redundant stopPropagation() calls in Button onClick handlers.The parent
Flexcontainer already callse.stopPropagation()on click events (line 133), making the nestede.stopPropagation()calls in each Button's onClick handler redundant. Remove them from lines 140, 150, 162, and 173.Likely an incorrect or invalid review comment.
frontend/javascripts/viewer/view/version_view.tsx (1)
50-59: Alert usage migration looks goodUsing the
titleprop for the info text keeps behavior and layout unchanged while aligning with the updated Alert API.frontend/javascripts/viewer/view/action-bar/merge_modal_view.tsx (1)
201-208: Info Alert migration is correctSwitching the info
Alertto use thetitleprop is consistent with the new Alert API; user‑visible behavior remains the same.frontend/javascripts/viewer/view/action-bar/ai_job_modals/tabs/train_ai_model_tab.tsx (1)
29-34: Train‑AI warning Alert change is safeUsing
titlefor the experimental‑feature notice preserves the existing messaging and layout without behavior changes.frontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/mitochondria_segmentation_form.tsx (1)
58-69: Space orientation migration is correctReplacing
direction="vertical"withorientation="vertical"matches the updatedSpaceAPI and keeps the vertical layout as before.frontend/javascripts/viewer/view/action-bar/share_modal_view.tsx (1)
303-329: Visibility warning Alert migration is fineBinding the computed warning string to the
Alert’stitleprop is a drop‑in change that preserves existing behavior.frontend/javascripts/components/error_boundary.tsx (1)
57-62: ErrorBoundary Alert update preserves behaviorUsing
title={errorMessage}withdescription={<pre>{errorDescription}</pre>}keeps the error display semantics while matching the current Alert API.frontend/javascripts/admin/task/task_list_view.tsx (1)
124-144: Manual‑assignment info Alert migration is safeUsing the
titleprop for the informational text in the assignment modal keeps the UX identical while matching the updated Alert API.frontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/neuron_segmentation_form.tsx (1)
132-132: LGTM! Correct API migration for Ant Design v6.The Space component now uses
orientationinstead ofdirectionin Ant Design v6. This change aligns with the official migration guide.frontend/javascripts/admin/auth/change_email_view.tsx (1)
156-156: LGTM! Correct Alert API migration for Ant Design v6.In Ant Design v6, Alert's
messageprop is deprecated and replaced bytitle. This migration is correct.frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/experimental_inference_alert.tsx (1)
6-6: LGTM! Correct Alert API migration for Ant Design v6.The Alert component's
messageprop is deprecated and replaced bytitlein v6. This change is correct.frontend/javascripts/viewer/view/components/markdown_modal.tsx (1)
59-69: LGTM! Correct Alert API migration for Ant Design v6.Alert's
messageprop is deprecated and replaced bytitlein v6. The JSX content is appropriately passed to thetitleprop.frontend/javascripts/viewer/view/action-bar/ai_job_modals/forms/align_sections_form.tsx (1)
38-45: LGTM! Correct API migrations for Ant Design v6.Both changes align with the official v6 migration guide:
- Space now uses
orientationinstead ofdirection- Alert's
messageprop is deprecated and replaced bytitlefrontend/javascripts/admin/account/account_security_view.tsx (1)
137-137: LGTM! Correct Alert API migration for Ant Design v6.Alert's
messageprop is deprecated and replaced bytitlein v6. This change is correct.frontend/javascripts/admin/account/helpers/settings_card.tsx (1)
23-28: LGTM! Correct Popover API migration for Ant Design v6.The change from
overlayInnerStyletostyles.containeraligns with Ant Design v6's semantic DOM styling pattern, where Popover allows customization of semantic DOM styles throughclassNamesandstylesobjects. Thecontainerproperty targets the inner content wrapper.frontend/javascripts/admin/user/user_list_view.tsx (1)
172-183: Alert header prop migration looks goodAll three Alerts now pass header content via
titleand keep the rich body indescription, matching the pattern used elsewhere in this PR. No behavioral issues from these changes as long as the pages are smoke-tested for visual regressions.Please quickly verify in the UI that:
- The “new inactive users”, “Invite more users”, and “maximum number of users” alerts still render as expected (icon + bold header + body text).
Also applies to: 196-210, 215-237
package.json (1)
124-140: Ant Design dependency bump is coherent with the v6 migrationUpdating
antdto^6.0.1together with@ant-design/iconsand@ant-design/colorskeeps the Ant Design stack in sync and matches the API changes used in the TSX files.Please:
- Make sure the full frontend test suite and screenshot/E2E tests are run against this exact dependency set.
- Confirm there’s no need to pin
antdmore strictly than^6.0.1(e.g., if you want to avoid unexpected minor/patch changes).frontend/javascripts/admin/project/project_create_view.tsx (1)
105-116: Select search config aligned with label-based optionsUsing
showSearch={{ optionFilterProp: "label" }}for the Team and Owner selects matches the{ label, value }options you pass and keeps the intended label-based filtering while conforming to the newer Select API.Please verify in the UI that typing into these Selects still filters by the visible label (team name / user display string) as before.
Also applies to: 128-138
frontend/javascripts/admin/organization/organization_cards.tsx (1)
131-160: Plan alerts updated to usetitlefor main copyBoth
PlanExceededAlertandPlanAboutToExceedAlertnow pass their primary text viatitle, with actions and conditional logic untouched. This keeps behavior the same while matching the new Alert API used elsewhere.Please visually confirm:
- Error/warning icons still appear.
- The title text remains prominent, and the action buttons (“Extend Plan Now” / “Upgrade Now”) render correctly.
Also applies to: 169-188
frontend/javascripts/admin/task/task_search_form.tsx (1)
150-162: Task search Selects now consistently search bylabelUpdating the Task Type, Project, and User selects to
showSearch={{ optionFilterProp: "label" }}matches their{ label, value }options and should retain the same UX while aligning with the newer Select API.Please:
- Manually test a few searches for task types, projects, and users to ensure filtering still works as expected.
- Check that clearing selections (
allowClear) still behaves correctly with the new search config.Also applies to: 169-181, 186-200
frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx (1)
68-74: Dataset import status alerts migrated totitlepropFor the “not imported yet”, “invalid datasource.json”, and “import complete” cases, the Alerts now render their headings through
titlewhile keeping descriptions and control flow identical. This should be a pure API-alignment change.Please verify on a few datasets with:
- Missing
dataSource.json,- Invalid
dataSource.json,- Successful imports,
that the alerts still appear with the correct icon, heading, and description.
Also applies to: 75-90, 96-101
frontend/javascripts/admin/task/task_create_form_view.tsx (1)
544-558: Task creation Selects migrated to label-based search configurationSwitching the Dataset, Task Type, Project, and Script selects to
showSearch={{ optionFilterProp: "label" }}matches their{ label, value }options and keeps search semantics clear, while aligning with the newer Select API.Please:
- Try searching in each dropdown (especially with long lists of datasets/projects/scripts) to confirm filtering remains correct and responsive.
- Ensure that editing an existing task (where Selects may be disabled) still renders the chosen labels correctly.
Also applies to: 630-640, 719-729, 742-752
frontend/javascripts/admin/dataset/dataset_components.tsx (1)
25-45: Card variant and Datastore Select search config align with the new design system
CardContainer: Usingvariant="borderless"keeps the card visually borderless while matching the newer variant-based API, with no other layout changes.DatastoreFormItem:showSearch={{ optionFilterProp: "label" }}fits the{ label: datastore.name, value: datastore.url }options and should maintain the intended label-based search.Please:
- Check a few dataset settings/import screens to confirm the cards still look borderless as before.
- Verify that the Datastore dropdown search filters by the visible datastore name.
Also applies to: 135-147
frontend/javascripts/viewer/view/action-bar/create_animation_modal.tsx (1)
398-415: Space migration toorientationmatches AntD v6Using
orientation="vertical"instead ofdirection="vertical"lines up with the updatedSpacePropsin AntD v6 (wheredirectionis now deprecated in favor oforientation), so the vertical layout should remain intact without deprecation noise.Please double‑check in your local build that these
Spaceblocks still render the controls vertically as intended under your exactantdversion.Also applies to: 425-435, 440-462
frontend/javascripts/banners.tsx (2)
55-72: UpcomingMaintenanceBanner: Alert v6 props and close behavior look goodUsing
title={...}for the maintenance text and the object form ofclosablewith anonClosehandler matches the AntD v6AlertPropsAPI and lets you both persist the acknowledgement and immediately reset the navbar height when the banner is dismissed.Please verify in your UI that closing this banner both hides it and restores
--navbar-heightas expected, especially before the next maintenance poll runs.
80-90: CurrentMaintenanceBanner:Alert.titlemigration is straightforwardSwitching the content into the
titleprop is aligned with the v6 Alert API and keeps the banner non‑closable as before; behavior should be unchanged aside from the internal prop name.Just confirm that styling/spacing of this banner matches the old version in your browser.
frontend/javascripts/viewer/view/action-bar/tools/volume_specific_ui.tsx (1)
10-20: VolumeInterpolationButton refactor preserves behavior and matches AntD v6 Dropdown/MenuImporting
Buttonfromantd, keepingSpace.Compact, and splitting the oldDropdown.Buttoninto a dedicated execute button plus a dropdown trigger is a clean way to adapt to the v6 APIs while retaining the previous UX: the left button still runs interpolation with the current mode, and the right button opens the menu, whoseonClickupdates the mode and then triggers interpolation.Using
MenuPropsformenukeeps the handler correctly typed, and wiringdisabled={isDisabled}into both buttons ensures the control is fully inactive when interpolation is unavailable.Please sanity‑check that:
- Clicking the main icon button still interpolates with the current mode.
- Choosing a mode from the dropdown both switches the mode and immediately runs interpolation.
- The entire control is disabled when
isDisabledis true, under your actualantdversion.Also applies to: 207-224, 230-243
frontend/javascripts/admin/dataset/composition_wizard/01_select_import_type.tsx (1)
30-30: LGTM! Correct Ant Design v6 API migration.Space now uses
orientationinstead ofdirectionin Ant Design v6. This change correctly aligns with the official migration guide.frontend/javascripts/admin/team/team_list_view.tsx (1)
181-181: LGTM! Correct Alert API migration.Alert's
messageprop is deprecated and replaced bytitlein Ant Design v6. This correctly follows the official migration path.frontend/javascripts/admin/auth/authentication_modal.tsx (1)
52-52: LGTM! Consistent Alert migration.This Alert prop change from
messagetotitleis consistent with the Ant Design v6 migration pattern applied throughout the PR.frontend/javascripts/viewer/view/right-border-tabs/connectome_tab/connectome_view.tsx (1)
730-737: LGTM! Alert title migration with JSX content.The Alert correctly migrates from
messagetotitle. The JSX content (including the clickable activation link) works identically with the new prop name.frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segment_statistics_modal.tsx (1)
286-289: LGTM! Alert migration with dynamic content.The Alert correctly uses
titleinstead ofmessage. The dynamic content withpluralizeand coordinate information renders correctly with the new prop.frontend/javascripts/components/pricing_enforcers.tsx (1)
229-233: LGTM! Alert migration in pricing enforcer.The Alert correctly migrates to use
titlefor rendering the feature availability message, maintaining the same functionality.frontend/javascripts/admin/scripts/script_create_view.tsx (1)
101-101: LGTM! Select search configuration migration.Ant Design v6 merges search-related props into
showSearchas an object configuration. This change correctly consolidatesshowSearchandoptionFilterPropinto a single object prop.frontend/javascripts/viewer/view/action-bar/dataset_rotation_popover_view.tsx (1)
86-86: LGTM! Button icon placement migration.Button's
iconPositionis deprecated and replaced byiconPlacementin Ant Design v6. This change correctly follows the official migration guide.
| showSearch={{ | ||
| optionFilterProp: "label", | ||
| filterOption: (input, option) => | ||
| // @ts-expect-error ts-migrate (2532) FIXME: Object is possibly 'undefined'. | ||
| option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0, | ||
| }} |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Ant Design v6 Select component showSearch API documentation
💡 Result:
The Select component's showSearch prop is documented in the Select API (shows a search input in single mode; boolean). See Ant Design Select API. [1]
Also see the v5→v6 migration notes on the Ant Design site for related changes when upgrading. [2]
Sources:
[1] Ant Design — Select component (API: showSearch). (3x.ant.design)
[2] Ant Design — From v5 to v6 migration notes. (ant.design)
Citations:
- 1: https://3x.ant.design/components/select/?utm_source=openai
- 2: https://ant.design/docs/react/migration-v6?utm_source=openai
🏁 Script executed:
# Check if there are TypeScript definitions or type files in the repo
fd -e "d.ts" -e "types.ts" | grep -i "select\|antd" | head -20Repository: scalableminds/webknossos
Length of output: 50
🏁 Script executed:
# Look for the actual usage context and type of option parameter
cat -n frontend/javascripts/admin/user/user_selection_component.tsx | head -60Repository: scalableminds/webknossos
Length of output: 2164
🌐 Web query:
Ant Design v6 Select showSearch object configuration filterOption callback
💡 Result:
Short answer: In Ant Design Select (v6-compatible API) set showSearch (true) and provide filterOption as a function with signature (input: string, option) => boolean. The option parameter shape depends on how you provide options:
- If you use the options prop (array of { value, label }), inspect option.label (or option?.label).
- If you use ..., inspect option.props.children (or option?.props?.children).
Example (works with v4/5/6 API):
- when using options prop:
const filterOption = (input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
<Select
showSearch
optionFilterProp="children"
filterOption={filterOption}
options={[{ value: '1', label: 'Apple' }, { value: '2', label: 'Banana' }]}
/>
- when using Option children:
filterOption = (input, option) =>
(option?.props?.children ?? '').toString().toLowerCase().includes(input.toLowerCase());
Notes:
- Use optional chaining (option?.label / option?.props?.children) to be safe.
- You can also set optionFilterProp to change which option field is used for automatic filtering (e.g., 'children' or 'value').
Docs / references: [1][2].
References:
[1] Ant Design Select docs (examples showing filterOption signature and option props).
[2] Ant Design Select docs (example using options prop and option?.label).
🌐 Web query:
Ant Design v6 migration guide Select component API changes
💡 Result:
Here are the main Select-related API changes to watch for when migrating from Ant Design v5 → v6 (summary plus recommended replacements):
- dropdownClassName → classNames.popup.root. [1]
- popupClassName (old alias) → classNames.popup.root. [1]
- dropdownStyle / popupStyle → styles.popup.root. [1]
- dropdownRender → popupRender. [1]
- onDropdownVisibleChange → onOpenChange (unified “open” naming). [1][2]
- dropdownMatchSelectWidth → popupMatchSelectWidth. [1]
- dropdownMatchSelectWidth behavior/name consolidated under popup* APIs. [1]
- showArrow: no longer a dedicated prop (arrow hidden by default; use suffixIcon to control). [1]
- bordered → variant (global/consistent naming across components). [1]
- Structural Option children (e.g., <Select.Option />) are moving toward data-driven APIs in the roadmap—prefer passing options via the options prop for better future compatibility. [2]
Migration notes:
- New names follow a unified “popup” / “open” / styles/classNames token pattern; update usages accordingly and prefer the styles/classNames shape (e.g., classNames.popup.root) instead of the old dropdown* props. [1]
- If you rely on showArrow/bordered, replace with suffixIcon={...} or variant respectively. [1]
- Test behavior around filtering and custom dropdown rendering after switching to popupRender and onOpenChange; existing handlers should be straightforward to rename but verify runtime behavior. [1][2]
Sources:
- Deprecation / prop-mapping notes for Select (deprecated dropdown*/popup* → classNames/styles/popupRender/onOpenChange/popupMatchSelectWidth, bordered→variant, showArrow change). [1]
- Ant Design v6 release announcement / migration guidance (unified open naming, v6 release notes). [2]
References:
[1] DeepWiki — Ant Design data-entry & selection components (deprecated API mapping).
[2] ant-design GitHub — “Ant Design 6.0 is Here!” release/announcement.
🏁 Script executed:
# Check the actual Ant Design version in the project
cat package.json | grep -A2 -B2 "antd"Repository: scalableminds/webknossos
Length of output: 213
Remove the @ts-expect-error and use optional chaining for type safety.
The showSearch object syntax is valid for Ant Design v6, but the @ts-expect-error on line 48 suppresses a legitimate TypeScript warning. Replace it with optional chaining:
showSearch={{
optionFilterProp: "label",
filterOption: (input, option) =>
- // @ts-expect-error ts-migrate (2532) FIXME: Object is possibly 'undefined'.
- option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+ option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
}}This follows Ant Design v6 best practices and eliminates the type suppression.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In frontend/javascripts/admin/user/user_selection_component.tsx around lines 45
to 50, remove the inline @ts-expect-error and make the filterOption type-safe by
using optional chaining and a safe boolean fallback: access option?.label and
call toLowerCase on it only when present, compare against input.toLowerCase(),
and return false when label is undefined; update the expression accordingly and
delete the @ts-expect-error comment.
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx
Outdated
Show resolved
Hide resolved
| type GetRef, | ||
| type MenuProps, | ||
| Modal, | ||
| Popover, | ||
| Select, | ||
| type Tree, |
There was a problem hiding this comment.
Potential TypeScript error: typeof requires value import, not type-only import.
Line 35 imports Tree as a type-only import using the type keyword, but line 423 uses typeof Tree which requires Tree to be available as a value at runtime. TypeScript's typeof operator cannot be used with type-only imports.
Apply this diff to fix the import:
Button,
ConfigProvider,
Divider,
Empty,
type GetRef,
type MenuProps,
Modal,
Popover,
Select,
- type Tree,
+ Tree,
type TreeProps,
} from "antd";Alternatively, if you want to avoid potential naming conflicts with the local Tree type from tree_types.ts, import with an alias:
Button,
ConfigProvider,
Divider,
Empty,
type GetRef,
type MenuProps,
Modal,
Popover,
Select,
- type Tree,
+ Tree as AntdTree,
type TreeProps,
} from "antd";And then update line 423:
- tree: React.RefObject<GetRef<typeof Tree>>;
+ tree: React.RefObject<GetRef<typeof AntdTree>>;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| type GetRef, | |
| type MenuProps, | |
| Modal, | |
| Popover, | |
| Select, | |
| type Tree, | |
| type GetRef, | |
| type MenuProps, | |
| Modal, | |
| Popover, | |
| Select, | |
| Tree, |
| menu: null, | ||
| }; | ||
| tree: React.RefObject<RcTree>; | ||
| tree: React.RefObject<GetRef<typeof Tree>>; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find frontend -name "*scrollable*" -o -name "*virtualized*" | grep -i treeRepository: scalableminds/webknossos
Length of output: 150
🏁 Script executed:
fd -t f "scrollable.*tree" frontendRepository: scalableminds/webknossos
Length of output: 150
🏁 Script executed:
rg -l "ScrollableVirtualizedTree" frontend --type tsx --type tsRepository: scalableminds/webknossos
Length of output: 95
🏁 Script executed:
cat -n frontend/javascripts/viewer/view/right-border-tabs/scrollable_virtualized_tree.tsx | head -100Repository: scalableminds/webknossos
Length of output: 3365
🏁 Script executed:
rg -A 5 "React.forwardRef|forwardRef" frontend/javascripts/viewer/view/right-border-tabs/scrollable_virtualized_tree.tsxRepository: scalableminds/webknossos
Length of output: 820
🏁 Script executed:
head -50 frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx | grep -E "import|from"Repository: scalableminds/webknossos
Length of output: 872
🏁 Script executed:
sed -n '1,50p' frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx | rg "Tree|GetRef"Repository: scalableminds/webknossos
Length of output: 113
🏁 Script executed:
sed -n '1940,1950p' frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsxRepository: scalableminds/webknossos
Length of output: 673
Change ref type from React.RefObject to React.Ref for compatibility with ScrollableVirtualizedTree.
The ref at line 423 is typed as React.RefObject<GetRef<typeof Tree>>, but ScrollableVirtualizedTree's forwardRef signature expects React.Ref<GetRef<typeof AntdTree>>. Since React.RefObject is more restrictive than React.Ref (which includes callback refs), update the type to React.Ref<GetRef<typeof Tree>> to match the component's ref contract and avoid TypeScript compatibility issues when passing the ref at line 1945.
🤖 Prompt for AI Agents
In
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx
around line 423, the ref is currently typed as React.RefObject<GetRef<typeof
Tree>> which is too restrictive for ScrollableVirtualizedTree's forwardRef;
change the declaration to React.Ref<GetRef<typeof Tree>> so it accepts callback
refs as well as object refs, and update any local usages that assume .current
(narrow to handle callback refs or cast where necessary) so TypeScript no longer
complains when passing this ref at line 1945.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/javascripts/admin/voxelytics/task_list_view.tsx(4 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T13:41:44.912Z
Learning: In Ant Design v6, the Alert component's `message` prop has been deprecated and replaced by `title`. When migrating from v5 to v6, Alert components should use `title` for the main content (and optionally `description` for additional details).
🧬 Code graph analysis (1)
frontend/javascripts/admin/voxelytics/task_list_view.tsx (1)
frontend/javascripts/libs/window.ts (1)
location(60-60)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build-smoketest-push
- GitHub Check: frontend-tests
🔇 Additional comments (4)
frontend/javascripts/admin/voxelytics/task_list_view.tsx (4)
5-5: LGTM! Import additions align with Antd v6 migration.The new imports (
DownOutlined,Flex,Space) are properly added to support the updated header layout and dropdown functionality.Also applies to: 20-20, 25-25
352-356: LGTM! Notification API correctly migrated to Antd v6.The error notification properly uses
titleanddescriptionprops, which aligns with Antd v6's API changes. Based on learnings, themessageprop was deprecated in favor oftitle.
709-716: LGTM! Space.Compact and Dropdown integration is well-structured.The use of
Space.Compactto group the "Collapse All" button with an overflow dropdown menu is a clean pattern that aligns with Antd v6 best practices.
690-700: Remove the nestedrootkey understyles.popup.The
stylesprop structure in Ant Design v6 maps keys directly to style objects. For the popup, usestyles.popupwith direct style properties, notstyles.popup.root. The current nestedrootkey will prevent themaxWidthfrom being applied to the popup.Apply this diff:
styles={{ root: { maxWidth: 200, }, popup: { - root: { - maxWidth: "90vw", - }, + maxWidth: "90vw", }, }}Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx (1)
30-38: Fix type-onlyTreeimport when usingtypeofin ref typingLine 425 uses
GetRef<typeof Tree>, butTreeis imported withimport type, so there is no value symbol fortypeofto reference and TypeScript will complain. ImportTreeas a value (optionally under an alias) and use that in theGetRefexpression.Apply this diff:
-import { - Button, - ConfigProvider, - Divider, - Empty, - type GetRef, - type MenuProps, - Modal, - Popover, - Select, - Space, - type Tree, - type TreeProps, - Typography, -} from "antd"; +import { + Button, + ConfigProvider, + Divider, + Empty, + type GetRef, + type MenuProps, + Modal, + Popover, + Select, + Space, + Tree as AntdTree, + type TreeProps, + Typography, +} from "antd"; @@ - tree: React.RefObject<GetRef<typeof Tree>>; + tree: React.RefObject<GetRef<typeof AntdTree>>;Afterward, please re-run
tscto verify there are no remainingtypeof Treeusages tied to type-only imports in this file.Also applies to: 425-425
🧹 Nitpick comments (2)
frontend/javascripts/dashboard/dataset_view.tsx (2)
2-2: Antd v6 imports and menu typing look good, with a small optional cleanupUsing
DownOutlinedandtype MenuPropsfromantdis aligned with the v6 Dropdown/Menu patterns. If you want to avoid the deepItemTypeimport, you could instead type items viaconst refreshMenuItems: MenuProps["items"] = [...]and drop theItemTypeimport, but that’s purely cosmetic.Also applies to: 22-22
316-327: NewDatasetRefreshButtoncomposition is sound; consider explicit click trigger for DropdownThe split primary Refresh button plus adjacent Dropdown (with
menu={{ onClick: () => context.checkDatasets(organizationId), items: refreshMenuItems }}) looks correct for Antd v6 and keeps behavior clear. One thing to double‑check:Dropdownnow uses its defaulttrigger(hover). If you want to preserve a “click the arrow to open menu” behavior similar toDropdown.Button, you may want to addtrigger={['click']}to theDropdown.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
frontend/javascripts/dashboard/dashboard_task_list_view.tsx(4 hunks)frontend/javascripts/dashboard/dataset_view.tsx(6 hunks)frontend/javascripts/dashboard/explorative_annotations_view.tsx(5 hunks)frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx(7 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/javascripts/dashboard/explorative_annotations_view.tsx
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T14:12:26.474Z
Learning: For Ant Design v6 component API documentation and migration guidance, use https://ant.design/llms-full.txt as the authoritative source. This llms-full.txt file contains the official v6 component APIs, including deprecated props and their replacements.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T13:41:44.912Z
Learning: In Ant Design v6, the Alert component's `message` prop has been deprecated and replaced by `title`. When migrating from v5 to v6, Alert components should use `title` for the main content (and optionally `description` for additional details).
📚 Learning: 2025-09-08T13:33:47.097Z
Learnt from: MichaelBuessemeyer
Repo: scalableminds/webknossos PR: 8824
File: frontend/javascripts/viewer/view/context_menu.tsx:1033-1039
Timestamp: 2025-09-08T13:33:47.097Z
Learning: In frontend/javascripts/viewer/view/context_menu.tsx, the segmentIdLabel intentionally shows the unmapped segment ID (maybeUnmappedSegmentId) in the "within Segment ${id}" text when proofreading is active, as this can be helpful for users. The mapped segment ID (segmentIdAtPosition) is only used as a fallback when the unmapped ID is not available.
Applied to files:
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx
📚 Learning: 2025-11-03T17:50:57.587Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 9025
File: frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx:10-10
Timestamp: 2025-11-03T17:50:57.587Z
Learning: In the webknossos codebase, both `import { Component } from "antd";` and `import { Component } from "antd/lib";` are valid import paths for antd components. Do not flag imports from "antd/lib" as errors.
Applied to files:
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx
📚 Learning: 2025-02-05T20:16:45.712Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 8321
File: frontend/javascripts/components/slider.tsx:0-0
Timestamp: 2025-02-05T20:16:45.712Z
Learning: When tracking focus state that needs to be accessed by native event listeners (e.g., wheel events), use `useRef` instead of `useState` to ensure the event handlers always have access to the current value. This is because event listeners added via `addEventListener` would capture the initial state value if `useState` were used.
Applied to files:
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx
📚 Learning: 2024-12-16T15:48:37.065Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 8266
File: frontend/javascripts/components/mag_selection.tsx:51-60
Timestamp: 2024-12-16T15:48:37.065Z
Learning: In the `MagSelection` component (`frontend/javascripts/components/mag_selection.tsx`), the selected magnification `value` will always be present in `allMags` because only existing values can be selected by the user.
Applied to files:
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx
📚 Learning: 2025-12-04T13:41:44.912Z
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T13:41:44.912Z
Learning: In Ant Design v6, the Alert component's `message` prop has been deprecated and replaced by `title`. When migrating from v5 to v6, Alert components should use `title` for the main content (and optionally `description` for additional details).
Applied to files:
frontend/javascripts/dashboard/dataset_view.tsx
🧬 Code graph analysis (1)
frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx (2)
frontend/javascripts/viewer/model/types/tree_types.ts (1)
Tree(61-75)frontend/javascripts/viewer/view/right-border-tabs/advanced_search_popover.tsx (1)
AdvancedSearchPopover(27-254)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build-smoketest-push
- GitHub Check: frontend-tests
- GitHub Check: backend-tests
🔇 Additional comments (8)
frontend/javascripts/dashboard/dataset_view.tsx (2)
241-265: WrappingadminHeaderactions inSpaceis a good layout modernizationReplacing the old pull-right + margins layout with
<Space>keeps the actions grouped and simplifies spacing, and should play nicely with other Antd v6 Space‑based toolbars.
490-500: Alert migration totitle/descriptionmatches the Antd v6 APISwitching
NewJobsAlertto usetitle={newJobsHeader}withdescription={newJobsList}is the right v6 replacement for the oldmessageprop and keeps the visual structure unchanged aside from v6 styling. Based on learnings about the Antd v6 Alert API.frontend/javascripts/dashboard/dashboard_task_list_view.tsx (3)
239-275: Space orientation migration inrenderActionsmatches AntD v6 APISwitching from the deprecated
directionprop toorientation="vertical"onSpaceis aligned with the v6 API and should preserve the previous vertical stacking semantics withsize={1}. (ant.design)Please just double-check in the UI that the vertical spacing and alignment of the action links/buttons still look as intended, especially within the constrained column in the finished/unfinished task cards.
372-409: Cardvariant="borderless"is the correct replacement forbordered={false}Using
variant="borderless"on the placeholderCardis the recommended v6 way to express a borderless card and replaces the deprecatedborderedprop one-to-one. (ant.design)Visually confirm that the placeholder card still appears borderless and doesn’t pick up any unexpected default border styling under the new theme.
569-581: TopBar actions wrapped inSpace—layout change looks fine, verify alignmentWrapping “Get a New Task” and “Show {getFinishVerb()} Tasks Only” in
<Space>is consistent with the v6 layout patterns and should give you a clean horizontal grouping. Based on learnings, AntD recommends Space/Flex for these control clusters. (ant.design)Since the previous
divusedpull-right, please verify in the actual dashboard header that the portal content is still right‑aligned as desired; if not, you may need a small wrapper style or Flex alignment tweak around thisSpace.frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx (3)
903-917: Ad‑hoc mesh settings tooltip & Select config look goodWrapping the explanatory copy in a typography paragraph and disabling
popupMatchSelectWidthon the Select keeps the UI readable without changing behavior.If not done yet, quickly test this popover on narrow viewports to confirm the dropdown width still behaves as intended.
996-1056: Meshes header grouped withSpacekeeps behavior while simplifying layoutUsing a
Spacecontainer to align the mesh file Select, refresh, add, progress, and settings controls is a clean layout refactor; event handlers and logic are preserved.Please sanity‑check the clickable regions for the reload and plus icons in the browser to ensure they still feel large enough and are easy to hit.
1862-1880: Search toolbar layout & icon usage remain consistentThe
Spacewrapper nicely aligns the search trigger and meshes header, and switchingButtonComponentto use itsiconprop is consistent with typical button usage; no behavioral issues spotted.Worth a quick UI pass to confirm the toolbar doesn’t wrap awkwardly at smaller panel widths.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx (1)
124-178: Layout-actions group looks good; consider dropdown-close behavior and accessibilityThe new
layout-actionsgroup with aFlexrow of icon-only text Buttons is a nice consolidation and the move from a broad container handler to scopedonClick={(e) => { e.stopPropagation(); ... }}on each Button avoids the previous keyboard-event issues in the label.Two follow-ups worth considering:
Dropdown close behavior
Because each handler callse.stopPropagation(), these clicks will not trigger the Menu’s ownonClicklogic (including any automatic dropdown close). If the intended UX is to keep the menu open after actions like “Reset Layout” or “Save current layout”, this is perfect; otherwise, you may want to explicitly close the parent dropdown after certain actions.Accessible names for icon-only Buttons
The Add / Reset / Auto-save toggle / Save controls are currently icon-only. For better screen-reader support, consider addingaria-label(or similar) to each Button, e.g.aria-label="Add layout",aria-label="Reset layout", etc., matching the Tooltip text. This keeps the UI visually compact while making the actions self-describing to assistive tech.Based on learnings, this aligns with the project’s Antd v6 migration approach; the suggestions are primarily about UX and a11y polish.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/javascripts/admin/voxelytics/task_list_view.tsx(4 hunks)frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T14:12:26.474Z
Learning: For Ant Design v6 component API documentation and migration guidance, use https://ant.design/llms-full.txt as the authoritative source. This llms-full.txt file contains the official v6 component APIs, including deprecated props and their replacements.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T13:41:44.912Z
Learning: In Ant Design v6, the Alert component's `message` prop has been deprecated and replaced by `title`. When migrating from v5 to v6, Alert components should use `title` for the main content (and optionally `description` for additional details).
📚 Learning: 2025-09-04T10:01:56.727Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 8895
File: frontend/javascripts/viewer/view/action_bar_view.tsx:0-0
Timestamp: 2025-09-04T10:01:56.727Z
Learning: In frontend/javascripts/viewer/view/action_bar_view.tsx, knollengewaechs prefers not to use onKeyUpCapture for preventing modal close on modifier keys because: 1) holding ctrl while opening modal will still close on keyup, 2) normal case of opening modal then pressing ctrl doesn't cause issues with just onKeyDownCapture.
Applied to files:
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx
🧬 Code graph analysis (1)
frontend/javascripts/admin/voxelytics/task_list_view.tsx (1)
frontend/javascripts/libs/window.ts (1)
location(60-60)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: backend-tests
- GitHub Check: build-smoketest-push
- GitHub Check: frontend-tests
🔇 Additional comments (2)
frontend/javascripts/admin/voxelytics/task_list_view.tsx (1)
5-5: LGTM!The new imports (
DownOutlined,Flex,Space) are necessary for the Antd v6 layout refactoring and are correctly used throughout the file.Also applies to: 20-20, 25-25
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx (1)
12-12: Import additions are consistent with usageThe added
Button,Flex,Space, andTooltipimports are all used below and look correct for this component; no changes needed here.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
frontend/javascripts/admin/statistic/time_tracking_overview.tsx (1)
295-318: Critical issue from previous review remains unresolved: rowKey extracts object.The
rowKey="user"at line 297 still extracts the entire user object as the row key, which causes all rows to have identical"[object Object]"keys and breaks expand/collapse functionality in FixedExpandableTable.As noted in the previous review, this should be changed to use a scalar key:
- rowKey="user" + rowKey={(entry) => entry.user.id}
🧹 Nitpick comments (1)
frontend/javascripts/admin/statistic/project_progress_report_view.tsx (1)
74-91: Header refactor looks good; consider minor polish.The migration to Flex/Space with Button-wrapped icons follows the Antd v6 pattern correctly. The logic and handlers are preserved as expected.
Two optional improvements:
Line 77: The trailing space string
" "after the FormattedDate conditional is unnecessary—the Space component already handles spacing between its children.Lines 78-89: The circular icon buttons lack
aria-labelattributes, which would help screen reader users understand their purpose.Apply this diff to address both suggestions:
<Space> - {updatedAt != null ? <FormattedDate timestamp={updatedAt} /> : null}{" "} + {updatedAt != null ? <FormattedDate timestamp={updatedAt} /> : null} <Button icon={<SettingOutlined />} shape="circle" variant="outlined" onClick={handleOpenSettings} + aria-label="Open settings" /> <Button icon={<ReloadOutlined />} shape="circle" variant="outlined" onClick={handleReload} + aria-label="Reload data" /> </Space>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
frontend/javascripts/admin/job/job_list_view.tsx(0 hunks)frontend/javascripts/admin/statistic/project_and_annotation_type_dropdown.tsx(2 hunks)frontend/javascripts/admin/statistic/project_progress_report_view.tsx(2 hunks)frontend/javascripts/admin/statistic/time_tracking_overview.tsx(3 hunks)
💤 Files with no reviewable changes (1)
- frontend/javascripts/admin/job/job_list_view.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/javascripts/admin/statistic/project_and_annotation_type_dropdown.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T14:12:26.474Z
Learning: For Ant Design v6 component API documentation and migration guidance, use https://ant.design/llms-full.txt as the authoritative source. This llms-full.txt file contains the official v6 component APIs, including deprecated props and their replacements.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/admin/voxelytics/task_list_view.tsx:691-700
Timestamp: 2025-12-08T09:02:43.441Z
Learning: In Ant Design v6, Select (and similar components like AutoComplete, Cascader, TreeSelect) use a nested semantic DOM structure for styles and classNames. The correct pattern is `styles={{ popup: { root: { ... } } }}` or `classNames={{ popup: { root: "..." } }}`, NOT a flat structure. This is the official v6 API for targeting semantic parts of these components.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T13:41:44.912Z
Learning: In Ant Design v6, the Alert component's `message` prop has been deprecated and replaced by `title`. When migrating from v5 to v6, Alert components should use `title` for the main content (and optionally `description` for additional details).
🧬 Code graph analysis (2)
frontend/javascripts/admin/statistic/project_progress_report_view.tsx (1)
frontend/javascripts/components/formatted_date.tsx (1)
FormattedDate(19-42)
frontend/javascripts/admin/statistic/time_tracking_overview.tsx (1)
frontend/javascripts/libs/format_utils.ts (1)
formatMilliseconds(417-419)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build-smoketest-push
- GitHub Check: backend-tests
- GitHub Check: frontend-tests
🔇 Additional comments (1)
frontend/javascripts/admin/statistic/project_progress_report_view.tsx (1)
3-3: LGTM: Import updates support the layout refactor.The addition of Button, Flex, and Space aligns with the Antd v6 migration pattern used throughout this PR.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
frontend/javascripts/viewer/view/action-bar/save_actions.tsx (1)
4-4: Consistent use ofSpace.Compactfor action groups; verify nested layout visuallyImporting
Spaceand wrapping the various action clusters (read-only, sandbox, and save/undo-redo) inSpace.Compactis consistent with Antd’s compact-mode usage and should improve visual grouping without changing logic. Given the nesting (compact aroundUndoRedoActions, and again aroundUndoRedoActions+SandboxActions/SaveButton), please verify in the app that:
- Button groups render with the expected spacing and border-radius (no double gaps between clusters).
- Disabled/read-only states and
hide-on-small-screenspans still behave as intended on small breakpoints.If everything looks good in the main viewer scenarios, the changes are fine to keep as-is.
Also applies to: 44-65, 112-133, 157-161, 165-169
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx (1)
124-178: Improve i18n and accessibility for the new icon-only layout action buttonsThe new layout-actions group is a nice consolidation and the event handling with
e.stopPropagation()is appropriate in this menu context. Two follow-ups would make this more robust:
- i18n: Tooltip texts are hard-coded English strings while the rest of the menu already uses
messages. Consider moving these to the message catalog for consistency.- Accessibility: These are icon-only buttons. While the icons provide some label, adding explicit accessible names and reusing the same strings as the tooltips makes the intent clearer to screen readers.
Example refactor (using placeholder message keys you can adapt):
- <Tooltip title="Add a new Layout"> + <Tooltip title={messages["layouting.add_layout"]}> <Button type="text" icon={<PlusOutlined />} + aria-label={messages["layouting.add_layout"]} onClick={(e) => { e.stopPropagation(); addNewLayout(); }} /> </Tooltip> - <Tooltip title="Reset Layout"> + <Tooltip title={messages["layouting.reset_layout"]}> <Button type="text" icon={<RollbackOutlined />} + aria-label={messages["layouting.reset_layout"]} onClick={(e) => { e.stopPropagation(); onResetLayout(); }} /> </Tooltip> - <Tooltip - title={`${autoSaveLayouts ? "Disable" : "Enable"} auto-saving of current layout`} - > + <Tooltip + title={ + autoSaveLayouts + ? messages["layouting.disable_auto_save"] + : messages["layouting.enable_auto_save"] + } + > <Button type="text" icon={autoSaveLayouts ? <DisconnectOutlined /> : <LinkOutlined />} + aria-label={ + autoSaveLayouts + ? messages["layouting.disable_auto_save"] + : messages["layouting.enable_auto_save"] + } onClick={(e) => { e.stopPropagation(); setAutoSaveLayouts(!autoSaveLayouts); }} /> </Tooltip> {!autoSaveLayouts && ( - <Tooltip title="Save current layout"> + <Tooltip title={messages["layouting.save_current_layout"]}> <Button type="text" icon={<SaveOutlined />} + aria-label={messages["layouting.save_current_layout"]} onClick={(e) => { e.stopPropagation(); saveCurrentLayout(); }} /> </Tooltip> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
frontend/javascripts/viewer/view/action-bar/save_actions.tsx(6 hunks)frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx(3 hunks)frontend/javascripts/viewer/view/action-bar/undo_redo_actions.tsx(3 hunks)frontend/javascripts/viewer/view/action-bar/view_dataset_actions_view.tsx(1 hunks)frontend/stylesheets/trace_view/_tracing_view.less(15 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T14:12:26.474Z
Learning: For Ant Design v6 component API documentation and migration guidance, use https://ant.design/llms-full.txt as the authoritative source. This llms-full.txt file contains the official v6 component APIs, including deprecated props and their replacements.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/admin/voxelytics/task_list_view.tsx:691-700
Timestamp: 2025-12-08T09:02:43.441Z
Learning: In Ant Design v6, Select (and similar components like AutoComplete, Cascader, TreeSelect) use a nested semantic DOM structure for styles and classNames. The correct pattern is `styles={{ popup: { root: { ... } } }}` or `classNames={{ popup: { root: "..." } }}`, NOT a flat structure. This is the official v6 API for targeting semantic parts of these components.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T13:41:44.912Z
Learning: In Ant Design v6, the Alert component's `message` prop has been deprecated and replaced by `title`. When migrating from v5 to v6, Alert components should use `title` for the main content (and optionally `description` for additional details).
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 8849
File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51
Timestamp: 2025-08-14T14:12:03.293Z
Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", etc.), allowing individual form items to override the parent Form's layout setting. This is a newer API addition that provides more granular control over form item layouts.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 8849
File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51
Timestamp: 2025-08-14T14:12:03.293Z
Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", layout="inline"), allowing individual form items to override the parent Form's layout setting. This enables mixed layouts within a single form and was added as a new API feature in v5.18 according to the official changelog.
📚 Learning: 2025-10-21T10:54:16.468Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 8961
File: frontend/javascripts/viewer/model/actions/annotation_actions.ts:80-82
Timestamp: 2025-10-21T10:54:16.468Z
Learning: In frontend/javascripts/viewer/model/actions/annotation_actions.ts, the ShowManyBucketUpdatesWarningAction is intentionally not included in the AnnotationActionTypes union because it's a UI-only action that doesn't modify the annotation state through reducers.
Applied to files:
frontend/javascripts/viewer/view/action-bar/save_actions.tsxfrontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsxfrontend/javascripts/viewer/view/action-bar/undo_redo_actions.tsx
📚 Learning: 2025-09-04T10:01:56.727Z
Learnt from: knollengewaechs
Repo: scalableminds/webknossos PR: 8895
File: frontend/javascripts/viewer/view/action_bar_view.tsx:0-0
Timestamp: 2025-09-04T10:01:56.727Z
Learning: In frontend/javascripts/viewer/view/action_bar_view.tsx, knollengewaechs prefers not to use onKeyUpCapture for preventing modal close on modifier keys because: 1) holding ctrl while opening modal will still close on keyup, 2) normal case of opening modal then pressing ctrl doesn't cause issues with just onKeyDownCapture.
Applied to files:
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsxfrontend/javascripts/viewer/view/action-bar/undo_redo_actions.tsx
📚 Learning: 2025-12-08T09:02:43.441Z
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/admin/voxelytics/task_list_view.tsx:691-700
Timestamp: 2025-12-08T09:02:43.441Z
Learning: In Ant Design v6, Select (and similar components like AutoComplete, Cascader, TreeSelect) use a nested semantic DOM structure for styles and classNames. The correct pattern is `styles={{ popup: { root: { ... } } }}` or `classNames={{ popup: { root: "..." } }}`, NOT a flat structure. This is the official v6 API for targeting semantic parts of these components.
Applied to files:
frontend/stylesheets/trace_view/_tracing_view.less
🧬 Code graph analysis (1)
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx (2)
frontend/javascripts/viewer/view/layouting/layout_persistence.ts (1)
addNewLayout(164-186)frontend/javascripts/viewer/view/layouting/tracing_layout_view.tsx (1)
setAutoSaveLayouts(435-437)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build-smoketest-push
- GitHub Check: backend-tests
- GitHub Check: frontend-tests
🔇 Additional comments (7)
frontend/javascripts/viewer/view/action-bar/view_dataset_actions_view.tsx (1)
99-115: Margin removal on outer wrapper looks fine; just double-check toolbar alignmentDropping the hard-coded left margin on the outer
<div>simplifies layout and fits the “less ad-hoc spacing” goal. This should be safe as long as the parent container now provides the desired spacing; a quick visual check of the action bar to confirm horizontal alignment with neighboring controls is enough here.frontend/stylesheets/trace_view/_tracing_view.less (3)
380-380: CSS selector formatting change—no functional impact.The space removal in
.ant-select>.ant-select-selector(and similar changes at lines 72, 182, 256) is purely stylistic. CSS treats.ant-select > .ant-select-selectorand.ant-select>.ant-select-selectoridentically, so specificity and selector behavior are unchanged. This is safe.
384-389: Verify upgrade banner button styling is intentional for Antd v6.The additions of
display: flex; align-items: center;to.upgrade-banner-buttonappear intentional for Antd v6 layout alignment. Ensure this styling does not conflict with any parent or sibling button styles and renders correctly across all supported browsers.
72-72: No action required—Alert selector structure is correct for Ant Design v6.The nested selector pattern at lines 443–449 (
.ant-alert-close-icon→.anticonand.anticon-close) correctly targets the close button icon in Ant Design v6's Alert component. The child combinator spacing changes (lines 72, 256, 380) are purely stylistic with no functional impact.frontend/javascripts/viewer/view/action-bar/undo_redo_actions.tsx (1)
1-1: Use ofSpace.Compactfor grouped undo/redo buttons looks correctImport and usage of
Space.Compactmatch the Antd API for compact button groups; behavior and handlers are unchanged. Please just double-check in the viewer that the extra wrapper doesn’t interfere with any existing CSS targeting.undo-redo-button(spacing, alignment, or hover styles).Also applies to: 20-21, 31-41
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx (2)
12-12: Import changes align with new layout-actions usageAdding
ButtonandFlexhere matches their usage in the new layout actions group below; nothing else to adjust.
201-202: Placement of SaveActions and TaskCompletionActions looks goodRendering
<SaveActions />and<TaskCompletionActions />at the top ofTracingActionsViewis straightforward and consistent with the rest of the component; no issues spotted here.
|
Testing went fine! I tested mostly in dark-mode and mostly on chromium and mozilla. The only thing that I dont remember being mentioned before is that the highlighting of buttons in annotation/DS view is not surrounding the whole button, only the outer margins (see slack). |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/javascripts/admin/task/task_search_form.tsx(5 hunks)frontend/javascripts/viewer/view/action_bar_view.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/javascripts/viewer/view/action_bar_view.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T14:12:26.493Z
Learning: For Ant Design v6 component API documentation and migration guidance, use https://ant.design/llms-full.txt as the authoritative source. This llms-full.txt file contains the official v6 component APIs, including deprecated props and their replacements.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/admin/voxelytics/task_list_view.tsx:691-700
Timestamp: 2025-12-08T09:02:43.473Z
Learning: In Ant Design v6, Select (and similar components like AutoComplete, Cascader, TreeSelect) use a nested semantic DOM structure for styles and classNames. The correct pattern is `styles={{ popup: { root: { ... } } }}` or `classNames={{ popup: { root: "..." } }}`, NOT a flat structure. This is the official v6 API for targeting semantic parts of these components.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 9117
File: frontend/javascripts/viewer/view/nml_upload_zone_container.tsx:186-186
Timestamp: 2025-12-04T13:41:44.919Z
Learning: In Ant Design v6, the Alert component's `message` prop has been deprecated and replaced by `title`. When migrating from v5 to v6, Alert components should use `title` for the main content (and optionally `description` for additional details).
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 8849
File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51
Timestamp: 2025-08-14T14:12:03.293Z
Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", etc.), allowing individual form items to override the parent Form's layout setting. This is a newer API addition that provides more granular control over form item layouts.
Learnt from: hotzenklotz
Repo: scalableminds/webknossos PR: 8849
File: frontend/javascripts/viewer/view/action-bar/ai_job_modals/components/collapsible_split_merger_evaluation_settings.tsx:39-51
Timestamp: 2025-08-14T14:12:03.293Z
Learning: Since Ant Design version 5.18, Form.Item components support the layout prop (layout="horizontal", layout="vertical", layout="inline"), allowing individual form items to override the parent Form's layout setting. This enables mixed layouts within a single form and was added as a new API feature in v5.18 according to the official changelog.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build-smoketest-push
- GitHub Check: backend-tests
- GitHub Check: frontend-tests
🔇 Additional comments (2)
frontend/javascripts/admin/task/task_search_form.tsx (2)
4-4: LGTM!The Flex component import is correctly added to support the new button layout.
206-240: TheiconPlacement="end"prop is valid in Ant Design v6, but the Dropdown menu pattern may bypass form validation.
iconPlacement="end"is correct: Ant Design v6 renamediconPositiontoiconPlacement, which accepts"start" | "end"for logical positioning. This is valid.Dropdown menu onClick bypasses form submission: The Dropdown menu handler calls
handleSearchFormFinish(true)directly, while the normal Search button useshtmlType="submit"to trigger the Form'sonFinish. This inconsistency means the random search may skip form validation. Consider ensuring both paths go through the same validation/submission flow.
| onFormValueChange = (changedValues: UploadFormFieldTypes) => { | ||
| onFormValueChange = ( | ||
| changedValues: Partial<UploadFormFieldTypes>, | ||
| _allValues: UploadFormFieldTypes, |
There was a problem hiding this comment.
why did you add _allValues as a parameter?
There was a problem hiding this comment.
There is no reason. The LLM decide to do that. I can remove it.
|
|
||
| const onValuesChange = useCallback( | ||
| (_changedValues: DatasetSettingsFormData, _allValues: DatasetSettingsFormData) => { | ||
| (_changedValues: Partial<DatasetSettingsFormData>, _allValues: DatasetSettingsFormData) => { |
There was a problem hiding this comment.
as above; why cant there parameters be removed if they are not used?
knollengewaechs
left a comment
knollengewaechs
left a comment
There was a problem hiding this comment.
looks good to me! 🎉
This PR update Antd from version 5 to v6. For the most part everything just works. I followed the official migration guide and fixed all deprecation warnings that I encountered.
High level overview:
antdto version6.1.0@ant-design/iconsand@ant-design/colorsto match<Alert message={...}>--><Alert title={...}><Space>or<Flex>for more uniform layouting instead of our wild mix of margin, paddings, custom stuff...Dev Instance
https://antdv6.webknossos.xyz/
Steps to test:
TODOs:
Follow Ups
<Tag>close button in dark mode <Tag> with custom colors have low contrast close icons in dark mode ant-design/ant-design#56258<List>component is deprecated but the new replacement is not yet ready but still under development.Issues:
(Please delete unneeded items, merge only when none are left open)
$PR_NUMBER.mdfile inunreleased_changesor use./tools/create-changelog-entry.py)