Merge branch 'master' into virtual-remote-datasets

Author: frcroth

CHANGELOG.unreleased.md

@@ -19,6 +19,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Fixed
 - Improved efficiency of saving bounding box related changes. [#8492](https://github.com/scalableminds/webknossos/pull/8492)
 - When deleting a dataset, its caches are cleared, so that if a new dataset by the same name is uploaded afterwards, only new data is loaded. [#8638](https://github.com/scalableminds/webknossos/pull/8638)
+- Fixed the contrast of the WelcomeToast buttons. Updated `antd` to version `5.22`.[#8688](https://github.com/scalableminds/webknossos/pull/8688)
 - Fixed a race condition when starting proofreading with a split action. [#8676](https://github.com/scalableminds/webknossos/pull/8676)
 - Fixed that activating a mapping got stuck when a dataset was opened in "view" mode. [#8687](https://github.com/scalableminds/webknossos/pull/8687)
 

frontend/javascripts/admin/task/task_list_view.tsx

@@ -22,7 +22,8 @@ import { downloadTasksAsCSV } from "admin/task/task_create_form_view";
 import type { QueryObject, TaskFormFieldValues } from "admin/task/task_search_form";
 import TaskSearchForm from "admin/task/task_search_form";
 import UserSelectionComponent from "admin/user/user_selection_component";
-import { Alert, App, Button, Card, Input, Modal, Spin, type TableProps, Tag } from "antd";
+import { Alert, App, Button, Card, Input, Modal, Spin, Tag } from "antd";
+import type { ColumnType } from "antd/lib/table/interface";
 import { AsyncLink } from "components/async_clickables";
 import FixedExpandableTable from "components/fixed_expandable_table";
 import FormattedDate from "components/formatted_date";
@@ -238,7 +239,7 @@ function TaskListView({ initialFieldValues }: Props) {
     marginRight: 20,
   };
 
-  const columns: TableProps["columns"] = [
+  const columns: ColumnType<APITask>[] = [
     {
       title: "ID",
       dataIndex: "id",

frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx

@@ -1,7 +1,12 @@
 import { FileOutlined, FolderOpenOutlined, PlusOutlined, WarningOutlined } from "@ant-design/icons";
 import type { DatasetUpdater } from "admin/rest_api";
-import { Dropdown, type MenuProps, type TableProps, Tag, Tooltip } from "antd";
-import type { FilterValue, SorterResult, TablePaginationConfig } from "antd/lib/table/interface";
+import { Dropdown, type MenuProps, Tag, Tooltip } from "antd";
+import type {
+  ColumnType,
+  FilterValue,
+  SorterResult,
+  TablePaginationConfig,
+} from "antd/lib/table/interface";
 import classNames from "classnames";
 import FixedExpandableTable from "components/fixed_expandable_table";
 import FormattedDate from "components/formatted_date";
@@ -282,16 +287,17 @@ class DatasetRenderer {
     return DatasetRenderer.getRowKey(this.data);
   }
 
-  renderTypeColumn() {
+  renderTypeColumn(): React.ReactNode {
     return <FileOutlined style={{ fontSize: "18px" }} />;
   }
-  renderNameColumn() {
+  renderNameColumn(): React.ReactNode {
     const selectedLayerName: string | null =
       this.data.colorLayerNames[0] || this.data.segmentationLayerNames[0];
     const imgSrc = selectedLayerName
       ? `/api/datasets/${this.data.id}/layers/${selectedLayerName}/thumbnail?w=${2 * THUMBNAIL_SIZE}&h=${2 * THUMBNAIL_SIZE}`
       : "/assets/images/inactive-dataset-thumbnail.svg";
     const iconClassName = selectedLayerName ? "" : " icon-thumbnail";
+
     return (
       <>
         <Link to={`/datasets/${getReadableURLPart(this.data)}/view`} title="View Dataset">
@@ -322,7 +328,7 @@ class DatasetRenderer {
       </>
     );
   }
-  renderTags() {
+  renderTags(): React.ReactNode {
     return this.data.isActive ? (
       <DatasetTags
         dataset={this.data}
@@ -339,10 +345,10 @@ class DatasetRenderer {
       </Tooltip>
     );
   }
-  renderCreationDateColumn() {
+  renderCreationDateColumn(): React.ReactNode {
     return <FormattedDate timestamp={this.data.created} />;
   }
-  renderActionsColumn() {
+  renderActionsColumn(): React.ReactNode {
     return (
       <DatasetActionView
         dataset={this.data}
@@ -366,7 +372,7 @@ class FolderRenderer {
   getRowKey() {
     return FolderRenderer.getRowKey(this.data);
   }
-  renderNameColumn() {
+  renderNameColumn(): React.ReactNode {
     return (
       <>
         <img
@@ -381,10 +387,10 @@ class FolderRenderer {
       </>
     );
   }
-  renderCreationDateColumn() {
+  renderCreationDateColumn(): React.ReactNode {
     return null;
   }
-  renderActionsColumn() {
+  renderActionsColumn(): React.ReactNode {
     return this.datasetTable.getFolderSettingsActions(this.data);
   }
 }
@@ -463,7 +469,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
     return filteredByTags(filterByMode(filterByHasLayers(this.props.datasets)));
   }
 
-  renderEmptyText() {
+  renderEmptyText(): React.ReactNode {
     const maybeWarning =
       this.props.datasetFilteringMode !== "showAllDatasets" ? (
         <p>
@@ -501,7 +507,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
     setFolderIdForEditModal(folder.key);
   }
 
-  getFolderSettingsActions(folder: FolderItemWithName) {
+  getFolderSettingsActions(folder: FolderItemWithName): React.ReactNode {
     const { context } = this.props;
     const folderTreeContextMenuItems = generateSettingsForFolder(
       folder,
@@ -577,14 +583,14 @@ class DatasetTable extends React.PureComponent<Props, State> {
       selectedRowKeys = [FolderRenderer.getRowKey(context.selectedFolder as FolderItemWithName)];
     }
 
-    const columns: TableProps["columns"] = [
+    const columns: ColumnType<RowRenderer>[] = [
       {
         title: "Name",
         dataIndex: "name",
         key: "name",
         sorter: Utils.localeCompareBy<RowRenderer>((rowRenderer) => rowRenderer.data.name),
         sortOrder: sortedInfo.columnKey === "name" ? sortedInfo.order : undefined,
-        render: (_name: string, rowRenderer: RowRenderer) => rowRenderer.renderNameColumn(),
+        render: (_name: string, rowRenderer: RowRenderer, _index) => rowRenderer.renderNameColumn(),
       },
       {
         width: 180,

frontend/javascripts/dashboard/explorative_annotations_view.tsx

@@ -22,20 +22,9 @@ import {
   getReadableAnnotations,
   reOpenAnnotation,
 } from "admin/rest_api";
-import {
-  Button,
-  Card,
-  Col,
-  Input,
-  Modal,
-  Row,
-  Spin,
-  Table,
-  type TableProps,
-  Tag,
-  Tooltip,
-} from "antd";
+import { Button, Card, Col, Input, Modal, Row, Spin, Table, Tag, Tooltip } from "antd";
 import type { SearchProps } from "antd/lib/input";
+import type { ColumnType } from "antd/lib/table/interface";
 import { AsyncLink } from "components/async_clickables";
 import FormattedDate from "components/formatted_date";
 import TextWithDescription from "components/text_with_description";
@@ -653,7 +642,7 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
     }
 
     const disabledColor = { color: "var(--ant-color-text-disabled)" };
-    const columns: TableProps["columns"] = [
+    const columns: ColumnType<APIAnnotationInfo>[] = [
       {
         title: "ID",
         dataIndex: "id",

frontend/javascripts/theme.tsx

@@ -9,9 +9,10 @@ import { useEffect } from "react";
 import type { APIUser } from "types/api_types";
 import type { Theme } from "viewer/store";
 
-const ColorWKBlue = "#5660ff"; // WK ~blue/purple
+export const ColorWKBlue = "#5660ff"; // WK ~blue/purple
 const ColorWKLinkHover = "#a8b4ff"; // slightly brighter WK Blue
 const ColorWKDarkGrey = "#1f1f1f";
+export const ColorWKBlueZircon = "#59f8e8"; // WK Cyan
 const ColorWhite = "white";
 const ColorBlack = "black";
 const ColorDarkBg = "#383d48";

frontend/javascripts/viewer/view/left-border-tabs/layer_settings_tab.tsx

@@ -23,6 +23,7 @@ import {
   updateDatasetDefaultConfiguration,
 } from "admin/rest_api";
 import { Button, Col, Divider, Dropdown, type MenuProps, Modal, Row, Switch } from "antd";
+import type { SwitchChangeEventHandler } from "antd/es/switch";
 import classnames from "classnames";
 import FastTooltip from "components/fast_tooltip";
 import { HoverIconButton } from "components/hover_icon_button";
@@ -564,10 +565,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     return isOnlyGivenLayerVisible;
   };
 
-  getEnableDisableLayerSwitch = (
-    isDisabled: boolean,
-    onChange: (arg0: boolean, arg1: React.MouseEvent<HTMLButtonElement>) => void,
-  ) => (
+  getEnableDisableLayerSwitch = (isDisabled: boolean, onChange: SwitchChangeEventHandler) => (
     <FastTooltip title={isDisabled ? "Show" : "Hide"} placement="top">
       {/* This div is necessary for the tooltip to be displayed */}
       <div
@@ -637,7 +635,10 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
       this.props.onChangeLayer(layerName, "isDisabled", !isVisible);
     };
 
-    const onChange = (value: boolean, event: React.MouseEvent<HTMLButtonElement>) => {
+    const onChange = (
+      value: boolean,
+      event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,
+    ) => {
       if (!event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
         setSingleLayerVisibility(value);
         return;

frontend/javascripts/viewer/view/novel_user_experiences/welcome_toast.tsx

@@ -1,9 +1,16 @@
-import { App, Button } from "antd";
+import { App, Button, ConfigProvider } from "antd";
 import type { NotificationInstance } from "antd/es/notification/interface";
 import features from "features";
 import { useEffectOnlyOnce } from "libs/react_hooks";
 import { useWkSelector } from "libs/react_hooks";
 import UserLocalStorage from "libs/user_local_storage";
+import { ColorWKBlue, ColorWKBlueZircon, getAntdTheme } from "theme";
+
+const lightThemaWithCyanButton = {
+  ...getAntdTheme("light"),
+  token: { colorPrimary: ColorWKBlueZircon },
+  components: { Button: { primaryColor: ColorWKBlue } },
+};
 
 function showWelcomeToast(notification: NotificationInstance) {
   notification.open({
@@ -20,23 +27,25 @@ function showWelcomeToast(notification: NotificationInstance) {
         </p>
         <p>Try out the annotation features and upload your own data with a free account.</p>
         <div>
-          <Button type="default" href="/auth/signup" target="_blank" rel="noopener noreferrer">
-            Create a free account
-          </Button>
-          <span className="drawing-welcome-guy">
-            <Button
-              ghost
-              type="default"
-              href="https://webknossos.org/features"
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{
-                marginLeft: 12,
-              }}
-            >
-              Learn More
+          <ConfigProvider theme={lightThemaWithCyanButton}>
+            <Button type="primary" href="/auth/signup" target="_blank" rel="noopener noreferrer">
+              Create a free account
             </Button>
-          </span>
+            <span className="drawing-welcome-guy">
+              <Button
+                href="https://webknossos.org/features"
+                target="_blank"
+                rel="noopener noreferrer"
+                type="primary"
+                ghost
+                style={{
+                  marginLeft: 12,
+                }}
+              >
+                Learn More
+              </Button>
+            </span>
+          </ConfigProvider>
         </div>
       </div>
     ),

package.json

@@ -121,8 +121,8 @@
   },
   "dependencies": {
     "@airbrake/browser": "^2.1.7",
-    "@ant-design/colors": "^6.0.0",
-    "@ant-design/icons": "^5.4.0",
+    "@ant-design/colors": "^7.0.0",
+    "@ant-design/icons": "^5.5.0",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@fortawesome/fontawesome-free": "^5.15.4",
@@ -133,7 +133,7 @@
     "@tanstack/react-query-persist-client": "4.36.1",
     "@zip.js/zip.js": "^2.7.32",
     "ansi-to-react": "^6.1.6",
-    "antd": "5.18",
+    "antd": "5.22",
     "ball-morphology": "^0.1.0",
     "base64-js": "^1.2.1",
     "beautiful-react-hooks": "^3.11.1",