From 8797a68dea6ded8ef4aa5413ee01496bb169de72 Mon Sep 17 00:00:00 2001 From: Tom Herold Date: Wed, 29 Nov 2023 15:01:17 +0100 Subject: [PATCH 1/7] fix antd deprecation warning for tabs.pane in download modal --- .../view/action-bar/download_modal_view.tsx | 489 +++++++++--------- 1 file changed, 245 insertions(+), 244 deletions(-) diff --git a/frontend/javascripts/oxalis/view/action-bar/download_modal_view.tsx b/frontend/javascripts/oxalis/view/action-bar/download_modal_view.tsx index d2fed417591..f80e0f25b21 100644 --- a/frontend/javascripts/oxalis/view/action-bar/download_modal_view.tsx +++ b/frontend/javascripts/oxalis/view/action-bar/download_modal_view.tsx @@ -10,6 +10,7 @@ import { Radio, Alert, Tooltip, + TabsProps, } from "antd"; import { CopyOutlined } from "@ant-design/icons"; import React, { useState } from "react"; @@ -53,7 +54,6 @@ import { import { formatCountToDataAmountUnit, formatScale } from "libs/format_utils"; import { BoundingBoxType, Vector3 } from "oxalis/constants"; import { useStartAndPollJob } from "admin/job/job_hooks"; -const { TabPane } = Tabs; const { Paragraph, Text } = Typography; type TabKeys = "download" | "export" | "python"; @@ -505,270 +505,271 @@ function _DownloadModalView({ // Will be false if no volumes exist. - return ( - + + {maybeShowWarning()} + + {!hasVolumes ? "This is a Skeleton-only annotation. " : ""} + {!hasSkeleton ? "This is a Volume-only annotation. " : ""} + {messages["annotation.download"]} + + + + Options + + + + Select the data you would like to download. + + An NML file will always be included with any download. + + + + setFileFormatToDownload(e.target.value)} + style={{ marginLeft: 16 }} > - {okText} - - ) : null - } - onCancel={onClose} - style={{ overflow: "visible" }} - > - - {isAnnotation ? ( - - - {maybeShowWarning()} - - {!hasVolumes ? "This is a Skeleton-only annotation. " : ""} - {!hasSkeleton ? "This is a Volume-only annotation. " : ""} - {messages["annotation.download"]} - - - - Options - - - - Select the data you would like to download. - - An NML file will always be included with any download. - - - - setFileFormatToDownload(e.target.value)} - style={{ marginLeft: 16 }} + {hasVolumes ? ( + <> + - {hasVolumes ? ( - <> - - - Include volume annotations as WKW - Download a zip folder containing WKW files. - - - - Include volume annotations as Zarr - Download a zip folder containing Zarr files. - - - ) : null} - - {hasSkeleton ? "Skeleton annotations" : "Meta data"} {hasVolumes ? "only " : ""} - as NML + + Include volume annotations as WKW + Download a zip folder containing WKW files. - - - - - {moreInfoHint} - - ) : null} - - - {maybeShowWarning()} - - {messages["download.export_as_tiff"]({ typeName })} - - - {activeTabKey === "export" && !features().jobsEnabled ? ( - workerInfo - ) : ( -
- - Export format - -
- setExportFormat(ev.target.value)} - > - OME-TIFF - TIFF stack (as .zip) - -
- - - Layer - - + + + Include volume annotations as Zarr + Download a zip folder containing Zarr files. + + + ) : null} + + {hasSkeleton ? "Skeleton annotations" : "Meta data"} {hasVolumes ? "only " : ""} + as NML + + + + + + {moreInfoHint} + + ); - - Bounding Box - - { - if (boxId != null) { - setSelectedBoundingBoxId(boxId); - } - }} - style={{ width: "100%" }} - /> - {boundingBoxCompatibilityAlerts} - - - Mag - - - - - - - {mag.join("-")} - - - - Estimated file size:{" "} - {estimateFileSize( - selectedLayer, - mag, - selectedBoundingBox.boundingBox, - exportFormat, - )} -
- Resolution: {formatSelectedScale(dataset, mag)} - - - -

