WIP Upgrade to Antd v6 #9117
WIP Upgrade to Antd v6 #9117
Conversation
📝 WalkthroughWalkthroughBulk frontend migration to Ant Design v6: renamed component props (Card, Space, Alert/notification/toast), Select search config switched to object form, Dropdown/Popover/Tree API and ref typings updated, several handler/type signatures tightened, ButtonComponent converted to forwardRef, and package.json dependency bumps. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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.
|
@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.
| <Space.Compact> | ||
| <Button>{themeItems.find((item) => item.key === selectedTheme)?.label}</Button> | ||
| <Dropdown menu={{ items: themeItems }} trigger={["click"]}> | ||
| <Button icon={<DownOutlined />} /> | ||
| </Dropdown> | ||
| </Space.Compact> |
There was a problem hiding this comment.
❓ Verification inconclusive
Ant Design v6 migration Dropdown.Button replacement pattern recommended
Short answer: AntD v6 removes Dropdown.Button; the recommended replacement pattern is to compose a Dropdown + Button inside Space.Compact (i.e., Space.Compact + Dropdown + Button). [1][2][3]
Example pattern (conceptual):
- Wrap the primary Button and the Dropdown trigger in Space.Compact.
- Use Dropdown (menu prop) for the menu and a Button for the left action.
Sources:
- Ant Design v6 tasks / deprecations (Dropdown.Button removed — use Space.Compact + Dropdown + Button). [1]
- Release notes / changelog mentioning removal and replacement. [2]
- Ant Design docs referencing Dropdown/Button usage and v6 migration notes. [3]
References:
[1] GitHub ant-design issue: Ant Design v6 tasks (remove Dropdown.Button).
[2] Release/changelog notes for v6 (rm Dropdown.Button / use Space.Compact).
[3] Ant Design Dropdown docs (usage examples and migration notes).
ARIA labels icon buttons accessibility best practices
Key best practices for accessible icon-only buttons
- Always give the control an accessible name (visible text, aria-labelledby, or aria-label) so screen readers announce its purpose. If no visible label exists, use aria-label or aria-labelledby. (w3.org)
- Prefer visible text when practical. Use aria-label only when the label must be hidden; prefer aria-labelledby when you can reference existing visible text. (developer.mozilla.org)
- Mark purely decorative icons as aria-hidden="true" (and SVG focusable="false") so the icon doesn’t become the accessible name. Provide the name on the button element instead. (developer.mozilla.org)
- Use concise, action-oriented labels (e.g., "Close", "Search", "Download") that describe the button’s function — not its visual appearance. Avoid empty aria-label values. (getwcag.com)
- Don’t rely on title/tooltips alone for the accessible name; tooltips may not be exposed to AT and are not a substitute for an accessible name. (developer.mozilla.org)
- For complex explanations, use aria-describedby (or aria-description) for supplemental info; keep the accessible name short and actionable. (developer.mozilla.org)
- Ensure keyboard focus and a sufficient hit target (recommended ≥44×44 px for touch) and test with screen readers (NVDA/JAWS/VoiceOver) and automated checks to confirm the accessible name appears in the accessibility tree. (getwcag.com)
- Enforce component-level rules in your design system (require a label prop for icon-button components) and include automated tests for non-empty accessible names. (getwcag.com)
If you’d like, I can review specific icon-button code examples and give exact fixes.
Citations:
- 1: https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/?utm_source=openai
- 2: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label?utm_source=openai
- 3: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label?utm_source=openai
- 4: https://getwcag.com/en/accessibility-guide/button-name?utm_source=openai
- 5: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label?utm_source=openai
- 6: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label?utm_source=openai
- 7: https://getwcag.com/en/accessibility-guide/button-name?utm_source=openai
- 8: https://getwcag.com/en/accessibility-guide/button-name?utm_source=openai
Add accessible label to icon-only Button triggering theme dropdown.
The refactor correctly implements the Ant Design v6 migration pattern (Space.Compact + Dropdown + Button replaces the deprecated Dropdown.Button). However, the icon-only Button at line 100 lacks an accessible name, which prevents screen readers from announcing its purpose.
Apply this fix:
- <Button icon={<DownOutlined />} />
+ <Button icon={<DownOutlined />} aria-label="Select theme" />📝 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.
| <Space.Compact> | |
| <Button>{themeItems.find((item) => item.key === selectedTheme)?.label}</Button> | |
| <Dropdown menu={{ items: themeItems }} trigger={["click"]}> | |
| <Button icon={<DownOutlined />} /> | |
| </Dropdown> | |
| </Space.Compact> | |
| <Space.Compact> | |
| <Button>{themeItems.find((item) => item.key === selectedTheme)?.label}</Button> | |
| <Dropdown menu={{ items: themeItems }} trigger={["click"]}> | |
| <Button icon={<DownOutlined />} aria-label="Select theme" /> | |
| </Dropdown> | |
| </Space.Compact> |
🤖 Prompt for AI Agents
In frontend/javascripts/admin/account/account_profile_view.tsx around lines 97
to 102, the icon-only Button used to trigger the theme Dropdown lacks an
accessible name; add an accessible label by supplying a descriptive aria-label
(or aria-labelledby) prop (preferably using the existing i18n/localization
string for "Change theme" or similar) to the icon-only Button so screen readers
announce its purpose; ensure the label is concise and meaningful and retain the
icon and existing click/trigger behavior.
| 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.
| <Col span="6"> | ||
| <Card | ||
| bordered={false} | ||
| variant="borderless" |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Ant Design v6 Card component variant prop borderless API documentation
💡 Result:
Short answer: Ant Design v6 does not add a Card-specific "variant" prop — Card still uses the bordered boolean (bordered={false}) to remove the border. The newer "variant" system in v5+/v6 mainly targets form/input-like components (Input, Select, DatePicker, etc.), where variant values include "outlined" | "borderless" | "filled" | "underlined"; form components can also resolve the legacy bordered prop to the "borderless" variant via the variant resolution logic. See Ant Design Card API (shows bordered prop) and the variant-system documentation/implementation note. [1][2]
Sources
- Ant Design Card API (shows bordered prop, examples of bordered={false}). [1]
- Variant system / useVariant description (explains variants and that deprecated bordered maps to borderless; applies to input components). [2]
🏁 Script executed:
# Search for other Card variant usages in the codebase to cross-reference
rg 'variant\s*=\s*["\']' --type tsx --type ts -A 2 -B 2 | grep -i card | head -30Repository: scalableminds/webknossos
Length of output: 136
🏁 Script executed:
# Check the specific file context around line 488
sed -n '480,495p' frontend/javascripts/dashboard/explorative_annotations_view.tsxRepository: scalableminds/webknossos
Length of output: 561
Remove variant="borderless" from Card — Ant Design v6 Card does not support the variant prop.
Ant Design v6 Card component still uses the bordered prop (not variant). The variant prop system only applies to form/input components like Input, Select, DatePicker, etc. Change variant="borderless" back to bordered={false} to match the v6 Card API.
🤖 Prompt for AI Agents
In frontend/javascripts/dashboard/explorative_annotations_view.tsx around line
488, the Card is using unsupported prop variant="borderless"; remove that prop
and replace it with the Ant Design v6 Card API equivalent bordered={false} so
the Card renders borderless correctly.
| title: toastMessage, | ||
| style: {}, | ||
| className: config.className || "", | ||
| onClose, | ||
| btn: config.customFooter, | ||
| actions: config.customFooter, |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Ant Design v6 notification API properties and migration from v5
💡 Result:
Summary — Notification API in Ant Design v6
Key config properties (same usage as v5):
- message: ReactNode | string — title. [1]
- description: ReactNode | string — content. [1]
- key: string — unique id to update/close. [1]
- duration: number | 0 | null — seconds before auto-close (default 4.5; 0/null = never). [1]
- placement: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'. [1]
- top / bottom: number — distance from viewport edge for top/bottom placements. [1]
- icon: ReactNode — custom icon. [1]
- btn: ReactNode — custom action/close button. [1]
- className / style: string / React.CSSProperties — custom styling. [1]
- getContainer: () => HTMLElement — container mount node (default document.body). [1]
- onClose / onClick: callbacks for close/click. [1]
- closeIcon: ReactNode — custom close icon. [1]
Static methods:
- notification.open(config), .success/.error/.info/.warning/.warn(config), .close(key), .destroy(), and notification.config(globalOptions). [1]
Migration notes from v5 to v6
- v6 is a smooth upgrade from v5 — notification API remains compatible; you can upgrade directly without a compatibility package or codemod. Most notification usage, props and static methods remain unchanged. [2][3]
- Minimum React requirement raised to React 18+ in v6 — ensure your project uses React 18 or newer. [2]
- If you relied on any internal/undocumented behaviors or custom patches for older React versions, review those parts (v6 removed older React compatibility shims). Otherwise no API changes for notification expected. [2][3]
Sources
- Ant Design — Notification component API. [Online docs]. [turn0search4].
- Ant Design v6 release / migration notes. [turn0search1].
- Ant Design migration guide (v5 → v6). [turn0search6].
Revert property name changes; Antd v6 notification API still uses message and btn.
The changes on lines 151 and 155 are incorrect for Antd v6. Official Ant Design v6 documentation confirms the notification API remains backward-compatible with v5, using message (not title) and btn (not actions) as property names. Revert these changes:
- Line 151: Change
titleback tomessage - Line 155: Change
actionsback tobtn
🤖 Prompt for AI Agents
In frontend/javascripts/libs/toast.tsx around lines 151 to 155, the notification
props were renamed to title and actions but Ant Design v6 expects message and
btn; revert title -> message on line 151 and actions -> btn on line 155, keeping
the same values (e.g., message: toastMessage and btn: config.customFooter) so
the notification API remains compatible with Antd v6.
| <Alert | ||
| type="error" | ||
| message={`The volume of the selected bounding box (${volume} vx) is too large. Tiff export is only supported for up to ${ | ||
| title={`The volume of the selected bounding box (${volume} vx) is too large. Tiff export is only supported for up to ${ | ||
| features().exportTiffMaxVolumeMVx | ||
| } Megavoxels.`} | ||
| /> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Ant Design v6 Alert component API documentation title message prop
💡 Result:
In Ant Design v6 the Alert component uses the message prop (not title) for the main content; the description prop is for secondary text. [1][2]
Sources:
[1] Ant Design Alert API (docs) — shows message/description props.
[2] Ant Design Alert examples (docs) — usage examples with message and description.
🏁 Script executed:
cd frontend/javascripts/viewer/view/action-bar && head -n 160 download_modal_view.tsx | tail -n 30Repository: scalableminds/webknossos
Length of output: 1060
🏁 Script executed:
# Search for Alert component usage in the file and surrounding context
rg -n "Alert" frontend/javascripts/viewer/view/action-bar/download_modal_view.tsx -B 2 -A 2Repository: scalableminds/webknossos
Length of output: 987
Alert component is using incorrect prop for Ant Design v6.
The code uses title prop, but Ant Design v6 Alert component requires message prop for the main content. Change title= to message= on lines 140-145 and 148-155.
🤖 Prompt for AI Agents
In frontend/javascripts/viewer/view/action-bar/download_modal_view.tsx around
lines 140-145 and 148-155, the Ant Design v6 Alert uses the wrong prop name;
replace the `title=` prop with `message=` for those Alert components so the main
content displays correctly, ensuring you pass the same string/JSX expression to
`message` (no other logic changes required).
frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx
Outdated
Show resolved
Hide resolved
| {this.props.isUpdateAllowed ? ( | ||
| <Alert | ||
| message="Did you know that you do can just drag-and-drop NML files directly into this view? You don't have to explicitly open this dialog first." | ||
| title="Did you know that you do can just drag-and-drop NML files directly into this view? You don't have to explicitly open this dialog first." |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Ant Design v6 Alert component migration guide message title prop
💡 Result:
In Ant Design v6 the Alert component uses the message prop (and optional description) — there is no title prop. When migrating, replace any Alert title prop with message (and move any subtitle/extra text into description).
Example migration:
- Old:
- New:
References: official Alert docs showing message/description API. [1][2]
Sources
[1] Ant Design v4/v5/v6 Alert docs (API: message, description).
[2] Ant Design Alert examples (message used as title).
Revert Alert prop from title to message — Antd v6 uses message, not title.
The Alert component in Ant Design v6 requires the message prop (with optional description), not title. The current change is incompatible with Antd v6 and will fail to display the content. Change line 186 back to use message="..." instead of title="...".
🤖 Prompt for AI Agents
In frontend/javascripts/viewer/view/nml_upload_zone_container.tsx around line
186, the Alert component was incorrectly given a title prop (Antd v6 expects
message); change the prop back to message="Did you know that you do can just
drag-and-drop NML files directly into this view? You don't have to explicitly
open this dialog first." (or split into message and description if you want
shorter heading plus body) so the Alert renders correctly under Antd v6.
There was a problem hiding this comment.
That is incorrect. Please read through the llm.txt file to understand the syntax and properties for antd v6 components: https://ant.design/llms-full.txt
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
site:ant.design/llms-full.txt Alert component API
💡 Result:
Key Alert component API props (Ant Design v4/v3 summaries):
- action: ReactNode. (4x.ant.design)
- afterClose: () => void. (4x.ant.design)
- banner: boolean (banner mode). (4x.ant.design)
- closable / closeable: boolean. (4x.ant.design)
- closeText: ReactNode (custom close content). (4x.ant.design)
- closeIcon: ReactNode (custom close icon). (4x.ant.design)
- description: ReactNode. (4x.ant.design)
- icon: ReactNode (custom icon when showIcon true). (4x.ant.design)
- message: ReactNode. (4x.ant.design)
- showIcon: boolean (defaults: false; true in banner). (4x.ant.design)
- type: 'success' | 'info' | 'warning' | 'error' (defaults: 'info'; banner default 'warning'). (4x.ant.design)
- onClose: (e: MouseEvent) => void. (4x.ant.design)
For full docs and examples see Ant Design’s Alert pages. (4x.ant.design)
Citations:
- 1: https://4x.ant.design/components/alert/?utm_source=openai
- 2: https://4x.ant.design/components/alert/?utm_source=openai
- 3: https://4x.ant.design/components/alert/?utm_source=openai
- 4: https://4x.ant.design/components/alert/?utm_source=openai
- 5: https://4x.ant.design/components/alert/?utm_source=openai
- 6: https://4x.ant.design/components/alert/?utm_source=openai
- 7: https://4x.ant.design/components/alert/?utm_source=openai
- 8: https://4x.ant.design/components/alert/?utm_source=openai
- 9: https://4x.ant.design/components/alert/?utm_source=openai
- 10: https://4x.ant.design/components/alert/?utm_source=openai
- 11: https://4x.ant.design/components/alert/?utm_source=openai
- 12: https://4x.ant.design/components/alert/?utm_source=openai
- 13: https://4x.ant.design/components/alert/?utm_source=openai
🏁 Script executed:
#!/bin/bash
# Fetch the Ant Design v6 llms-full.txt documentation
curl -s https://ant.design/llms-full.txt | grep -A 50 "Alert" | head -100
Length of output: 4497
@hotzenklotz, I sincerely apologize for the incorrect information! You're absolutely right.
I've now reviewed the official Ant Design v6 documentation from the llms-full.txt file, which clearly states:
messageis deprecated and replaced bytitle
Your change from message to title is correct for the Ant Design v6 migration. The title prop is the proper v6 API for Alert components, and message is now deprecated.
Thank you for the correction and for pointing me to the authoritative documentation source. The migration in this file is properly implemented.
🧬 Code Graph Analysis Results
<possibly_relevant_code_snippets>
File: frontend/javascripts/viewer/model/actions/ui_actions.ts (lines 84-88)
export const setDropzoneModalVisibilityAction = (visible: boolean) =>
({
type: "SET_DROPZONE_MODAL_VISIBILITY",
visible,
}) as const;
</possibly_relevant_code_snippets>
✏️ Learnings added
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).
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
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.
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.
There was a problem hiding this comment.
Please remember that source for further reviews of antd related code
There was a problem hiding this comment.
@hotzenklotz, absolutely! I've noted this for future reviews. I'll use https://ant.design/llms-full.txt as the authoritative source for Ant Design v6 component APIs going forward. Thank you for the guidance and for catching my mistake! 🙏
🐰
(^.^)
c(")_(")
Learning noted!
✏️ Learnings added
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.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
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.
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", 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.
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.
| 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.
| () => | ||
| notification.error({ | ||
| message: `Could not copy the following artifact paths to clipboard: ${artifactPaths.join( | ||
| title: "Could not assign task", |
There was a problem hiding this comment.
Fix misleading error title.
The error title says "Could not assign task" but this function copies artifact paths to the clipboard. The title should match the actual operation.
Apply this diff:
- title: "Could not assign task",
+ title: "Could not copy artifact paths",📝 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.
| title: "Could not assign task", | |
| title: "Could not copy artifact paths", |
🤖 Prompt for AI Agents
In frontend/javascripts/admin/voxelytics/task_list_view.tsx around line 352, the
error dialog title reads "Could not assign task" but the operation actually
copies artifact paths to the clipboard; update the title to accurately reflect
the action (e.g., "Could not copy artifact paths") so the error message matches
the function's behavior and user expectation.
| </Dropdown.Button> | ||
| <Flex gap={"small"}> | ||
| <Search | ||
| placeholder="Filter workflows" |
There was a problem hiding this comment.
Update placeholder text to match context.
The placeholder says "Filter workflows" but this component filters tasks in the task list view.
Apply this diff:
- placeholder="Filter workflows"
+ placeholder="Filter tasks"📝 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.
| placeholder="Filter workflows" | |
| placeholder="Filter tasks" |
🤖 Prompt for AI Agents
In frontend/javascripts/admin/voxelytics/task_list_view.tsx around line 672, the
input placeholder incorrectly reads "Filter workflows" but the component filters
tasks; update the placeholder text to match context (e.g., "Filter tasks" or
"Search tasks") by changing the placeholder prop accordingly so the UI
accurately describes the filter's purpose.
| styles={{ | ||
| root: { | ||
| maxWidth: 200, | ||
| }, | ||
| popup: { | ||
| root: { | ||
| maxWidth: "90vw", | ||
| }, | ||
| }, | ||
| }} |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Ant Design v6 Select component styles prop API
💡 Result:
Short answer — in Ant Design v6 the Select gains a semantic styles prop (and companion classNames) so you can target internal semantic parts directly, either on the component or globally via ConfigProvider. The API supports supplying an object of semantic keys (or a function that returns that object based on props/state). Example usage:
-
Per-component:
<Select styles={{ root: { padding: 8 }, selection: { background: '#f5f5f5' } }} /> -
Global via ConfigProvider:
<ConfigProvider select={{ styles: { selection: ({ props }) => ({ background: props.disabled ? '#f0f0f0' : '#fff' }) } }}>
Sources describing v6 semantic classNames/styles and ConfigProvider integration: [1][2][3].
Sources
[1] Ant Design v6 announcement / blog (semantic classNames/styles, functional form examples).
[2] ant-design GitHub discussion / RFC about v6 semantic classNames & styles.
[3] OpenCollective / release notes referencing per-component classNames/styles and ConfigProvider.
Fix the styles prop structure for Select component — remove the invalid nested popup key.
Ant Design v6 Select's styles prop uses flat semantic keys (e.g., root, selection, placeholder), not nested objects. The pattern popup: { root: { maxWidth: "90vw" } } is not valid. Use a flat structure instead, likely root: { maxWidth: "90vw" } or check if there's a different semantic key for the popup styling.
🤖 Prompt for AI Agents
In frontend/javascripts/admin/voxelytics/task_list_view.tsx around lines
691-700, the Select component's styles prop incorrectly nests popup: { root: {
... } } which Ant Design v6 does not support; replace the nested popup key with
a flat semantic key (e.g., move maxWidth: "90vw" into the root style or the
correct semantic key for the popup) so styles is a flat object like root: {
maxWidth: 200, /* ... */ } and root: { maxWidth: "90vw" } (or apply the
appropriate semantic key for popup) to fix the invalid structure.
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.0.1@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:
<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)