diff --git a/frontend/javascripts/admin/account/account_profile_view.tsx b/frontend/javascripts/admin/account/account_profile_view.tsx index 634dadb4f29..a4c5222ea77 100644 --- a/frontend/javascripts/admin/account/account_profile_view.tsx +++ b/frontend/javascripts/admin/account/account_profile_view.tsx @@ -1,7 +1,7 @@ import { CheckOutlined, DownOutlined, EditOutlined } from "@ant-design/icons"; import ChangeEmailView from "admin/auth/change_email_view"; import { updateSelectedThemeOfUser } from "admin/rest_api"; -import { Button, Col, Dropdown, Row } from "antd"; +import { Button, Col, Dropdown, Row, Space } from "antd"; import { useWkSelector } from "libs/react_hooks"; import * as Utils from "libs/utils"; import { useState } from "react"; @@ -94,9 +94,12 @@ function AccountProfileView() { { title: "Theme", content: ( - }> - {themeItems.find((item) => item.key === selectedTheme)?.label} - + + + + @@ -105,94 +103,86 @@ function ScriptListView() { onChange={handleSearch} value={searchQuery} /> - -

Scripts

-
+ + + + + scroll={{ + x: "max-content", + }} + className="large-table" + > + } + key="id" + sorter={Utils.localeCompareBy((script) => script.id)} + width={150} + /> + ((script) => script.name)} + width={250} + /> - -
((script) => script.owner.lastName)} + render={(owner: APIUser) => `${owner.firstName} ${owner.lastName}`} + /> + ((script) => script.gist)} + render={(gist: string) => ( + + {gist} + )} - rowKey="id" - pagination={{ - defaultPageSize: 50, - }} - style={{ - marginTop: 30, - marginBottom: 30, - }} - locale={{ - emptyText: renderPlaceholder(), - }} - scroll={{ - x: "max-content", - }} - className="large-table" - > - } - key="id" - sorter={Utils.localeCompareBy((script) => script.id)} - width={150} - /> - ((script) => script.name)} - width={250} - /> - - ((script) => script.owner.lastName)} - render={(owner: APIUser) => `${owner.firstName} ${owner.lastName}`} - /> - ((script) => script.gist)} - render={(gist: string) => ( - - {gist} - - )} - /> - ( - - - - Edit - -
- - - Delete - - - )} - /> -
- -
+ /> + ( + + + + Edit + +
+ + + Delete + + + )} + /> + + ); } diff --git a/frontend/javascripts/admin/statistic/project_and_annotation_type_dropdown.tsx b/frontend/javascripts/admin/statistic/project_and_annotation_type_dropdown.tsx index 9c83c3bb99d..caf8d15af44 100644 --- a/frontend/javascripts/admin/statistic/project_and_annotation_type_dropdown.tsx +++ b/frontend/javascripts/admin/statistic/project_and_annotation_type_dropdown.tsx @@ -1,3 +1,4 @@ +import { FilterOutlined } from "@ant-design/icons"; import { getProjects } from "admin/rest_api"; import { Select } from "antd"; import { useFetch } from "libs/react_helpers"; @@ -121,11 +122,12 @@ function ProjectAndAnnotationTypeDropdown({ placeholder="Filter type or projects" style={style} options={filterOptions} - optionFilterProp="label" + showSearch={{ optionFilterProp: "label" }} value={selectedFilters} popupMatchSelectWidth={400} onDeselect={(removedKey: string) => onDeselect(removedKey)} onSelect={(newSelection: string) => setSelectedProjects(selectedFilters, newSelection)} + prefix={} /> ); } diff --git a/frontend/javascripts/admin/statistic/project_progress_report_view.tsx b/frontend/javascripts/admin/statistic/project_progress_report_view.tsx index f85277187dd..e82a963208b 100644 --- a/frontend/javascripts/admin/statistic/project_progress_report_view.tsx +++ b/frontend/javascripts/admin/statistic/project_progress_report_view.tsx @@ -1,6 +1,6 @@ import { PauseCircleOutlined, ReloadOutlined, SettingOutlined } from "@ant-design/icons"; import { getProjectProgressReport } from "admin/rest_api"; -import { Badge, Card, Spin, Table } from "antd"; +import { Badge, Button, Card, Flex, Space, Spin, Table } from "antd"; import FormattedDate from "components/formatted_date"; import Loop from "components/loop"; import StackedBarChart, { colors } from "components/stacked_bar_chart"; @@ -71,12 +71,25 @@ function ProjectProgressReportView() { return (
-
- {updatedAt != null ? : null}{" "} - - -
-

Project Progress

+ +

Project Progress

+ + {updatedAt != null ? : null}{" "} + - +
); } diff --git a/frontend/javascripts/admin/task/task_create_form_view.tsx b/frontend/javascripts/admin/task/task_create_form_view.tsx index 6ab877301b1..340600fc96d 100644 --- a/frontend/javascripts/admin/task/task_create_form_view.tsx +++ b/frontend/javascripts/admin/task/task_create_form_view.tsx @@ -528,13 +528,12 @@ function TaskCreateFormView() { ]} > @@ -245,10 +245,6 @@ function TaskListView({ initialFieldValues }: Props) { ); } - const marginRight = { - marginRight: 20, - }; - const columns: ColumnType[] = [ { title: "ID", @@ -417,28 +413,23 @@ function TaskListView({ initialFieldValues }: Props) { return (
-
- - - - -
-

- Tasks -

+ +

Tasks

+ + + + + + + {features().isWkorgInstance ? ( <> + // @ts-expect-error ts-migrate (2532) FIXME: Object is possibly 'undefined'. + option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0, + }} placeholder="Select a New User" value={currentUserIdValue} onChange={handleSelectChange} - optionFilterProp="label" style={{ width: "100%", }} - filterOption={(input, option) => - // @ts-expect-error ts-migrate (2532) FIXME: Object is possibly 'undefined'. - option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 - } options={users.map((user) => ({ value: user.id, label: `${user.lastName}, ${user.firstName} (${user.email})`, diff --git a/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx b/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx index 76b5ce8b861..651db7a1915 100644 --- a/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx +++ b/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx @@ -212,7 +212,6 @@ function EditModelSharedOrganizationsModal({ open onOk={submitNewSharedOrganizations} onCancel={onClose} - onClose={onClose} maskClosable={false} width={800} > diff --git a/frontend/javascripts/admin/voxelytics/task_list_view.tsx b/frontend/javascripts/admin/voxelytics/task_list_view.tsx index 348c677b116..07e435e162b 100644 --- a/frontend/javascripts/admin/voxelytics/task_list_view.tsx +++ b/frontend/javascripts/admin/voxelytics/task_list_view.tsx @@ -2,6 +2,7 @@ import { CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, + DownOutlined, ExclamationCircleOutlined, ExportOutlined, FieldTimeOutlined, @@ -16,10 +17,12 @@ import { Collapse, type CollapseProps, Dropdown, + Flex, Input, type MenuProps, Row, Select, + Space, Tag, Tooltip, message, @@ -343,10 +346,11 @@ export default function TaskListView({ ); navigator.clipboard.writeText(artifactPaths.join("\n")).then( - () => notification.success({ message: "All artifacts path were copied to the clipboard" }), + () => notification.success({ title: "All artifact paths were copied to the clipboard" }), () => notification.error({ - message: `Could not copy the following artifact paths to clipboard: ${artifactPaths.join( + title: "Could not copy artifact paths", + description: `Could not copy the following artifact paths to clipboard: ${artifactPaths.join( "\n", )}`, }), @@ -660,42 +664,58 @@ export default function TaskListView({ className="ant-collapse tasks-header" style={{ marginBottom: 10, - padding: 5, zIndex: 1, - display: "flex", }} > - -
- - - setExpandedTasks([])}> - Collapse All - + + + + + + + + + + + + +
diff --git a/frontend/javascripts/banners.tsx b/frontend/javascripts/banners.tsx index 10c404b105b..c2ecb72814d 100644 --- a/frontend/javascripts/banners.tsx +++ b/frontend/javascripts/banners.tsx @@ -60,7 +60,7 @@ function UpcomingMaintenanceBanner({ maintenanceInfo }: { maintenanceInfo: Maint return ( Upcoming maintenance: until{" "} . {message} @@ -69,10 +69,12 @@ function UpcomingMaintenanceBanner({ maintenanceInfo }: { maintenanceInfo: Maint type="info" banner style={BANNER_STYLE} - closable - onClose={() => { - saveUserClosedMaintenanceInfo(maintenanceInfo); - setNavbarHeight(constants.DEFAULT_NAVBAR_HEIGHT); + closable={{ + closeIcon: true, + onClose: () => { + saveUserClosedMaintenanceInfo(maintenanceInfo); + setNavbarHeight(constants.DEFAULT_NAVBAR_HEIGHT); + }, }} /> ); @@ -83,7 +85,7 @@ function CurrentMaintenanceBanner({ maintenanceInfo }: { maintenanceInfo: Mainte return ( Currently under maintenance, scheduled until .{" "} {message} @@ -209,7 +211,7 @@ export function UpgradeVersionBanner() { return shouldBannerBeShown ? ( You are using an outdated version of WEBKNOSSOS. Switch to @@ -234,13 +236,15 @@ export function UpgradeVersionBanner() { } banner style={UPGRADE_BANNER_STYLE} - closable - onClose={() => { - localStorage.setItem( - UPGRADE_BANNER_DISMISSAL_TIMESTAMP_LOCAL_STORAGE_KEY, - dayjs().toISOString(), - ); - forceUpdate(); + closable={{ + closeIcon: true, + onClose: () => { + localStorage.setItem( + UPGRADE_BANNER_DISMISSAL_TIMESTAMP_LOCAL_STORAGE_KEY, + dayjs().toISOString(), + ); + forceUpdate(); + }, }} type="info" showIcon={false} diff --git a/frontend/javascripts/components/credits_footer.tsx b/frontend/javascripts/components/credits_footer.tsx index ad4303e42f1..8e150dade5e 100644 --- a/frontend/javascripts/components/credits_footer.tsx +++ b/frontend/javascripts/components/credits_footer.tsx @@ -1,4 +1,5 @@ import { ConfigProvider, Layout } from "antd"; +import { Typography } from "antd"; import { Link } from "react-router-dom"; import { getAntdTheme } from "theme"; const { Footer } = Layout; @@ -7,14 +8,14 @@ const creditsFooter = () => ( diff --git a/frontend/javascripts/components/error_boundary.tsx b/frontend/javascripts/components/error_boundary.tsx index 57a3d339f33..de6484b4702 100644 --- a/frontend/javascripts/components/error_boundary.tsx +++ b/frontend/javascripts/components/error_boundary.tsx @@ -57,7 +57,7 @@ export default class ErrorBoundary extends React.Component< {errorDescription}} />
diff --git a/frontend/javascripts/components/pricing_enforcers.tsx b/frontend/javascripts/components/pricing_enforcers.tsx index f291b2b9eee..53bb44c1be9 100644 --- a/frontend/javascripts/components/pricing_enforcers.tsx +++ b/frontend/javascripts/components/pricing_enforcers.tsx @@ -226,7 +226,7 @@ export const PricingEnforcedBlur = ({ > refContent} - destroyPopupOnHide + destroyOnHidden >
@@ -691,8 +690,7 @@ class DatasetTable extends React.PureComponent { folderForContextMenu != null ? () => this.editFolder(folderForContextMenu) : () => {} } /> - renderer.getRowKey()} @@ -700,11 +698,17 @@ class DatasetTable extends React.PureComponent { pagination={{ defaultPageSize: 50, }} - className="hide-checkbox-selection" + styles={{ + // hide/offset the first column containing the checkbox for row selection + section: { marginLeft: "-36px" }, + }} onChange={this.handleChange} locale={{ emptyText: this.renderEmptyText(), }} + scroll={{ + x: "max-content", + }} summary={(currentPageData) => { // Workaround to get to the currently rendered entries (since the ordering // is managed by antd). @@ -811,6 +815,7 @@ class DatasetTable extends React.PureComponent { }; }} rowSelection={{ + columnWidth: 0, selectedRowKeys, onSelectNone: () => { this.props.onSelectDataset(null); @@ -863,7 +868,7 @@ export function DatasetTags({ }; return ( -
+ {dataset.tags.map((tag) => ( ) : null} -
+ ); } @@ -897,6 +902,7 @@ export function DatasetLayerTags({ dataset }: { dataset: APIMaybeUnimportedDatas whiteSpace: "nowrap", textOverflow: "ellipsis", }} + variant="outlined" > {layer.name} - {layer.elementClass} @@ -919,7 +925,7 @@ export function TeamTags({ } if (permittedTeams.length === 0 && emptyValue != null) { - return {emptyValue}; + return {emptyValue}; } const allowedTeamsById = _.keyBy(dataset.allowedTeams, "id"); @@ -943,6 +949,7 @@ export function TeamTags({ whiteSpace: "nowrap", textOverflow: "ellipsis", }} + variant="outlined" color={stringToColor(team.name)} > {team.name} @@ -972,7 +979,7 @@ function BreadcrumbsTag({ parts: allParts }: { parts: string[] | null }) { return ( - + {formatPath(parts)} diff --git a/frontend/javascripts/dashboard/dashboard_task_list_view.tsx b/frontend/javascripts/dashboard/dashboard_task_list_view.tsx index 2474560ca49..342e837ee9c 100644 --- a/frontend/javascripts/dashboard/dashboard_task_list_view.tsx +++ b/frontend/javascripts/dashboard/dashboard_task_list_view.tsx @@ -236,7 +236,7 @@ class DashboardTaskListView extends React.PureComponent { Finished
) : ( - + {label} {isAdmin || this.props.isAdminView ? ( this.openTransferModal(annotation.id)} icon={}> @@ -370,7 +370,7 @@ class DashboardTaskListView extends React.PureComponent { } style={{ maxWidth: 460 }} > @@ -388,18 +388,18 @@ class DashboardTaskListView extends React.PureComponent { Tasks are a powerful way to distribute annotation jobs among groups of users as part of the WEBKNOSSOS project management.{" "}

- - - - - - + + + + )} @@ -423,32 +423,29 @@ class DashboardTaskListView extends React.PureComponent { }); const TaskCardTitle = ({ task }: { task: APITaskWithAnnotation }) => ( - - - {task.projectName} () - - {getSkeletonDescriptor(task.annotation) == null ? null : skeleton} + + {task.projectName} () + {getSkeletonDescriptor(task.annotation) == null ? null : ( + + skeleton + + )} {getVolumeDescriptors(task.annotation).length === 0 ? null : ( - volume + + volume + )} {task.type.settings.allowedModes.map((mode) => ( - {mode} + + {mode} + ))} - + ); const TaskCard = (task: APITaskWithAnnotation) => this.state.showFinishedTasks ? ( - + Task ID: {task.id} @@ -463,13 +460,7 @@ class DashboardTaskListView extends React.PureComponent { ) : ( - } - style={{ - margin: "10px", - }} - > + }>
@@ -517,9 +508,11 @@ class DashboardTaskListView extends React.PureComponent { toggleShowFinished={this.toggleShowFinished} getFinishVerb={this.getFinishVerb} /> -

- {this.state.showFinishedTasks ? "My Finished Tasks" : null} -

+ {this.state.showFinishedTasks ? ( +

+ My Finished Tasks +

+ ) : null} {this.renderTaskList()}
+ } @@ -576,15 +569,8 @@ function TopBar({ > Get a New Task - -
+ + ); return ( diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx index 747635a9f9b..c8986315f7f 100644 --- a/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx +++ b/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx @@ -24,7 +24,7 @@ export type DatasetSettingsContextValue = { handleSubmit: () => void; handleCancel: () => void; onValuesChange: ( - changedValues: DatasetSettingsFormData, + changedValues: Partial, allValues: DatasetSettingsFormData, ) => void; getFormValidationSummary: () => Record; diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx index 1595a1536ea..7524598c619 100644 --- a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx +++ b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx @@ -317,12 +317,9 @@ export const DatasetSettingsProvider: React.FC = ( form.validateFields().then(submitForm).catch(handleValidationFailed); }, [form, submitForm, handleValidationFailed]); - const onValuesChange = useCallback( - (_changedValues: DatasetSettingsFormData, _allValues: DatasetSettingsFormData) => { - setHasUnsavedChanges(true); - }, - [], - ); + const onValuesChange = useCallback(() => { + setHasUnsavedChanges(true); + }, []); const handleCancel = useCallback(() => { onCancel(); diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx index 82b827c9332..a76060d1798 100644 --- a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx +++ b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx @@ -64,14 +64,14 @@ const DatasetSettingsView: React.FC = () => { status === notImportedYetStatus ? ( {messages["dataset.missing_datasource_json"]}} + title={{messages["dataset.missing_datasource_json"]}} type="error" showIcon /> ) : ( {messages["dataset.invalid_datasource_json"]}
@@ -92,7 +92,7 @@ const DatasetSettingsView: React.FC = () => { messageElements.push( {messages["dataset.import_complete"]}} + title={{messages["dataset.import_complete"]}} type="success" showIcon />, diff --git a/frontend/javascripts/dashboard/dataset/helper_components.tsx b/frontend/javascripts/dashboard/dataset/helper_components.tsx index dbe6ed96385..4a928dc1b6c 100644 --- a/frontend/javascripts/dashboard/dataset/helper_components.tsx +++ b/frontend/javascripts/dashboard/dataset/helper_components.tsx @@ -1,9 +1,9 @@ import { InfoCircleOutlined } from "@ant-design/icons"; +import type { FieldError } from "@rc-component/form/es/interface"; import { Divider, Form, Modal, Tooltip } from "antd"; import type { FormItemProps, Rule } from "antd/lib/form"; import type { NamePath } from "antd/lib/form/interface"; import sum from "lodash/sum"; -import type { FieldError } from "rc-field-form/es/interface"; const FormItem = Form.Item; diff --git a/frontend/javascripts/dashboard/dataset_folder_view.tsx b/frontend/javascripts/dashboard/dataset_folder_view.tsx index 92adc365cf1..5aabf4d2b33 100644 --- a/frontend/javascripts/dashboard/dataset_folder_view.tsx +++ b/frontend/javascripts/dashboard/dataset_folder_view.tsx @@ -99,7 +99,10 @@ function DatasetFolderViewInner(props: Props) { const renderNoDatasetsPlaceHolder = () => { const openPublicDatasetCard = ( - }> + } + > diff --git a/frontend/javascripts/dashboard/dataset_view.tsx b/frontend/javascripts/dashboard/dataset_view.tsx index a76c4d89c40..85fdcdd4d00 100644 --- a/frontend/javascripts/dashboard/dataset_view.tsx +++ b/frontend/javascripts/dashboard/dataset_view.tsx @@ -1,4 +1,5 @@ import { + EllipsisOutlined, HourglassOutlined, InfoCircleOutlined, LoadingOutlined, @@ -18,6 +19,7 @@ import { Col, Dropdown, Input, + type MenuProps, Radio, Row, Select, @@ -35,7 +37,6 @@ import features from "features"; import Persistence from "libs/persistence"; import { useWkSelector } from "libs/react_hooks"; import * as Utils from "libs/utils"; -import type { MenuProps } from "rc-menu"; import type React from "react"; import { Fragment, useContext, useEffect, useState } from "react"; import { Link } from "react-router-dom"; @@ -237,12 +238,7 @@ function DatasetView({ ); const adminHeader = ( -
+ {isUserAdminOrDatasetManagerOrTeamManager ? ( @@ -250,7 +246,6 @@ function DatasetView({ {context.activeFolderId != null && ( } onClick={() => context.activeFolderId != null && @@ -266,7 +261,7 @@ function DatasetView({ ) : ( search )} -
+ ); const datasets = context.datasets; @@ -315,18 +310,22 @@ export function DatasetRefreshButton({ context }: { context: DatasetCollectionCo const organizationId = useWkSelector((state) => state.activeOrganization?.id); return ( - - + + + + context.checkDatasets(organizationId), items: refreshMenuItems }} - style={{ marginRight: 5 }} - onClick={() => context.fetchDatasets()} - disabled={context.isChecking} > - {showLoadingIndicator ? : } Refresh - - + + + ); } @@ -340,7 +339,6 @@ export function DatasetAddButton({ context }: { context: DatasetCollectionContex ? `/datasets/upload?to=${context.activeFolderId}` : "/datasets/upload" } - style={{ marginRight: 5 }} > - - {!shouldShowArchivedAnnotations ? ( - - ) : null} + {!shouldShowArchivedAnnotations ? : null} {search} -
+ ); return ( diff --git a/frontend/javascripts/dashboard/folders/details_sidebar.tsx b/frontend/javascripts/dashboard/folders/details_sidebar.tsx index 5b3f93aa7a3..f67d4f3a7a3 100644 --- a/frontend/javascripts/dashboard/folders/details_sidebar.tsx +++ b/frontend/javascripts/dashboard/folders/details_sidebar.tsx @@ -167,7 +167,7 @@ function DatasetDetails({ selectedDataset }: { selectedDataset: APIDatasetCompac
Datastore
{fullDataset && ( - + {fullDataset.dataStore.name} )} @@ -176,7 +176,7 @@ function DatasetDetails({ selectedDataset }: { selectedDataset: APIDatasetCompac
ID
{fullDataset && ( - + )} @@ -430,7 +430,7 @@ function FolderDetails({ function FolderTeamTags({ folder }: { folder: Folder }) { if (folder.allowedTeamsCumulative.length === 0) { - return Administrators & Dataset Managers; + return Administrators & Dataset Managers; } const allowedTeamsById = _.keyBy(folder.allowedTeams, "id"); @@ -455,6 +455,7 @@ function FolderTeamTags({ folder }: { folder: Folder }) { textOverflow: "ellipsis", }} color={stringToColor(team.name)} + variant="outlined" > {team.name} {isCumulative ? "*" : ""} diff --git a/frontend/javascripts/dashboard/folders/folder_selection.tsx b/frontend/javascripts/dashboard/folders/folder_selection.tsx index 41326ec2d8e..d03779f5a67 100644 --- a/frontend/javascripts/dashboard/folders/folder_selection.tsx +++ b/frontend/javascripts/dashboard/folders/folder_selection.tsx @@ -55,7 +55,7 @@ export default function FolderSelection({ showSearch style={{ width: width || "100%" }} value={folderId || undefined} - dropdownStyle={{ maxHeight: 500, overflow: "auto" }} + styles={{ popup: { root: { maxHeight: 500, overflow: "auto" } } }} placeholder="Select Folder" treeNodeFilterProp={"title"} allowClear diff --git a/frontend/javascripts/dashboard/folders/metadata_table.tsx b/frontend/javascripts/dashboard/folders/metadata_table.tsx index 80369ae1bdf..8c765c31c35 100644 --- a/frontend/javascripts/dashboard/folders/metadata_table.tsx +++ b/frontend/javascripts/dashboard/folders/metadata_table.tsx @@ -81,7 +81,7 @@ const EmptyMetadataPlaceholder: React.FC = ({ addNewEntryMenuItems, }) => { return ( - +
- + Locked by unknown user. @@ -732,7 +732,7 @@ function AnnotationLockedByUserTag({ } else if (blockedByUser.id === activeUser.id) { content = ( - + Locked by you. Reload to edit. @@ -745,7 +745,7 @@ function AnnotationLockedByUserTag({ userName: blockingUserName, })} > - + Locked by {blockingUserName} @@ -766,7 +766,7 @@ function AnnotationLockedByOwnerTag(props: { annotationOwnerName: string; isOwne messages["tracing.read_only_mode_notification"](true, props.isOwner) + unlockHintForOwners; return ( - + Locked by {props.annotationOwnerName} diff --git a/frontend/javascripts/viewer/view/action-bar/create_animation_modal.tsx b/frontend/javascripts/viewer/view/action-bar/create_animation_modal.tsx index 44f0ee9af95..64b1b733264 100644 --- a/frontend/javascripts/viewer/view/action-bar/create_animation_modal.tsx +++ b/frontend/javascripts/viewer/view/action-bar/create_animation_modal.tsx @@ -395,7 +395,7 @@ function CreateAnimationModal(props: Props) { onChange={(ev) => setCameraPosition(ev.target.value)} optionType="default" > - + Camera circling around the dataset @@ -422,7 +422,7 @@ function CreateAnimationModal(props: Props) { onChange={(ev) => setMovieResolution(ev.target.value)} optionType="default" > - + Standard Definition (640 × 360) @@ -437,7 +437,7 @@ function CreateAnimationModal(props: Props) { Options - + setMeshesEnabled(ev.target.checked)} @@ -493,7 +493,7 @@ function CreateAnimationModal(props: Props) { {validationErrors.map((errorMessage) => (
  • {errorMessage}
    • diff --git a/frontend/javascripts/viewer/view/action-bar/dataset_rotation_popover_view.tsx b/frontend/javascripts/viewer/view/action-bar/dataset_rotation_popover_view.tsx index 868b9baa2b9..1900d893d3e 100644 --- a/frontend/javascripts/viewer/view/action-bar/dataset_rotation_popover_view.tsx +++ b/frontend/javascripts/viewer/view/action-bar/dataset_rotation_popover_view.tsx @@ -83,7 +83,7 @@ const PopoverContent: React.FC = () => {
    ); } diff --git a/frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx b/frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx index cf79f7f6536..24bed9ca9b6 100644 --- a/frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx +++ b/frontend/javascripts/viewer/view/action-bar/tracing_actions_view.tsx @@ -9,7 +9,7 @@ import { RollbackOutlined, SaveOutlined, } from "@ant-design/icons"; -import { Space, Tooltip } from "antd"; +import { Button, Flex, Tooltip } from "antd"; import type { SubMenuType } from "antd/es/menu/interface"; import messages from "messages"; import * as React from "react"; @@ -121,43 +121,62 @@ export function getLayoutMenu(props: LayoutMenuProps): SubMenuType { ), children: [ { - key: "new-layout", - style: { - display: "inline-block", - }, - onClick: addNewLayout, - title: "Add a new Layout", - icon: , - }, - { - key: "reset-layout", - style: { - display: "inline-block", - }, - onClick: onResetLayout, - title: "Reset Layout", - icon: , - }, - { - key: "autosave-layout", - style: { - display: "inline-block", - }, - onClick: () => setAutoSaveLayouts(!autoSaveLayouts), - title: `${autoSaveLayouts ? "Disable" : "Enable"} auto-saving of current layout`, - icon: autoSaveLayouts ? : , + key: "layout-actions", + type: "group", + label: ( + + +