- Go to the{" "} - - Jobs Overview Page - {" "} - to see running exports and to download the results. -

-
- )} + const tiffExportTab = ( + <> + + {maybeShowWarning()} + + {messages["download.export_as_tiff"]({ typeName })} + + + {activeTabKey === "export" && !features().jobsEnabled ? ( + workerInfo + ) : ( +
- {moreInfoHint} - - Keep window open - - + Export format + +
+ setExportFormat(ev.target.value)}> + OME-TIFF + TIFF stack (as .zip) + +
- - - - The following code snippets are suggestions to get you started quickly with the{" "} - - WEBKNOSSOS Python API - - . To download and use this {typeName} in your Python project, simply copy and paste - the code snippets to your script. - - - Code Snippets + Layer - {maybeShowWarning()} - - - - + + + Bounding Box + + { + if (boxId != null) { + setSelectedBoundingBoxId(boxId); + } + }} + style={{ width: "100%" }} /> - {moreInfoHint} - - + {boundingBoxCompatibilityAlerts} + + + Mag + + + + + + + {mag.join("-")} + + + + Estimated file size:{" "} + {estimateFileSize(selectedLayer, mag, selectedBoundingBox.boundingBox, exportFormat)} +
+ Resolution: {formatSelectedScale(dataset, mag)} + + + +

+ Go to the{" "} + + Jobs Overview Page + {" "} + to see running exports and to download the results. +

+
+ )} + + {moreInfoHint} + + Keep window open + + + ); + + const pythonClientTab = ( + <> + + + The following code snippets are suggestions to get you started quickly with the{" "} + + WEBKNOSSOS Python API + + . To download and use this {typeName} in your Python project, simply copy and paste the + code snippets to your script. + + + + Code Snippets + + {maybeShowWarning()} + + + + + + {moreInfoHint} + + ); + + const tabs: TabsProps["items"] = [ + { label: "TIFF Export", key: "export", children: tiffExportTab }, + { label: "Python Client", key: "python", children: pythonClientTab }, + ]; + if (isAnnotation) tabs.unshift({ label: "Download", key: "download", children: downloadTab }); + + return ( + + {okText} + + ) : null + } + onCancel={onClose} + style={{ overflow: "visible" }} + > + ); } From b89c14cb415fac3dbccf0029ce72da5e09d8958d Mon Sep 17 00:00:00 2001 From: Tom Herold Date: Wed, 29 Nov 2023 15:31:39 +0100 Subject: [PATCH 2/7] removed deprecated antd tabs.tabpane in VX task viewer --- .../admin/voxelytics/task_view.tsx | 178 +++++++++--------- 1 file changed, 94 insertions(+), 84 deletions(-) diff --git a/frontend/javascripts/admin/voxelytics/task_view.tsx b/frontend/javascripts/admin/voxelytics/task_view.tsx index 0b8b62e7540..a4b4a2023d5 100644 --- a/frontend/javascripts/admin/voxelytics/task_view.tsx +++ b/frontend/javascripts/admin/voxelytics/task_view.tsx @@ -1,6 +1,6 @@ import React from "react"; import { JSONTree } from "react-json-tree"; -import { Progress, Tabs, Tooltip } from "antd"; +import { Progress, Tabs, TabsProps, Tooltip } from "antd"; // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'reac... Remove this comment to see the full error message import Markdown from "react-remarkable"; import { @@ -15,9 +15,6 @@ import LogTab from "./log_tab"; import StatisticsTab from "./statistics_tab"; import { runStateToStatus, useTheme } from "./utils"; import { formatNumber } from "libs/format_utils"; - -const { TabPane } = Tabs; - function labelRenderer(_keyPath: Array) { const keyPath = _keyPath.slice().reverse(); const divWithId =
{keyPath.slice(-1)[0]}
; @@ -50,6 +47,98 @@ function TaskView({ const ingoingEdges = dag.edges.filter((edge) => edge.target === taskName); const [theme, invertTheme] = useTheme(); + const configTab = ( + <> +

+ Class: {task.task} +

+ + + ); + + const logTab = + runId != null ? ( + + ) : ( +

Please select a specific run.

+ ); + + const tabs: TabsProps["items"] = [{ label: "Config", key: "1", children: configTab }]; + if (task.description != null) + tabs.unshift({ + label: "Description", + key: "0", + children: ( + + ), + }); + + if (Object.keys(artifacts).length > 0) + tabs.push({ + label: "Output Artifacts", + key: "2", + children: ( + + ), + }); + + if (Object.keys(task.inputs).length > 0) + tabs.push({ + label: "Input Artifacts", + key: "3", + children:
    {renderInputs(task.inputs, ingoingEdges, onSelectTask)}
, + }); + + if ( + [ + VoxelyticsRunState.COMPLETE, + VoxelyticsRunState.RUNNING, + VoxelyticsRunState.STALE, + VoxelyticsRunState.FAILED, + VoxelyticsRunState.CANCELLED, + ].includes(taskInfo.state) + ) { + tabs.push({ label: "Logs", key: "4", children: logTab }); + tabs.push({ + label: "Statistics", + key: "5", + children: ( + + ), + }); + } + return (
{[ @@ -119,86 +208,7 @@ function TaskView({
)} - - {task.description != null ? ( - - - - ) : null} - -

- Class: {task.task} -

- - - {Object.keys(artifacts).length > 0 ? ( - - - - ) : null} - {Object.keys(task.inputs).length > 0 ? ( - -
    {renderInputs(task.inputs, ingoingEdges, onSelectTask)}
- - ) : null} - {[ - VoxelyticsRunState.COMPLETE, - VoxelyticsRunState.RUNNING, - VoxelyticsRunState.STALE, - VoxelyticsRunState.FAILED, - VoxelyticsRunState.CANCELLED, - ].includes(taskInfo.state) && ( - - {runId != null ? ( - - ) : ( -

Please select a specific run.

- )} - - )} - {[ - VoxelyticsRunState.COMPLETE, - VoxelyticsRunState.RUNNING, - VoxelyticsRunState.STALE, - VoxelyticsRunState.FAILED, - VoxelyticsRunState.CANCELLED, - ].includes(taskInfo.state) && ( - - - - )} - + ); } From ac3c585c5675ea78280ecf848642cda82dbf22ca Mon Sep 17 00:00:00 2001 From: Tom Herold Date: Wed, 29 Nov 2023 16:57:25 +0100 Subject: [PATCH 3/7] fixed antd deprectation warning for tabs.tabpane in dataset settings view --- .../dataset/dataset_settings_view.tsx | 166 ++++++++++-------- 1 file changed, 90 insertions(+), 76 deletions(-) diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx index b1e88d7f17a..daef18930b0 100644 --- a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx +++ b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx @@ -57,7 +57,6 @@ import DatasetSettingsDeleteTab from "./dataset_settings_delete_tab"; import DatasetSettingsDataTab, { syncDataSourceFields } from "./dataset_settings_data_tab"; import { defaultContext } from "@tanstack/react-query"; -const { TabPane } = Tabs; const FormItem = Form.Item; const notImportedYetStatus = "Not imported yet."; type OwnProps = { @@ -823,6 +822,94 @@ class DatasetSettingsView extends React.PureComponent ); + const tabs = [ + { + label: Data {formErrors.data ? errorIcon : ""}, + key: "data", + forceRender: true, + children: ( + + ), + }, + + { + label: Sharing & Permissions {formErrors.general ? errorIcon : null}, + key: "sharing", + forceRender: true, + children: ( + + ), + }, + + { + label: Metadata, + key: "general", + forceRender: true, + children: ( + + ), + }, + + { + label: View Configuration {formErrors.defaultConfig ? errorIcon : ""}, + key: "defaultConfig", + forceRender: true, + children: ( + + ), + }, + ]; + + if (isUserAdmin && features().allowDeleteDatasets) + tabs.push({ + label: Delete Dataset , + key: "deleteDataset", + forceRender: true, + children: ( + + ), + }); + return (
- Data {formErrors.data ? errorIcon : ""}} - key="data" - forceRender - > - { - // We use the Hideable component here to avoid that the user can "tab" - // to hidden form elements. - } - - - - Sharing & Permissions {formErrors.general ? errorIcon : null}} - key="sharing" - forceRender - > - - - - Metadata} key="general" forceRender> - - - - View Configuration {formErrors.defaultConfig ? errorIcon : ""}} - key="defaultConfig" - forceRender - > - - - - {isUserAdmin && features().allowDeleteDatasets ? ( - Delete Dataset } key="deleteDataset" forceRender> - - - ) : null} - + items={tabs} + /> Date: Wed, 29 Nov 2023 17:01:40 +0100 Subject: [PATCH 4/7] fixed antd deprecation warning for tabs.tabpanne in dataset add view --- .../admin/dataset/dataset_add_view.tsx | 51 +++++++++---------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/frontend/javascripts/admin/dataset/dataset_add_view.tsx b/frontend/javascripts/admin/dataset/dataset_add_view.tsx index 55d42a6180a..e7cf364042b 100644 --- a/frontend/javascripts/admin/dataset/dataset_add_view.tsx +++ b/frontend/javascripts/admin/dataset/dataset_add_view.tsx @@ -1,6 +1,6 @@ import type { RouteComponentProps } from "react-router-dom"; import { withRouter } from "react-router-dom"; -import { Tabs, Modal, Button, Layout } from "antd"; +import { Tabs, Modal, Button, Layout, TabsProps } from "antd"; import { DatabaseOutlined, UploadOutlined } from "@ant-design/icons"; import React, { useState } from "react"; import { connect } from "react-redux"; @@ -13,7 +13,6 @@ import features from "features"; import { getDatastores } from "admin/admin_rest_api"; import { useFetch } from "libs/react_helpers"; -const { TabPane } = Tabs; const { Content, Sider } = Layout; enum DatasetAddViewTabs { @@ -107,34 +106,34 @@ function DatasetAddView({ history }: RouteComponentProps) { ? (defaultActiveTabFromHash as DatasetAddViewTabs) : DatasetAddViewTabs.UPLOAD; + const tabs: TabsProps["items"] = [ + { + label: ( + + + Upload Dataset + + ), + key: DatasetAddViewTabs.UPLOAD, + children: , + }, + { + label: ( + + + Add Remote Dataset + + ), + key: DatasetAddViewTabs.REMOTE, + children: , + }, + ]; + return ( - - - - Upload Dataset - - } - key={DatasetAddViewTabs.UPLOAD} - > - - - - - Add Remote Dataset - - } - key={DatasetAddViewTabs.REMOTE} - > - - - + From e6345231fb3831997d78c7aac5cbce6509e3f049 Mon Sep 17 00:00:00 2001 From: Tom Herold Date: Wed, 29 Nov 2023 17:05:51 +0100 Subject: [PATCH 5/7] fixed antd deprecation warning for tabs.tabpane in task create view --- .../admin/task/task_create_view.tsx | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/frontend/javascripts/admin/task/task_create_view.tsx b/frontend/javascripts/admin/task/task_create_view.tsx index 2cd345ef0b8..ab0aba145ef 100644 --- a/frontend/javascripts/admin/task/task_create_view.tsx +++ b/frontend/javascripts/admin/task/task_create_view.tsx @@ -1,35 +1,34 @@ import { BarsOutlined, ScheduleOutlined } from "@ant-design/icons"; -import { Tabs } from "antd"; +import { Tabs, TabsProps } from "antd"; import React from "react"; import TaskCreateBulkView from "admin/task/task_create_bulk_view"; import TaskCreateFormView from "admin/task/task_create_form_view"; -const { TabPane } = Tabs; -const TaskCreateView = () => ( - - { + const tabs: TabsProps["items"] = [ + { + label: ( Create Task - } - key="1" - > - - - , + }, + { + label: ( Bulk Creation - } - key="2" - > - - - -); + ), + key: "2", + children: , + }, + ]; + + return ; +}; export default TaskCreateView; From 48f3cc88a8bf3c211b336871130fb3be31211baa Mon Sep 17 00:00:00 2001 From: Tom Herold Date: Wed, 29 Nov 2023 17:13:55 +0100 Subject: [PATCH 6/7] fixed antd deprecation warning for tabs.tabpane in version control view --- .../javascripts/oxalis/view/version_view.tsx | 90 ++++++++++--------- 1 file changed, 50 insertions(+), 40 deletions(-) diff --git a/frontend/javascripts/oxalis/view/version_view.tsx b/frontend/javascripts/oxalis/view/version_view.tsx index 553552aa18d..7dded5eb3b5 100644 --- a/frontend/javascripts/oxalis/view/version_view.tsx +++ b/frontend/javascripts/oxalis/view/version_view.tsx @@ -1,4 +1,4 @@ -import { Button, Alert, Tabs } from "antd"; +import { Button, Alert, Tabs, TabsProps } from "antd"; import { CloseOutlined } from "@ant-design/icons"; import { connect } from "react-redux"; import * as React from "react"; @@ -9,7 +9,7 @@ import type { OxalisState, Tracing } from "oxalis/store"; import { TracingType, TracingTypeEnum } from "types/api_flow_types"; import Store from "oxalis/store"; import VersionList, { previewVersion } from "oxalis/view/version_list"; -const { TabPane } = Tabs; + export type Versions = { skeleton?: number | null | undefined; volumes?: Record; @@ -52,6 +52,52 @@ class VersionView extends React.Component { }; render() { + const tabs: TabsProps["items"] = []; + + if (this.props.tracing.skeleton != null) + tabs.push({ + label: "Skeleton", + key: "skeleton", + children: ( + + ), + }); + + tabs.push( + ...this.props.tracing.volumes.map((volumeTracing) => ({ + label: getReadableNameByVolumeTracingId(this.props.tracing, volumeTracing.tracingId), + key: volumeTracing.tracingId, + children: ( + + ), + })), + ); + + tabs.push( + ...this.props.tracing.mappings.map((mapping) => ({ + label: `${getReadableNameByVolumeTracingId( + this.props.tracing, + mapping.tracingId, + )} (Editable Mapping)`, + key: `${mapping.tracingId}-${mapping.mappingName}`, + children: ( + + ), + })), + ); + return (
{ onChange={this.onChangeTab} activeKey={this.state.activeTracingType} tabBarStyle={{ marginLeft: 6 }} - > - {this.props.tracing.skeleton != null ? ( - - - - ) : null} - {this.props.tracing.volumes.map((volumeTracing) => ( - - - - ))} - {this.props.tracing.mappings.map((mapping) => ( - - - - ))} - + items={tabs} + />
); From cb509bc21d971d7e736ba72fce2a6a0ac01fedac Mon Sep 17 00:00:00 2001 From: Tom Herold Date: Wed, 29 Nov 2023 17:22:32 +0100 Subject: [PATCH 7/7] updated changelog --- CHANGELOG.unreleased.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index 11a0e6d9468..705693fd90b 100644 --- a/CHANGELOG.unreleased.md +++ b/CHANGELOG.unreleased.md @@ -30,6 +30,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released - Exploring HTTP uris of unknown hosts no longer causes an exception error message to be displayed. [#7422](https://github.com/scalableminds/webknossos/pull/7422) - Fixed the initialization of the dark theme if it was active during page load. [#7446](https://github.com/scalableminds/webknossos/pull/7446) - Fixed a rare bug in ad-hoc meshing for voxelytics-created segmentations with agglomerate mappings. [#7449](https://github.com/scalableminds/webknossos/pull/7449) +- Fixed several deprecation warning for using antd's Tabs.TabPane components. [#7469] ### Removed