From b13eb03a30277b0067c01b550da913f7f36ffa6c Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Mon, 30 Jun 2025 09:53:30 +0200
Subject: [PATCH 1/9] WIP

---
 .../dataset/dataset_settings_context.tsx      |  48 ++
 .../dataset/dataset_settings_data_tab.tsx     |  15 +-
 .../dataset/dataset_settings_delete_tab.tsx   |  13 +-
 .../dataset/dataset_settings_provider.tsx     | 377 ++++++++++++++++
 .../dataset/dataset_settings_sharing_tab.tsx  |  14 +-
 .../dataset/dataset_settings_view.tsx         | 416 ++----------------
 .../dataset_settings_viewconfig_tab.tsx       |   5 +-
 frontend/javascripts/router.tsx               |  15 +-
 8 files changed, 483 insertions(+), 420 deletions(-)
 create mode 100644 frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx
 create mode 100644 frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx

diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx
new file mode 100644
index 00000000000..82a09e053a0
--- /dev/null
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx
@@ -0,0 +1,48 @@
+import type { FormInstance } from "antd";
+import { createContext, useContext } from "react";
+import type { APIDataSource, APIDataset } from "types/api_types";
+import type { DatasetConfiguration } from "viewer/store";
+import type { DatasetRotationAndMirroringSettings } from "./dataset_rotation_form_item";
+
+export type FormData = {
+  dataSource: APIDataSource;
+  dataSourceJson: string;
+  dataset: APIDataset;
+  defaultConfiguration: DatasetConfiguration;
+  defaultConfigurationLayersJson: string;
+  datasetRotation?: DatasetRotationAndMirroringSettings;
+};
+
+
+export type DatasetSettingsContextValue = {
+  form: FormInstance<FormData>;
+  isLoading: boolean;
+  hasUnsavedChanges: boolean;
+  dataset: APIDataset | null | undefined;
+  datasetId: string;
+  datasetDefaultConfiguration: DatasetConfiguration | null | undefined;
+  activeDataSourceEditMode: "simple" | "advanced";
+  savedDataSourceOnServer: APIDataSource | null | undefined;
+  isEditingMode: boolean;
+  onComplete: () => void;
+  onCancel: () => void;
+  handleSubmit: () => void;
+  handleCancel: () => void;
+  handleDataSourceEditModeChange: (activeEditMode: "simple" | "advanced") => void;
+  onValuesChange: (changedValues: FormData, allValues: FormData) => void;
+  getFormValidationSummary: () => Record<string, any>;
+};
+
+export const DatasetSettingsContext = createContext<DatasetSettingsContextValue | undefined>(
+  undefined,
+);
+
+export const useDatasetSettingsContext = () => {
+  const context = useContext(DatasetSettingsContext);
+  if (!context) {
+    throw new Error(
+      "useDatasetSettingsContext must be used within a DatasetSettingsProvider",
+    );
+  }
+  return context;
+};
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
index 9fb89dfb133..947351db34d 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
@@ -1,6 +1,5 @@
 import { CopyOutlined, DeleteOutlined } from "@ant-design/icons";
 import { getDatasetNameRules, layerNameRules } from "admin/dataset/dataset_components";
-import { useStartAndPollJob } from "admin/job/job_hooks";
 import { startFindLargestSegmentIdJob } from "admin/rest_api";
 import {
   Button,
@@ -16,6 +15,7 @@ import {
   Switch,
   Tooltip,
 } from "antd";
+import { useStartAndPollJob } from "admin/job/job_hooks";
 import {
   FormItemWithInfo,
   Hideable,
@@ -35,11 +35,12 @@ import { AllUnits, LongUnitToShortUnitMap, type Vector3 } from "viewer/constants
 import { getSupportedValueRangeForElementClass } from "viewer/model/bucket_data_handling/data_rendering_logic";
 import type { BoundingBoxObject } from "viewer/store";
 import { AxisRotationSettingForDataset } from "./dataset_rotation_form_item";
+import { useDatasetSettingsContext } from "./dataset_settings_context";
 
 const FormItem = Form.Item;
 
 export const syncDataSourceFields = (
-  form: FormInstance,
+  form: FormInstance, // Keep form as a prop for this utility function
   syncTargetTabKey: "simple" | "advanced",
   // Syncing the dataset name is optional as this is needed for the add remote view, but not for the edit view.
   // In the edit view, the datasource.id fields should never be changed and the backend will automatically ignore all changes to the id field.
@@ -78,16 +79,14 @@ export const syncDataSourceFields = (
 };
 
 export default function DatasetSettingsDataTab({
-  form,
-  activeDataSourceEditMode,
   onChange,
-  dataset,
 }: {
-  form: FormInstance;
-  activeDataSourceEditMode: "simple" | "advanced";
+  // Form is passed explicitly because syncDataSourceFields is a utility function
+  // that needs the form instance, and it's called from the parent.
+  // The rest of the props are now derived from context.
   onChange: (arg0: "simple" | "advanced") => void;
-  dataset?: APIDataset | null | undefined;
 }) {
+  const { dataset, form, activeDataSourceEditMode } = useDatasetSettingsContext();
   // Using the return value of useWatch for the `dataSource` var
   // yields outdated values. Therefore, the hook only exists for listening.
   Form.useWatch("dataSource", form);
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
index a18ab33ad2a..62a8f9b8e15 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
@@ -1,23 +1,20 @@
 import { useQueryClient } from "@tanstack/react-query";
-import { deleteDatasetOnDisk, getDataset } from "admin/rest_api";
+import { deleteDatasetOnDisk } from "admin/rest_api";
 import { Button } from "antd";
-import { useFetch } from "libs/react_helpers";
 import Toast from "libs/toast";
 import messages from "messages";
 import { useState } from "react";
 import { useHistory } from "react-router-dom";
+import { useDatasetSettingsContext } from "./dataset_settings_context";
 import { confirmAsync } from "./helper_components";
 
-type Props = {
-  datasetId: string;
-};
-
-const DatasetSettingsDeleteTab = ({ datasetId }: Props) => {
+const DatasetSettingsDeleteTab = () => {
+  const { dataset } = useDatasetSettingsContext();
   const [isDeleting, setIsDeleting] = useState(false);
   const queryClient = useQueryClient();
   const history = useHistory();
 
-  const dataset = useFetch(() => getDataset(datasetId), null, [datasetId]);
+  // const dataset = useFetch(() => getDataset(datasetId), null, [datasetId]);
 
   async function handleDeleteButtonClicked(): Promise<void> {
     if (!dataset) {
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
new file mode 100644
index 00000000000..fa80065696d
--- /dev/null
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
@@ -0,0 +1,377 @@
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  getDataset,
+  getDatasetDefaultConfiguration,
+  readDatasetDatasource,
+  sendAnalyticsEvent,
+  updateDatasetDatasource,
+  updateDatasetDefaultConfiguration,
+  updateDatasetPartial,
+  updateDatasetTeams,
+} from "admin/rest_api";
+import { Form } from "antd";
+import dayjs from "dayjs";
+import type { UnregisterCallback } from "history";
+import { handleGenericError } from "libs/error_handling";
+import Toast from "libs/toast";
+import { jsonStringify } from "libs/utils";
+import _ from "lodash";
+import messages from "messages";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { APIDataSource, APIDataset, MutableAPIDataset } from "types/api_types";
+import { enforceValidatedDatasetViewConfiguration } from "types/schemas/dataset_view_configuration_defaults";
+import {
+  EXPECTED_TRANSFORMATION_LENGTH,
+  doAllLayersHaveTheSameRotation,
+  getRotationSettingsFromTransformationIn90DegreeSteps,
+} from "viewer/model/accessors/dataset_layer_transformation_accessor";
+import type { DatasetConfiguration } from "viewer/store";
+import type { DatasetRotationAndMirroringSettings } from "./dataset_rotation_form_item";
+import {
+  DatasetSettingsContext,
+  type DatasetSettingsContextValue,
+} from "./dataset_settings_context";
+import { syncDataSourceFields } from "./dataset_settings_data_tab";
+import type { FormData } from "./dataset_settings_context";
+import { hasFormError } from "./helper_components";
+import useBeforeUnload from "./useBeforeUnload_hook";
+
+type DatasetSettingsProviderProps = {
+  children: React.ReactNode;
+  datasetId: string;
+  isEditingMode: boolean;
+  onComplete: () => void;
+  onCancel: () => void;
+};
+
+export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = ({
+  children,
+  datasetId,
+  isEditingMode,
+  onComplete,
+  onCancel,
+}) => {
+  const [form] = Form.useForm<FormData>();
+  const queryClient = useQueryClient();
+
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [dataset, setDataset] = useState<APIDataset | null | undefined>(null);
+  const [datasetDefaultConfiguration, setDatasetDefaultConfiguration] = useState<
+    DatasetConfiguration | null | undefined
+  >(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [activeDataSourceEditMode, setActiveDataSourceEditMode] = useState<"simple" | "advanced">(
+    "simple",
+  );
+  const [savedDataSourceOnServer, setSavedDataSourceOnServer] = useState<
+    APIDataSource | null | undefined
+  >(null);
+
+  const unblockRef = useRef<UnregisterCallback | null>(null);
+  const blockTimeoutIdRef = useRef<number | null>(null);
+
+  const unblockHistory = useCallback(() => {
+    window.onbeforeunload = null;
+
+    if (blockTimeoutIdRef.current != null) {
+      clearTimeout(blockTimeoutIdRef.current);
+      blockTimeoutIdRef.current = null;
+    }
+
+    if (unblockRef.current != null) {
+      unblockRef.current();
+      unblockRef.current = null;
+    }
+  }, []);
+
+  const fetchData = useCallback(async (): Promise<void> => {
+    try {
+      setIsLoading(true);
+      let fetchedDataset = await getDataset(datasetId);
+      const dataSource = await readDatasetDatasource(fetchedDataset);
+
+      setSavedDataSourceOnServer(dataSource);
+
+      if (dataSource == null) {
+        throw new Error("No datasource received from server.");
+      }
+
+      if (fetchedDataset.dataSource.status?.includes("Error")) {
+        const datasetClone = _.cloneDeep(fetchedDataset) as any as MutableAPIDataset;
+        datasetClone.dataSource.status = fetchedDataset.dataSource.status;
+        fetchedDataset = datasetClone as APIDataset;
+      }
+
+      form.setFieldsValue({
+        dataSourceJson: jsonStringify(dataSource),
+        dataset: {
+          name: fetchedDataset.name,
+          isPublic: fetchedDataset.isPublic || false,
+          description: fetchedDataset.description || undefined,
+          allowedTeams: fetchedDataset.allowedTeams || [],
+          sortingKey: dayjs(fetchedDataset.sortingKey),
+        },
+      });
+
+      form.setFieldsValue({
+        dataSource,
+      });
+
+      if (doAllLayersHaveTheSameRotation(dataSource.dataLayers)) {
+        const firstLayerTransformations = dataSource.dataLayers[0].coordinateTransformations;
+        let initialDatasetRotationSettings: DatasetRotationAndMirroringSettings;
+        if (
+          !firstLayerTransformations ||
+          firstLayerTransformations.length !== EXPECTED_TRANSFORMATION_LENGTH
+        ) {
+          const nulledSetting = { rotationInDegrees: 0, isMirrored: false };
+          initialDatasetRotationSettings = { x: nulledSetting, y: nulledSetting, z: nulledSetting };
+        } else {
+          initialDatasetRotationSettings = {
+            x: getRotationSettingsFromTransformationIn90DegreeSteps(
+              firstLayerTransformations[1],
+              "x",
+            ),
+            y: getRotationSettingsFromTransformationIn90DegreeSteps(
+              firstLayerTransformations[2],
+              "y",
+            ),
+            z: getRotationSettingsFromTransformationIn90DegreeSteps(
+              firstLayerTransformations[3],
+              "z",
+            ),
+          };
+        }
+        form.setFieldsValue({
+          datasetRotation: initialDatasetRotationSettings,
+        });
+      }
+
+      const fetchedDatasetDefaultConfiguration = await getDatasetDefaultConfiguration(datasetId);
+      enforceValidatedDatasetViewConfiguration(
+        fetchedDatasetDefaultConfiguration,
+        fetchedDataset,
+        true,
+      );
+      form.setFieldsValue({
+        defaultConfiguration: fetchedDatasetDefaultConfiguration,
+        defaultConfigurationLayersJson: JSON.stringify(
+          fetchedDatasetDefaultConfiguration.layers,
+          null,
+          "  ",
+        ),
+      });
+
+      setDatasetDefaultConfiguration(fetchedDatasetDefaultConfiguration);
+      setDataset(fetchedDataset);
+    } catch (error) {
+      handleGenericError(error as Error);
+    } finally {
+      setIsLoading(false);
+      form.validateFields();
+    }
+  }, [datasetId, form]);
+
+  const getFormValidationSummary = useCallback((): Record<string, any> => {
+    const err = form.getFieldsError();
+    const formErrors: Record<string, any> = {};
+
+    if (!err || !dataset) {
+      return formErrors;
+    }
+
+    const hasErr = hasFormError;
+
+    if (hasErr(err, "dataSource") || hasErr(err, "dataSourceJson")) {
+      formErrors.data = true;
+    }
+
+    if (hasErr(err, "dataset")) {
+      formErrors.general = true;
+    }
+
+    if (hasErr(err, "defaultConfiguration") || hasErr(err, "defaultConfigurationLayersJson")) {
+      formErrors.defaultConfig = true;
+    }
+
+    return formErrors;
+  }, [form, dataset]);
+
+  const didDatasourceChange = useCallback(
+    (dataSource: Record<string, any>) => {
+      return !_.isEqual(dataSource, savedDataSourceOnServer || {});
+    },
+    [savedDataSourceOnServer],
+  );
+
+  const didDatasourceIdChange = useCallback(
+    (dataSource: Record<string, any>) => {
+      const savedDatasourceId = savedDataSourceOnServer?.id;
+      if (!savedDatasourceId) {
+        return false;
+      }
+      return (
+        savedDatasourceId.name !== dataSource.id.name ||
+        savedDatasourceId.team !== dataSource.id.team
+      );
+    },
+    [savedDataSourceOnServer],
+  );
+
+  const isOnlyDatasourceIncorrectAndNotEdited = useCallback(() => {
+    const validationSummary = getFormValidationSummary();
+
+    if (_.size(validationSummary) === 1 && validationSummary.data) {
+      try {
+        const dataSource = JSON.parse(form.getFieldValue("dataSourceJson"));
+        const didNotEditDatasource = !didDatasourceChange(dataSource);
+        return didNotEditDatasource;
+      } catch (_e) {
+        return false;
+      }
+    }
+
+    return false;
+  }, [getFormValidationSummary, form, didDatasourceChange]);
+
+  const submitForm = useCallback(
+    async (formValues: FormData) => {
+      const datasetChangeValues = { ...formValues.dataset };
+
+      if (datasetChangeValues.sortingKey != null) {
+        datasetChangeValues.sortingKey = datasetChangeValues.sortingKey.valueOf();
+      }
+
+      const teamIds = formValues.dataset.allowedTeams.map((t) => t.id);
+      await updateDatasetPartial(datasetId, datasetChangeValues);
+
+      if (datasetDefaultConfiguration != null) {
+        await updateDatasetDefaultConfiguration(
+          datasetId,
+          _.extend({}, datasetDefaultConfiguration, formValues.defaultConfiguration, {
+            layers: JSON.parse(formValues.defaultConfigurationLayersJson),
+          }),
+        );
+      }
+
+      await updateDatasetTeams(datasetId, teamIds);
+      const dataSource = JSON.parse(formValues.dataSourceJson);
+
+      if (dataset != null && didDatasourceChange(dataSource)) {
+        if (didDatasourceIdChange(dataSource)) {
+          Toast.warning(messages["dataset.settings.updated_datasource_id_warning"]);
+        }
+        await updateDatasetDatasource(dataset.directoryName, dataset.dataStore.url, dataSource);
+        setSavedDataSourceOnServer(dataSource);
+      }
+
+      const verb = isEditingMode ? "updated" : "imported";
+      Toast.success(`Successfully ${verb} ${dataset?.name || datasetId}.`);
+      setHasUnsavedChanges(false);
+
+      if (dataset && queryClient) {
+        queryClient.invalidateQueries({
+          queryKey: ["datasetsByFolder", dataset.folderId],
+        });
+        queryClient.invalidateQueries({ queryKey: ["dataset", "search"] });
+      }
+
+      onComplete();
+    },
+    [
+      datasetId,
+      datasetDefaultConfiguration,
+      dataset,
+      didDatasourceChange,
+      didDatasourceIdChange,
+      isEditingMode,
+      queryClient,
+      onComplete,
+    ],
+  );
+
+  const handleValidationFailed = useCallback(
+    ({ values }: { values: FormData }) => {
+      const isOnlyDatasourceIncorrectAndNotEditedResult = isOnlyDatasourceIncorrectAndNotEdited();
+
+      if (!isOnlyDatasourceIncorrectAndNotEditedResult || !dataset) {
+        // TODO: Add logic to switch to problematic tab
+        console.warn("Validation failed, switching to problematic tab logic needed.");
+        Toast.warning(messages["dataset.import.invalid_fields"]);
+      } else {
+        submitForm(values);
+      }
+    },
+    [isOnlyDatasourceIncorrectAndNotEdited, dataset, submitForm],
+  );
+
+  const handleSubmit = useCallback(() => {
+    syncDataSourceFields(form, activeDataSourceEditMode === "simple" ? "advanced" : "simple");
+
+    const afterForceUpdateCallback = () => {
+      setTimeout(
+        () =>
+          form
+            .validateFields()
+            .then((formValues) => submitForm(formValues))
+            .catch((errorInfo) => handleValidationFailed(errorInfo)),
+        0,
+      );
+    };
+
+    setActiveDataSourceEditMode((prev) => prev);
+    setTimeout(afterForceUpdateCallback, 0);
+  }, [form, activeDataSourceEditMode, submitForm, handleValidationFailed]);
+
+  const onValuesChange = useCallback((_changedValues: FormData, _allValues: FormData) => {
+    setHasUnsavedChanges(true);
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    unblockHistory();
+    onCancel();
+  }, [unblockHistory, onCancel]);
+
+  const handleDataSourceEditModeChange = useCallback(
+    (activeEditMode: "simple" | "advanced") => {
+      syncDataSourceFields(form, activeEditMode);
+      form.validateFields();
+      setActiveDataSourceEditMode(activeEditMode);
+    },
+    [form],
+  );
+
+  useBeforeUnload(hasUnsavedChanges, messages["dataset.leave_with_unsaved_changes"]);
+
+  useEffect(() => {
+    fetchData();
+    sendAnalyticsEvent("open_dataset_settings", {
+      datasetName: dataset ? dataset.name : "Not found dataset",
+    });
+  }, [fetchData, dataset]);
+
+  const contextValue: DatasetSettingsContextValue = {
+    form,
+    isLoading,
+    hasUnsavedChanges,
+    dataset,
+    datasetId,
+    datasetDefaultConfiguration,
+    activeDataSourceEditMode,
+    savedDataSourceOnServer,
+    isEditingMode,
+    onComplete,
+    onCancel,
+    handleSubmit,
+    handleCancel,
+    handleDataSourceEditModeChange,
+    onValuesChange,
+    getFormValidationSummary,
+  };
+
+  return (
+    <DatasetSettingsContext.Provider value={contextValue}>
+      {children}
+    </DatasetSettingsContext.Provider>
+  );
+};
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
index 7a72e941cef..91505db7f1f 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
@@ -1,7 +1,7 @@
 import { CopyOutlined, InfoCircleOutlined, RetweetOutlined } from "@ant-design/icons";
 import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
 import { getDatasetSharingToken, revokeDatasetSharingToken } from "admin/rest_api";
-import { Button, Checkbox, Collapse, type FormInstance, Input, Space, Tooltip } from "antd";
+import { Button, Checkbox, Collapse, Input, Space, Tooltip } from "antd";
 import { AsyncButton } from "components/async_clickables";
 import { PricingEnforcedBlur } from "components/pricing_enforcers";
 import DatasetAccessListView from "dashboard/advanced_dataset/dataset_access_list_view";
@@ -10,19 +10,13 @@ import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { isUserAdminOrDatasetManager, isUserAdminOrTeamManager } from "libs/utils";
 import window from "libs/window";
-import type React from "react";
 import { useEffect, useState } from "react";
-import type { APIDataset } from "types/api_types";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
+import { useDatasetSettingsContext } from "./dataset_settings_context";
 import { FormItemWithInfo } from "./helper_components";
 
-type Props = {
-  form: FormInstance | null;
-  datasetId: string;
-  dataset: APIDataset | null | undefined;
-};
-
-export default function DatasetSettingsSharingTab({ form, datasetId, dataset }: Props) {
+export default function DatasetSettingsSharingTab() {
+  const { form, datasetId, dataset } = useDatasetSettingsContext();
   const [sharingToken, setSharingToken] = useState("");
   const activeUser = useWkSelector((state) => state.activeUser);
   const isDatasetManagerOrAdmin = isUserAdminOrDatasetManager(activeUser);
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
index 6f2ef048f99..1b5e08f5e94 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
@@ -1,230 +1,40 @@
 import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { useQueryClient } from "@tanstack/react-query";
-import {
-  getDataset,
-  getDatasetDefaultConfiguration,
-  readDatasetDatasource,
-  sendAnalyticsEvent,
-  updateDatasetDatasource,
-  updateDatasetDefaultConfiguration,
-  updateDatasetPartial,
-  updateDatasetTeams,
-} from "admin/rest_api";
 import { Alert, Button, Card, Form, Spin, Tabs, Tooltip } from "antd";
-import dayjs from "dayjs";
 import features from "features";
-import type { UnregisterCallback } from "history";
-import { handleGenericError } from "libs/error_handling";
+import { useDatasetSettingsContext } from "dashboard/dataset/dataset_settings_context";
+import DatasetSettingsDataTab from "dashboard/dataset/dataset_settings_data_tab";
+import DatasetSettingsDeleteTab from "dashboard/dataset/dataset_settings_delete_tab";
+import DatasetSettingsMetadataTab from "dashboard/dataset/dataset_settings_metadata_tab";
+import DatasetSettingsSharingTab from "dashboard/dataset/dataset_settings_sharing_tab";
 import { useWkSelector } from "libs/react_hooks";
-import Toast from "libs/toast";
-import { jsonStringify } from "libs/utils";
-import _ from "lodash";
-import messages from "messages";
-import { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback } from "react";
 import { Link } from "react-router-dom";
-import type { APIDataSource, APIDataset, MutableAPIDataset } from "types/api_types";
-import { enforceValidatedDatasetViewConfiguration } from "types/schemas/dataset_view_configuration_defaults";
+import DatasetSettingsViewConfigTab from "./dataset_settings_viewconfig_tab";
+import { Hideable } from "./helper_components";
 import { Unicode } from "viewer/constants";
+import messages from "messages";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
-import {
-  EXPECTED_TRANSFORMATION_LENGTH,
-  doAllLayersHaveTheSameRotation,
-  getRotationSettingsFromTransformationIn90DegreeSteps,
-} from "viewer/model/accessors/dataset_layer_transformation_accessor";
-import type { DatasetConfiguration } from "viewer/store";
-import type { DatasetRotationAndMirroringSettings } from "./dataset_rotation_form_item";
-import DatasetSettingsDataTab, { syncDataSourceFields } from "./dataset_settings_data_tab";
-import DatasetSettingsDeleteTab from "./dataset_settings_delete_tab";
-import DatasetSettingsMetadataTab from "./dataset_settings_metadata_tab";
-import DatasetSettingsSharingTab from "./dataset_settings_sharing_tab";
-import DatasetSettingsViewConfigTab from "./dataset_settings_viewconfig_tab";
-import { Hideable, hasFormError } from "./helper_components";
-import useBeforeUnload from "./useBeforeUnload_hook";
 
 const FormItem = Form.Item;
 const notImportedYetStatus = "Not imported yet.";
 
-type DatasetSettingsViewProps = {
-  datasetId: string;
-  isEditingMode: boolean;
-  onComplete: () => void;
-  onCancel: () => void;
-};
-
 type TabKey = "data" | "general" | "defaultConfig" | "sharing" | "deleteDataset";
 
-export type FormData = {
-  dataSource: APIDataSource;
-  dataSourceJson: string;
-  dataset: APIDataset;
-  defaultConfiguration: DatasetConfiguration;
-  defaultConfigurationLayersJson: string;
-  datasetRotation?: DatasetRotationAndMirroringSettings;
-};
-
-const DatasetSettingsView: React.FC<DatasetSettingsViewProps> = ({
-  datasetId,
-  isEditingMode,
-  onComplete,
-  onCancel,
-}) => {
-  const [form] = Form.useForm();
-  const queryClient = useQueryClient();
+const DatasetSettingsView: React.FC = () => {
+  const {
+    form,
+    isLoading,
+    isEditingMode,
+    dataset,
+    datasetId,
+    handleSubmit,
+    handleCancel,
+    handleDataSourceEditModeChange,
+    onValuesChange,
+    getFormValidationSummary,
+  } = useDatasetSettingsContext();
   const isUserAdmin = useWkSelector((state) => state.activeUser?.isAdmin || false);
-
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-  const [dataset, setDataset] = useState<APIDataset | null | undefined>(null);
-  const [datasetDefaultConfiguration, setDatasetDefaultConfiguration] = useState<
-    DatasetConfiguration | null | undefined
-  >(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [activeDataSourceEditMode, setActiveDataSourceEditMode] = useState<"simple" | "advanced">(
-    "simple",
-  );
-  const [activeTabKey, setActiveTabKey] = useState<TabKey>("data");
-  const [savedDataSourceOnServer, setSavedDataSourceOnServer] = useState<
-    APIDataSource | null | undefined
-  >(null);
-
-  const unblockRef = useRef<UnregisterCallback | null>(null);
-  const blockTimeoutIdRef = useRef<number | null>(null);
-
-  const unblockHistory = useCallback(() => {
-    window.onbeforeunload = null;
-
-    if (blockTimeoutIdRef.current != null) {
-      clearTimeout(blockTimeoutIdRef.current);
-      blockTimeoutIdRef.current = null;
-    }
-
-    if (unblockRef.current != null) {
-      unblockRef.current();
-      unblockRef.current = null;
-    }
-  }, []);
-
-  const fetchData = useCallback(async (): Promise<void> => {
-    try {
-      setIsLoading(true);
-      let fetchedDataset = await getDataset(datasetId);
-      const dataSource = await readDatasetDatasource(fetchedDataset);
-
-      // Ensure that zarr layers (which aren't inferred by the back-end) are still
-      // included in the inferred data source
-      setSavedDataSourceOnServer(dataSource);
-
-      if (dataSource == null) {
-        throw new Error("No datasource received from server.");
-      }
-
-      if (fetchedDataset.dataSource.status?.includes("Error")) {
-        // If the datasource-properties.json could not be parsed due to schema errors,
-        // we replace it with the version that is at least parsable.
-        const datasetClone = _.cloneDeep(fetchedDataset) as any as MutableAPIDataset;
-        // We are keeping the error message to display it to the user.
-        datasetClone.dataSource.status = fetchedDataset.dataSource.status;
-        fetchedDataset = datasetClone as APIDataset;
-      }
-
-      form.setFieldsValue({
-        dataSourceJson: jsonStringify(dataSource),
-        dataset: {
-          name: fetchedDataset.name,
-          isPublic: fetchedDataset.isPublic || false,
-          description: fetchedDataset.description || undefined,
-          allowedTeams: fetchedDataset.allowedTeams || [],
-          sortingKey: dayjs(fetchedDataset.sortingKey),
-        },
-      });
-
-      // This call cannot be combined with the previous setFieldsValue,
-      // since the layer values wouldn't be initialized correctly.
-      form.setFieldsValue({
-        dataSource,
-      });
-
-      // Retrieve the initial dataset rotation settings from the data source config.
-      if (doAllLayersHaveTheSameRotation(dataSource.dataLayers)) {
-        const firstLayerTransformations = dataSource.dataLayers[0].coordinateTransformations;
-        let initialDatasetRotationSettings: DatasetRotationAndMirroringSettings;
-        if (
-          !firstLayerTransformations ||
-          firstLayerTransformations.length !== EXPECTED_TRANSFORMATION_LENGTH
-        ) {
-          const nulledSetting = { rotationInDegrees: 0, isMirrored: false };
-          initialDatasetRotationSettings = { x: nulledSetting, y: nulledSetting, z: nulledSetting };
-        } else {
-          initialDatasetRotationSettings = {
-            // First transformation is a translation to the coordinate system origin.
-            x: getRotationSettingsFromTransformationIn90DegreeSteps(
-              firstLayerTransformations[1],
-              "x",
-            ),
-            y: getRotationSettingsFromTransformationIn90DegreeSteps(
-              firstLayerTransformations[2],
-              "y",
-            ),
-            z: getRotationSettingsFromTransformationIn90DegreeSteps(
-              firstLayerTransformations[3],
-              "z",
-            ),
-            // Fifth transformation is a translation back to the original position.
-          };
-        }
-        form.setFieldsValue({
-          datasetRotation: initialDatasetRotationSettings,
-        });
-      }
-
-      const fetchedDatasetDefaultConfiguration = await getDatasetDefaultConfiguration(datasetId);
-      enforceValidatedDatasetViewConfiguration(
-        fetchedDatasetDefaultConfiguration,
-        fetchedDataset,
-        true,
-      );
-      form.setFieldsValue({
-        defaultConfiguration: fetchedDatasetDefaultConfiguration,
-        defaultConfigurationLayersJson: JSON.stringify(
-          fetchedDatasetDefaultConfiguration.layers,
-          null,
-          "  ",
-        ),
-      });
-
-      setDatasetDefaultConfiguration(fetchedDatasetDefaultConfiguration);
-      setDataset(fetchedDataset);
-    } catch (error) {
-      handleGenericError(error as Error);
-    } finally {
-      setIsLoading(false);
-      form.validateFields();
-    }
-  }, [datasetId, form]);
-
-  const getFormValidationSummary = useCallback((): Record<string, any> => {
-    const err = form.getFieldsError();
-    const formErrors: Record<string, any> = {};
-
-    if (!err || !dataset) {
-      return formErrors;
-    }
-
-    const hasErr = hasFormError;
-
-    if (hasErr(err, "dataSource") || hasErr(err, "dataSourceJson")) {
-      formErrors.data = true;
-    }
-
-    if (hasErr(err, "dataset")) {
-      formErrors.general = true;
-    }
-
-    if (hasErr(err, "defaultConfiguration") || hasErr(err, "defaultConfigurationLayersJson")) {
-      formErrors.defaultConfig = true;
-    }
-
-    return formErrors;
-  }, [form, dataset]);
+  const [activeTabKey, setActiveTabKey] = React.useState<TabKey>("data");
 
   const switchToProblematicTab = useCallback(() => {
     const validationSummary = getFormValidationSummary();
@@ -235,8 +45,8 @@ const DatasetSettingsView: React.FC<DatasetSettingsViewProps> = ({
     }
 
     // Switch to the earliest, problematic tab
-    const problematicTab = _.find(
-      ["data", "general", "defaultConfig"],
+    const problematicTab =
+      ["data", "general", "defaultConfig"].find(
       (key) => validationSummary[key],
     );
 
@@ -245,171 +55,6 @@ const DatasetSettingsView: React.FC<DatasetSettingsViewProps> = ({
     }
   }, [getFormValidationSummary, activeTabKey]);
 
-  const didDatasourceChange = useCallback(
-    (dataSource: Record<string, any>) => {
-      return !_.isEqual(dataSource, savedDataSourceOnServer || {});
-    },
-    [savedDataSourceOnServer],
-  );
-
-  const didDatasourceIdChange = useCallback(
-    (dataSource: Record<string, any>) => {
-      const savedDatasourceId = savedDataSourceOnServer?.id;
-      if (!savedDatasourceId) {
-        return false;
-      }
-      return (
-        savedDatasourceId.name !== dataSource.id.name ||
-        savedDatasourceId.team !== dataSource.id.team
-      );
-    },
-    [savedDataSourceOnServer],
-  );
-
-  const isOnlyDatasourceIncorrectAndNotEdited = useCallback(() => {
-    const validationSummary = getFormValidationSummary();
-
-    if (_.size(validationSummary) === 1 && validationSummary.data) {
-      try {
-        const dataSource = JSON.parse(form.getFieldValue("dataSourceJson"));
-        const didNotEditDatasource = !didDatasourceChange(dataSource);
-        return didNotEditDatasource;
-      } catch (_e) {
-        return false;
-      }
-    }
-
-    return false;
-  }, [getFormValidationSummary, form, didDatasourceChange]);
-
-  const submit = useCallback(
-    async (formValues: FormData) => {
-      const datasetChangeValues = { ...formValues.dataset };
-
-      if (datasetChangeValues.sortingKey != null) {
-        datasetChangeValues.sortingKey = datasetChangeValues.sortingKey.valueOf();
-      }
-
-      const teamIds = formValues.dataset.allowedTeams.map((t) => t.id);
-      await updateDatasetPartial(datasetId, datasetChangeValues);
-
-      if (datasetDefaultConfiguration != null) {
-        await updateDatasetDefaultConfiguration(
-          datasetId,
-          _.extend({}, datasetDefaultConfiguration, formValues.defaultConfiguration, {
-            layers: JSON.parse(formValues.defaultConfigurationLayersJson),
-          }),
-        );
-      }
-
-      await updateDatasetTeams(datasetId, teamIds);
-      const dataSource = JSON.parse(formValues.dataSourceJson);
-
-      if (dataset != null && didDatasourceChange(dataSource)) {
-        if (didDatasourceIdChange(dataSource)) {
-          Toast.warning(messages["dataset.settings.updated_datasource_id_warning"]);
-        }
-        await updateDatasetDatasource(dataset.directoryName, dataset.dataStore.url, dataSource);
-        setSavedDataSourceOnServer(dataSource);
-      }
-
-      const verb = isEditingMode ? "updated" : "imported";
-      Toast.success(`Successfully ${verb} ${dataset?.name || datasetId}.`);
-      setHasUnsavedChanges(false);
-
-      if (dataset && queryClient) {
-        // Update new cache
-        queryClient.invalidateQueries({
-          queryKey: ["datasetsByFolder", dataset.folderId],
-        });
-        queryClient.invalidateQueries({ queryKey: ["dataset", "search"] });
-      }
-
-      onComplete();
-    },
-    [
-      datasetId,
-      datasetDefaultConfiguration,
-      dataset,
-      didDatasourceChange,
-      didDatasourceIdChange,
-      isEditingMode,
-      queryClient,
-      onComplete,
-    ],
-  );
-
-  const handleValidationFailed = useCallback(
-    ({ values }: { values: FormData }) => {
-      const isOnlyDatasourceIncorrectAndNotEditedResult = isOnlyDatasourceIncorrectAndNotEdited();
-
-      // Check whether the validation error was introduced or existed before
-      if (!isOnlyDatasourceIncorrectAndNotEditedResult || !dataset) {
-        switchToProblematicTab();
-        Toast.warning(messages["dataset.import.invalid_fields"]);
-      } else {
-        // If the validation error existed before, still attempt to update dataset
-        submit(values);
-      }
-    },
-    [isOnlyDatasourceIncorrectAndNotEdited, dataset, switchToProblematicTab, submit],
-  );
-
-  const handleSubmit = useCallback(() => {
-    // Ensure that all form fields are in sync
-    syncDataSourceFields(form, activeDataSourceEditMode === "simple" ? "advanced" : "simple");
-
-    const afterForceUpdateCallback = () => {
-      // Trigger validation manually, because fields may have been updated
-      // and defer the validation as it is done asynchronously by antd or so.
-      setTimeout(
-        () =>
-          form
-            .validateFields()
-            .then((formValues) => submit(formValues))
-            .catch((errorInfo) => handleValidationFailed(errorInfo)),
-        0,
-      );
-    };
-
-    // Need to force update of the SimpleAdvancedDataForm as removing a layer in the advanced tab does not update
-    // the form items in the simple tab (only the values are updated). The form items automatically update once
-    // the simple tab renders, but this is not the case when the user directly submits the changes.
-    // In functional components, we can trigger a re-render by updating state
-    setActiveDataSourceEditMode((prev) => prev); // Force re-render
-    setTimeout(afterForceUpdateCallback, 0);
-  }, [form, activeDataSourceEditMode, submit, handleValidationFailed]);
-
-  const onValuesChange = useCallback((_changedValues: FormData, _allValues: FormData) => {
-    setHasUnsavedChanges(true);
-  }, []);
-
-  const handleCancel = useCallback(() => {
-    unblockHistory();
-    onCancel();
-  }, [unblockHistory, onCancel]);
-
-  const handleDataSourceEditModeChange = useCallback(
-    (activeEditMode: "simple" | "advanced") => {
-      syncDataSourceFields(form, activeEditMode);
-      form.validateFields();
-      setActiveDataSourceEditMode(activeEditMode);
-    },
-    [form],
-  );
-
-  // Setup beforeunload handling
-  useBeforeUnload(hasUnsavedChanges, messages["dataset.leave_with_unsaved_changes"]);
-
-  // Initial data fetch and analytics
-  // biome-ignore lint/correctness/useExhaustiveDependencies: dataset dependency removed to avoid infinite loop
-  useEffect(() => {
-    fetchData();
-    sendAnalyticsEvent("open_dataset_settings", {
-      datasetName: dataset ? dataset.name : "Not found dataset",
-    });
-  }, [fetchData]);
-
   const getMessageComponents = useCallback(() => {
     if (dataset == null) {
       return null;
@@ -513,9 +158,6 @@ const DatasetSettingsView: React.FC<DatasetSettingsViewProps> = ({
           }
           <DatasetSettingsDataTab
             key="SimpleAdvancedDataForm"
-            dataset={dataset}
-            form={form}
-            activeDataSourceEditMode={activeDataSourceEditMode}
             onChange={handleDataSourceEditModeChange}
           />
         </Hideable>
@@ -528,7 +170,7 @@ const DatasetSettingsView: React.FC<DatasetSettingsViewProps> = ({
       forceRender: true,
       children: (
         <Hideable hidden={activeTabKey !== "sharing"}>
-          <DatasetSettingsSharingTab form={form} datasetId={datasetId} dataset={dataset} />
+          <DatasetSettingsSharingTab  />
         </Hideable>
       ),
     },
@@ -570,7 +212,7 @@ const DatasetSettingsView: React.FC<DatasetSettingsViewProps> = ({
       forceRender: true,
       children: (
         <Hideable hidden={activeTabKey !== "deleteDataset"}>
-          <DatasetSettingsDeleteTab datasetId={datasetId} />
+          <DatasetSettingsDeleteTab />
         </Hideable>
       ),
     });
@@ -598,7 +240,7 @@ const DatasetSettingsView: React.FC<DatasetSettingsViewProps> = ({
           <Card>
             <Tabs
               activeKey={activeTabKey}
-              onChange={(key) => setActiveTabKey(key as TabKey)}
+              onChange={(key) => setActiveTabKey(key as TabKey)} // Update active tab key
               items={tabs}
             />
           </Card>
@@ -611,7 +253,7 @@ const DatasetSettingsView: React.FC<DatasetSettingsViewProps> = ({
               {confirmString}
             </Button>
             {Unicode.NonBreakingSpace}
-            <Button onClick={handleCancel}>Cancel</Button>
+            <Button onClick={handleCancel}>Cancel</Button> {/* Use handleCancel from context */}
           </FormItem>
         </Spin>
       </Card>
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
index 3ac2277deb6..b608e6bcbfd 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
@@ -29,6 +29,7 @@ import { syncValidator, validateLayerViewConfigurationObjectJSON } from "types/v
 import { BLEND_MODES } from "viewer/constants";
 import type { DatasetConfiguration, DatasetLayerConfiguration } from "viewer/store";
 import ColorLayerOrderingTable from "./color_layer_ordering_component";
+import { useDatasetSettingsContext } from "./dataset_settings_context";
 import { FormItemWithInfo, jsonEditStyle } from "./helper_components";
 
 const FormItem = Form.Item;
@@ -42,6 +43,7 @@ export default function DatasetSettingsViewConfigTab(props: {
     Record<string, [string[], string[]]>
   >({});
 
+  const { dataset } = useDatasetSettingsContext();
   const validateDefaultMappings = useMemo(
     () => async (configStr: string, dataStoreURL: string, dataSourceId: APIDataSourceId) => {
       let config = {} as DatasetConfiguration["layers"];
@@ -92,7 +94,7 @@ export default function DatasetSettingsViewConfigTab(props: {
         throw new Error("The following mappings are invalid: " + errors.join("\n"));
       }
     },
-    [availableMappingsPerLayerCache],
+    [availableMappingsPerLayerCache, dataset], // Add dataset to dependencies for dataSourceId
   );
 
   const columns = [
@@ -303,6 +305,7 @@ export default function DatasetSettingsViewConfigTab(props: {
               {
                 validator: (_rule, config: string) =>
                   Promise.all([
+                    // Use dataset.dataSource.id for dataSourceId
                     validateLayerViewConfigurationObjectJSON(_rule, config),
                     dataStoreURL
                       ? validateDefaultMappings(config, dataStoreURL, dataSourceId)
diff --git a/frontend/javascripts/router.tsx b/frontend/javascripts/router.tsx
index 6176b7aa097..d57fc5b4044 100644
--- a/frontend/javascripts/router.tsx
+++ b/frontend/javascripts/router.tsx
@@ -75,6 +75,7 @@ import type { EmptyObject } from "types/globals";
 import { getDatasetIdOrNameFromReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { Store } from "viewer/singletons";
 import { CommandPalette } from "viewer/view/components/command_palette";
+import { DatasetSettingsProvider } from "dashboard/dataset/dataset_settings_provider";
 
 const { Content } = Layout;
 
@@ -546,12 +547,14 @@ class ReactRouter extends React.Component<Props> {
                     );
                   }
                   return (
-                    <DatasetSettingsView
-                      isEditingMode
-                      datasetId={datasetId || ""}
-                      onComplete={() => window.history.back()}
-                      onCancel={() => window.history.back()}
-                    />
+                    <DatasetSettingsProvider isEditingMode
+                        datasetId={datasetId || ""}
+                        onComplete={() => window.history.back()}
+                        onCancel={() => window.history.back()}>
+                      <DatasetSettingsView
+                        
+                      />
+                    </DatasetSettingsProvider>
                   );
                 }}
               />

From 81e8ac2b3ff76781008bdaea836ff15d176ec175 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Mon, 30 Jun 2025 10:17:39 +0200
Subject: [PATCH 2/9] fix loading loop

---
 .../dashboard/dataset/dataset_settings_provider.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
index fa80065696d..e526aabbb3e 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
@@ -84,7 +84,7 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
     }
   }, []);
 
-  const fetchData = useCallback(async (): Promise<void> => {
+  const fetchData = useCallback(async (): Promise<string | undefined> => {
     try {
       setIsLoading(true);
       let fetchedDataset = await getDataset(datasetId);
@@ -164,8 +164,10 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
 
       setDatasetDefaultConfiguration(fetchedDatasetDefaultConfiguration);
       setDataset(fetchedDataset);
+      return fetchedDataset.name;
     } catch (error) {
       handleGenericError(error as Error);
+      return undefined;
     } finally {
       setIsLoading(false);
       form.validateFields();
@@ -344,11 +346,12 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
   useBeforeUnload(hasUnsavedChanges, messages["dataset.leave_with_unsaved_changes"]);
 
   useEffect(() => {
-    fetchData();
-    sendAnalyticsEvent("open_dataset_settings", {
-      datasetName: dataset ? dataset.name : "Not found dataset",
+    fetchData().then((datasetName) => {
+      sendAnalyticsEvent("open_dataset_settings", {
+        datasetName: datasetName ?? "Not found dataset",
+      });
     });
-  }, [fetchData, dataset]);
+  }, [fetchData]);
 
   const contextValue: DatasetSettingsContextValue = {
     form,

From 36e3cabb0ee6650cde1049e094a566d2093aa391 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Mon, 30 Jun 2025 13:19:57 +0200
Subject: [PATCH 3/9] WIP rework dataset settings as individual routes

---
 .../dataset/dataset_settings_provider.tsx     |   8 +-
 .../dataset/dataset_settings_sharing_tab.tsx  | 126 +++++----
 .../dataset/dataset_settings_view.tsx         | 251 ++++++++++--------
 frontend/javascripts/router.tsx               |  23 +-
 4 files changed, 224 insertions(+), 184 deletions(-)

diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
index e526aabbb3e..b6f405dc5dd 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
@@ -40,16 +40,12 @@ type DatasetSettingsProviderProps = {
   children: React.ReactNode;
   datasetId: string;
   isEditingMode: boolean;
-  onComplete: () => void;
-  onCancel: () => void;
 };
 
 export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = ({
   children,
   datasetId,
   isEditingMode,
-  onComplete,
-  onCancel,
 }) => {
   const [form] = Form.useForm<FormData>();
   const queryClient = useQueryClient();
@@ -84,6 +80,10 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
     }
   }, []);
 
+  const onComplete = () => window.history.back();
+
+  const onCancel = () => window.history.back();
+
   const fetchData = useCallback(async (): Promise<string | undefined> => {
     try {
       setIsLoading(true);
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
index 91505db7f1f..5a01fd6e58f 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
@@ -1,19 +1,20 @@
 import { CopyOutlined, InfoCircleOutlined, RetweetOutlined } from "@ant-design/icons";
 import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
 import { getDatasetSharingToken, revokeDatasetSharingToken } from "admin/rest_api";
-import { Button, Checkbox, Collapse, Input, Space, Tooltip } from "antd";
+import { Button, Checkbox, Col, Collapse, Form, Input, Row, Space, Switch, Tooltip } from "antd";
 import { AsyncButton } from "components/async_clickables";
 import { PricingEnforcedBlur } from "components/pricing_enforcers";
 import DatasetAccessListView from "dashboard/advanced_dataset/dataset_access_list_view";
 import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
-import { useWkSelector } from "libs/react_hooks";
+import { useEffectOnlyOnce, useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { isUserAdminOrDatasetManager, isUserAdminOrTeamManager } from "libs/utils";
 import window from "libs/window";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
-import { FormItemWithInfo } from "./helper_components";
+import { SettingsTitle } from "admin/account/helpers/settings_title";
+import { SettingsCard } from "admin/account/helpers/settings_card";
 
 export default function DatasetSettingsSharingTab() {
   const { form, datasetId, dataset } = useDatasetSettingsContext();
@@ -21,28 +22,14 @@ export default function DatasetSettingsSharingTab() {
   const activeUser = useWkSelector((state) => state.activeUser);
   const isDatasetManagerOrAdmin = isUserAdminOrDatasetManager(activeUser);
 
-  const allowedTeamsComponent = (
-    <FormItemWithInfo
-      name={["dataset", "allowedTeams"]}
-      label="Additional team access permissions for this dataset"
-      info="The dataset can be seen by administrators, dataset managers and by teams that have access to the folder in which the dataset is located. If you want to grant additional teams access, define these teams here."
-      validateStatus="success"
-    >
-      <PricingEnforcedBlur requiredPricingPlan={PricingPlanEnum.Team}>
-        <TeamSelectionComponent mode="multiple" allowNonEditableTeams={isDatasetManagerOrAdmin} />
-      </PricingEnforcedBlur>
-    </FormItemWithInfo>
-  );
-
   async function fetch() {
     const newSharingToken = await getDatasetSharingToken(datasetId);
     setSharingToken(newSharingToken);
   }
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies(fetch):
-  useEffect(() => {
+  useEffectOnlyOnce(() => {
     fetch();
-  }, []);
+  });
 
   function handleSelectCode(event: React.MouseEvent<HTMLInputElement>): void {
     event.currentTarget.select();
@@ -68,7 +55,7 @@ export default function DatasetSettingsSharingTab() {
   function getSharingLink() {
     if (!form) return undefined;
 
-    const doesNeedToken = !form.getFieldValue("dataset.isPublic");
+    const doesNeedToken = !form.getFieldValue(["dataset", "isPublic"]);
     const tokenSuffix = `?token=${sharingToken}`;
     return `${window.location.origin}/datasets/${dataset ? getReadableURLPart(dataset) : datasetId}/view${doesNeedToken ? tokenSuffix : ""}`;
   }
@@ -77,22 +64,15 @@ export default function DatasetSettingsSharingTab() {
     if (!activeUser || !dataset) return undefined;
     if (!isUserAdminOrTeamManager(activeUser)) return undefined;
 
-    const panelLabel = (
-      <span>
-        All users with access permission to work with this dataset{" "}
-        <Tooltip title="Based on the specified team permissions and individual user roles. Any changes will only appear after pressing the Save button.">
-          <InfoCircleOutlined style={{ color: "gray" }} />
-        </Tooltip>
-      </span>
-    );
-
     return (
       <Collapse
         collapsible="header"
+        ghost
+        style={{ padding: 0 }}
         items={[
           {
-            label: panelLabel,
             key: "1",
+            label: "See all users",
             children: <DatasetAccessListView dataset={dataset} />,
           },
         ]}
@@ -100,27 +80,35 @@ export default function DatasetSettingsSharingTab() {
     );
   }
 
-  return form ? (
-    <div>
-      <FormItemWithInfo
-        name={["dataset", "isPublic"]}
-        label="Visibility"
-        info="Make your dataset public, for anonymous/unregistered users to access your dataset."
-        valuePropName="checked"
-      >
-        <Checkbox>Make dataset publicly accessible </Checkbox>
-      </FormItemWithInfo>
-      {allowedTeamsComponent}
-      <FormItemWithInfo
-        label="Sharing Link"
-        info={
-          <span>
-            The sharing link can be used to allow unregistered users to view this dataset. If the
-            dataset itself is not public, the link contains a secret token which ensures that the
-            dataset can be opened if you know the special link.
-          </span>
-        }
-      >
+  const sharingItems = [
+    {
+      title: "Make dataset publicly accessible",
+      explanation:
+        "Make your dataset public, for anonymous/unregistered users to access your dataset.",
+      value: (
+        <Form.Item name={["dataset", "isPublic"]} valuePropName="checked">
+          <Switch />
+        </Form.Item>
+      ),
+    },
+    {
+      title: "Additional team access permissions for this dataset",
+      explanation:
+        "The dataset can be seen by administrators, dataset managers and by teams that have access to the folder in which the dataset is located. If you want to grant additional teams access, define these teams here.",
+      value: (
+        <Form.Item name={["dataset", "allowedTeams"]} validateStatus="success">
+          <PricingEnforcedBlur requiredPricingPlan={PricingPlanEnum.Team}>
+            <TeamSelectionComponent
+              mode="multiple"
+              allowNonEditableTeams={isDatasetManagerOrAdmin}
+            />
+          </PricingEnforcedBlur>
+        </Form.Item>
+      ),
+    },
+    {
+      title: "Sharing Link",
+      value: (
         <Space.Compact>
           <Input
             value={getSharingLink()}
@@ -133,7 +121,7 @@ export default function DatasetSettingsSharingTab() {
           <Button onClick={handleCopySharingLink} icon={<CopyOutlined />}>
             Copy
           </Button>
-          {!form.getFieldValue("dataset.isPublic") && (
+          {!form.getFieldValue(["dataset", "isPublic"]) && (
             <Tooltip
               title={
                 <span>
@@ -148,8 +136,36 @@ export default function DatasetSettingsSharingTab() {
             </Tooltip>
           )}
         </Space.Compact>
-      </FormItemWithInfo>
-      {getUserAccessList()}
+      ),
+      explanation:
+        "The sharing link can be used to allow unregistered users to view this dataset. If the dataset itself is not public, the link contains a secret token which ensures that the dataset can be opened if you know the special link.",
+    },
+
+    {
+      title: "Users with access permission to work with this dataset",
+      explanation:
+        "Dataset access is based on the specified team permissions and individual user roles. Any changes will only appear after pressing the Save button.",
+      value: getUserAccessList(),
+    },
+  ];
+
+  return form ? (
+    <div>
+      <SettingsTitle
+        title="Sharing & Permissions"
+        description="Manage your personal information and preferences"
+      />
+      <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
+        {sharingItems.map((item) => (
+          <Col span={12} key={item.title}>
+            <SettingsCard
+              title={item.title}
+              description={item.value}
+              explanation={item.explanation}
+            />
+          </Col>
+        ))}
+      </Row>
     </div>
   ) : null;
 }
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
index 7d69d8909dd..9d20bf798e0 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
@@ -1,58 +1,113 @@
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { Alert, Button, Card, Form, Spin, Tabs, Tooltip } from "antd";
+import {
+  CodeSandboxOutlined,
+  DeleteOutlined,
+  ExclamationCircleOutlined,
+  FileTextOutlined,
+  SafetyOutlined,
+  SettingOutlined,
+  TeamOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { Alert, Breadcrumb, Button, Form, Layout, Menu, Tooltip } from "antd";
 import features from "features";
 import { useDatasetSettingsContext } from "dashboard/dataset/dataset_settings_context";
 import DatasetSettingsDataTab from "dashboard/dataset/dataset_settings_data_tab";
 import DatasetSettingsDeleteTab from "dashboard/dataset/dataset_settings_delete_tab";
 import DatasetSettingsMetadataTab from "dashboard/dataset/dataset_settings_metadata_tab";
 import DatasetSettingsSharingTab from "dashboard/dataset/dataset_settings_sharing_tab";
-import { useWkSelector } from "libs/react_hooks";
-import React, { useCallback } from "react";
-import { Link } from "react-router-dom";
 import DatasetSettingsViewConfigTab from "./dataset_settings_viewconfig_tab";
-import { Hideable } from "./helper_components";
+import { useWkSelector } from "libs/react_hooks";
+import type React from "react";
+import { useCallback } from "react";
+import { Link, Route, useHistory, useLocation, Switch } from "react-router-dom";
 import { Unicode } from "viewer/constants";
 import messages from "messages";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
+import type { MenuItemGroupType } from "antd/es/menu/interface";
 
+const { Sider, Content } = Layout;
 const FormItem = Form.Item;
 const notImportedYetStatus = "Not imported yet.";
 
-type TabKey = "data" | "general" | "defaultConfig" | "sharing" | "deleteDataset";
+const BREADCRUMB_LABELS = {
+  data: "Data Source",
+  sharing: "Sharing & Permissions",
+  metadata: "Metadata",
+  defaultConfig: "View Configuration",
+  delete: "Delete Dataset",
+};
+
+const MENU_ITEMS: MenuItemGroupType[] = [
+  {
+    label: "Dataset Settings",
+    type: "group",
+    children: [
+      {
+        key: "data",
+        icon: <CodeSandboxOutlined />,
+        label: "Data Source",
+      },
+      {
+        key: "sharing",
+        icon: <TeamOutlined />,
+        label: "Sharing & Permissions",
+      },
+      {
+        key: "metadata",
+        icon: <FileTextOutlined />,
+        label: "Metadata",
+      },
+      {
+        key: "defaultConfig",
+        icon: <SettingOutlined />,
+        label: "View Configuration",
+      },
+      {
+        key: "delete",
+        icon: <DeleteOutlined />,
+        label: "Delete",
+      },
+    ],
+  },
+];
+
+// if (isUserAdmin && features().allowDeleteDatasets) {
+//   MENU_ITEMS[0].children.push();
+// }
 
 const DatasetSettingsView: React.FC = () => {
   const {
     form,
-    isLoading,
     isEditingMode,
     dataset,
     datasetId,
     handleSubmit,
     handleCancel,
-    handleDataSourceEditModeChange,
     onValuesChange,
     getFormValidationSummary,
   } = useDatasetSettingsContext();
   const isUserAdmin = useWkSelector((state) => state.activeUser?.isAdmin || false);
-  const [activeTabKey, setActiveTabKey] = React.useState<TabKey>("data");
+  const location = useLocation();
+  const history = useHistory();
+  const selectedKey = location.pathname.split("/").filter(Boolean).pop() || "data";
 
-  const switchToProblematicTab = useCallback(() => {
-    const validationSummary = getFormValidationSummary();
+  // const switchToProblematicTab = useCallback(() => {
+  //   const validationSummary = getFormValidationSummary();
 
-    if (validationSummary[activeTabKey]) {
-      // Active tab is already problematic
-      return;
-    }
+  //   if (validationSummary[activeTabKey]) {
+  //     // Active tab is already problematic
+  //     return;
+  //   }
 
-    // Switch to the earliest, problematic tab
-    const problematicTab = ["data", "general", "defaultConfig"].find(
-      (key) => validationSummary[key],
-    );
+  //   // Switch to the earliest, problematic tab
+  //   const problematicTab = ["data", "general", "defaultConfig"].find(
+  //     (key) => validationSummary[key],
+  //   );
 
-    if (problematicTab) {
-      setActiveTabKey(problematicTab as TabKey);
-    }
-  }, [getFormValidationSummary, activeTabKey]);
+  //   if (problematicTab) {
+  //     setActiveTabKey(problematicTab as TabKey);
+  //   }
+  // }, [getFormValidationSummary, activeTabKey]);
 
   const getMessageComponents = useCallback(() => {
     if (dataset == null) {
@@ -144,105 +199,65 @@ const DatasetSettingsView: React.FC = () => {
     </Tooltip>
   );
 
-  const tabs = [
+  const breadcrumbItems = [
     {
-      label: <span> Data {formErrors.data ? errorIcon : ""}</span>,
-      key: "data",
-      forceRender: true,
-      children: (
-        <Hideable hidden={activeTabKey !== "data"}>
-          {
-            // We use the Hideable component here to avoid that the user can "tab"
-            // to hidden form elements.
-          }
-          <DatasetSettingsDataTab
-            key="SimpleAdvancedDataForm"
-            onChange={handleDataSourceEditModeChange}
-          />
-        </Hideable>
-      ),
+      title: "Dataset Settings",
     },
-
     {
-      label: <span>Sharing & Permissions {formErrors.general ? errorIcon : null}</span>,
-      key: "sharing",
-      forceRender: true,
-      children: (
-        <Hideable hidden={activeTabKey !== "sharing"}>
-          <DatasetSettingsSharingTab />
-        </Hideable>
-      ),
-    },
-
-    {
-      label: <span>Metadata</span>,
-      key: "general",
-      forceRender: true,
-      children: (
-        <Hideable hidden={activeTabKey !== "general"}>
-          <DatasetSettingsMetadataTab />
-        </Hideable>
-      ),
-    },
-
-    {
-      label: <span> View Configuration {formErrors.defaultConfig ? errorIcon : ""}</span>,
-      key: "defaultConfig",
-      forceRender: true,
-      children: (
-        <Hideable hidden={activeTabKey !== "defaultConfig"}>
-          {
-            maybeDataSourceId ? (
-              <DatasetSettingsViewConfigTab
-                dataSourceId={maybeDataSourceId}
-                dataStoreURL={dataset?.dataStore.url}
-              />
-            ) : null /* null case should never be rendered as tabs are only rendered when the dataset is loaded. */
-          }
-        </Hideable>
-      ),
+      title: BREADCRUMB_LABELS[selectedKey as keyof typeof BREADCRUMB_LABELS],
     },
   ];
 
-  if (isUserAdmin && features().allowDeleteDatasets)
-    tabs.push({
-      label: <span> Delete Dataset </span>,
-      key: "deleteDataset",
-      forceRender: true,
-      children: (
-        <Hideable hidden={activeTabKey !== "deleteDataset"}>
-          <DatasetSettingsDeleteTab />
-        </Hideable>
-      ),
-    });
-
   return (
-    <Form
-      form={form}
-      className="row container dataset-import"
-      onFinish={handleSubmit}
-      onFinishFailed={handleSubmit}
-      onValuesChange={onValuesChange}
-      layout="vertical"
+    <Layout
+      style={{ minHeight: "calc(100vh - 64px)", backgroundColor: "var(--ant-layout-body-bg)" }}
     >
-      <Card
-        bordered={false}
-        title={
-          <h3>
-            {titleString} Dataset {datasetLinkOrName}
-          </h3>
-        }
-      >
-        <Spin size="large" spinning={isLoading}>
-          {getMessageComponents()}
-
-          <Card>
-            <Tabs
-              activeKey={activeTabKey}
-              onChange={(key) => setActiveTabKey(key as TabKey)} // Update active tab key
-              items={tabs}
+      <Sider width={200}>
+        <Menu
+          mode="inline"
+          selectedKeys={[selectedKey]}
+          style={{ height: "100%", padding: 24 }}
+          items={MENU_ITEMS}
+          onClick={({ key }) => history.push(`/datasets/${datasetId}/edit/${key}`)}
+        />
+      </Sider>
+      <Content style={{ padding: "32px", minHeight: 280, maxWidth: 1000 }}>
+        <Breadcrumb style={{ marginBottom: "16px" }} items={breadcrumbItems} />
+        {getMessageComponents()}
+        <Form
+          form={form}
+          onFinish={handleSubmit}
+          onFinishFailed={handleSubmit}
+          onValuesChange={onValuesChange}
+          layout="vertical"
+        >
+          <Switch>
+            <Route
+              path="/datasets/:datasetNameAndId/edit/data"
+              component={DatasetSettingsDataTab}
+            />
+            <Route
+              path="/datasets/:datasetNameAndId/edit/sharing"
+              component={DatasetSettingsSharingTab}
+            />
+            <Route
+              path="/datasets/:datasetNameAndId/edit/metadata"
+              component={DatasetSettingsMetadataTab}
+            />
+            <Route
+              path="/datasets/:datasetNameAndId/edit/defaultConfig"
+              render={() => (
+                <DatasetSettingsViewConfigTab
+                  dataSourceId={maybeDataSourceId}
+                  dataStoreURL={dataset?.dataStore.url}
+                />
+              )}
+            />
+            <Route
+              path="/datasets/:datasetNameAndId/edit/delete"
+              component={DatasetSettingsDeleteTab}
             />
-          </Card>
+          </Switch>
           <FormItem
             style={{
               marginTop: 8,
@@ -252,11 +267,11 @@ const DatasetSettingsView: React.FC = () => {
               {confirmString}
             </Button>
             {Unicode.NonBreakingSpace}
-            <Button onClick={handleCancel}>Cancel</Button> {/* Use handleCancel from context */}
+            <Button onClick={handleCancel}>Cancel</Button>
           </FormItem>
-        </Spin>
-      </Card>
-    </Form>
+        </Form>
+      </Content>
+    </Layout>
   );
 };
 
diff --git a/frontend/javascripts/router.tsx b/frontend/javascripts/router.tsx
index a6cab0ae08c..34cca7db77c 100644
--- a/frontend/javascripts/router.tsx
+++ b/frontend/javascripts/router.tsx
@@ -546,13 +546,22 @@ class ReactRouter extends React.Component<Props> {
                     );
                   }
                   return (
-                    <DatasetSettingsProvider isEditingMode
-                        datasetId={datasetId || ""}
-                        onComplete={() => window.history.back()}
-                        onCancel={() => window.history.back()}>
-                      <DatasetSettingsView
-                        
-                      />
+                    <DatasetSettingsProvider isEditingMode datasetId={datasetId || ""}>
+                      <DatasetSettingsView />
+                    </DatasetSettingsProvider>
+                  );
+                }}
+              />
+              <SecuredRouteWithErrorBoundary
+                isAuthenticated={isAuthenticated}
+                path="/datasets/:datasetNameAndId/edit/:tab"
+                render={({ match }: ContextRouter) => {
+                  const { datasetId } = getDatasetIdOrNameFromReadableURLPart(
+                    match.params.datasetNameAndId,
+                  );
+                  return (
+                    <DatasetSettingsProvider isEditingMode datasetId={datasetId || ""}>
+                      <DatasetSettingsView />
                     </DatasetSettingsProvider>
                   );
                 }}

From 92e78b8e8f40ab591b937aacfc844b848d072f97 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Mon, 30 Jun 2025 14:28:40 +0200
Subject: [PATCH 4/9] renamed Settingscard props

---
 .../admin/account/account_auth_token_view.tsx |  20 ++--
 .../admin/account/account_password_view.tsx   |  10 +-
 .../admin/account/account_profile_view.tsx    |  22 ++--
 .../admin/account/helpers/settings_card.tsx   |  20 ++--
 .../organization_danger_zone_view.tsx         |   2 +-
 .../organization_notifications_view.tsx       |  12 +-
 .../organization_overview_view.tsx            |  24 ++--
 .../dataset/dataset_settings_metadata_tab.tsx |  71 ++++++-----
 .../dataset/dataset_settings_sharing_tab.tsx  | 112 +++++++-----------
 .../dataset/dataset_settings_view.tsx         |  15 ++-
 10 files changed, 148 insertions(+), 160 deletions(-)

diff --git a/frontend/javascripts/admin/account/account_auth_token_view.tsx b/frontend/javascripts/admin/account/account_auth_token_view.tsx
index e1bb6f77358..e5cde44f217 100644
--- a/frontend/javascripts/admin/account/account_auth_token_view.tsx
+++ b/frontend/javascripts/admin/account/account_auth_token_view.tsx
@@ -4,7 +4,7 @@ import { Button, Col, Row, Spin, Typography } from "antd";
 import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { useEffect, useState } from "react";
-import { SettingsCard } from "./helpers/settings_card";
+import { SettingsCard, type SettingsCardProps } from "./helpers/settings_card";
 import { SettingsTitle } from "./helpers/settings_title";
 
 const { Text } = Typography;
@@ -41,10 +41,10 @@ function AccountAuthTokenView() {
     }
   };
 
-  const APIitems = [
+  const APIitems: SettingsCardProps[] = [
     {
       title: "Auth Token",
-      value: (
+      content: (
         <Text code copyable>
           {currentToken}
         </Text>
@@ -52,9 +52,9 @@ function AccountAuthTokenView() {
     },
     {
       title: "Token Revocation",
-      explanation:
+      tooltip:
         "Revoke your token if it has been compromised or if you suspect someone else has gained access to it. This will invalidate all active sessions.",
-      value: (
+      content: (
         <Button icon={<SwapOutlined />} type="primary" ghost onClick={handleRevokeToken}>
           Revoke and Generate New Token
         </Button>
@@ -64,7 +64,7 @@ function AccountAuthTokenView() {
       ? [
           {
             title: "Organization ID",
-            value: (
+            content: (
               <Text code copyable>
                 {activeUser.organization}
               </Text>
@@ -74,7 +74,7 @@ function AccountAuthTokenView() {
       : []),
     {
       title: "API Documentation",
-      value: (
+      content: (
         <a href="https://docs.webknossos.org/webknossos-py/index.html">
           Read the docs <ExportOutlined />
         </a>
@@ -92,11 +92,7 @@ function AccountAuthTokenView() {
         <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
           {APIitems.map((item) => (
             <Col span={12} key={item.title}>
-              <SettingsCard
-                title={item.title}
-                description={item.value}
-                explanation={item.explanation}
-              />
+              <SettingsCard title={item.title} content={item.content} tooltip={item.tooltip} />
             </Col>
           ))}
         </Row>
diff --git a/frontend/javascripts/admin/account/account_password_view.tsx b/frontend/javascripts/admin/account/account_password_view.tsx
index 9d74a6e6546..ec05ecaf633 100644
--- a/frontend/javascripts/admin/account/account_password_view.tsx
+++ b/frontend/javascripts/admin/account/account_password_view.tsx
@@ -7,7 +7,7 @@ import { useState } from "react";
 import { useHistory } from "react-router-dom";
 import { logoutUserAction } from "viewer/model/actions/user_actions";
 import Store from "viewer/store";
-import { SettingsCard } from "./helpers/settings_card";
+import { SettingsCard, type SettingsCardProps } from "./helpers/settings_card";
 import { SettingsTitle } from "./helpers/settings_title";
 const FormItem = Form.Item;
 const { Password } = Input;
@@ -155,10 +155,10 @@ function AccountPasswordView() {
     setResetPasswordVisible(true);
   }
 
-  const passKeyList = [
+  const passKeyList: SettingsCardProps[] = [
     {
       title: "Coming soon",
-      value: "Passwordless login with passkeys is coming soon",
+      content: "Passwordless login with passkeys is coming soon",
       // action: <Button type="default" shape="circle" icon={<DeleteOutlined />} size="small" />,
       action: undefined,
     },
@@ -171,7 +171,7 @@ function AccountPasswordView() {
         <Col span={12}>
           <SettingsCard
             title="Password"
-            description={getPasswordComponent()}
+            content={getPasswordComponent()}
             action={
               <Button
                 type="default"
@@ -189,7 +189,7 @@ function AccountPasswordView() {
       <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
         {passKeyList.map((item) => (
           <Col span={12} key={item.title}>
-            <SettingsCard title={item.title} description={item.value} action={item.action} />
+            <SettingsCard title={item.title} content={item.content} action={item.action} />
           </Col>
         ))}
       </Row>
diff --git a/frontend/javascripts/admin/account/account_profile_view.tsx b/frontend/javascripts/admin/account/account_profile_view.tsx
index 7967bcd00a2..c5eaa4d7797 100644
--- a/frontend/javascripts/admin/account/account_profile_view.tsx
+++ b/frontend/javascripts/admin/account/account_profile_view.tsx
@@ -9,7 +9,7 @@ import { formatUserName } from "viewer/model/accessors/user_accessor";
 import { setThemeAction } from "viewer/model/actions/ui_actions";
 import { setActiveUserAction } from "viewer/model/actions/user_actions";
 import Store from "viewer/store";
-import { SettingsCard } from "./helpers/settings_card";
+import { SettingsCard, type SettingsCardProps } from "./helpers/settings_card";
 import { SettingsTitle } from "./helpers/settings_title";
 
 function AccountProfileView() {
@@ -56,29 +56,29 @@ function AccountProfileView() {
     },
   ];
 
-  const profileItems = [
+  const profileItems: SettingsCardProps[] = [
     {
       title: "Name",
-      value: formatUserName(activeUser, activeUser),
+      content: formatUserName(activeUser, activeUser),
     },
     {
       title: "Email",
-      value: activeUser.email,
+      content: activeUser.email,
     },
     {
       title: "Organization",
-      value: activeOrganization?.name || activeUser.organization,
+      content: activeOrganization?.name || activeUser.organization,
     },
     {
       title: "Role",
-      value: role,
-      explanation: (
+      content: role,
+      tooltip: (
         <a href="https://docs.webknossos.org/webknossos/users/access_rights.html">Learn More</a>
       ),
     },
     {
       title: "Theme",
-      value: (
+      content: (
         <Dropdown.Button menu={{ items: themeItems }} trigger={["click"]} icon={<DownOutlined />}>
           {themeItems.find((item) => item.key === selectedTheme)?.label}
         </Dropdown.Button>
@@ -95,11 +95,7 @@ function AccountProfileView() {
       <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
         {profileItems.map((item) => (
           <Col span={12} key={item.title}>
-            <SettingsCard
-              title={item.title}
-              description={item.value}
-              explanation={item.explanation}
-            />
+            <SettingsCard title={item.title} content={item.content} tooltip={item.tooltip} />
           </Col>
         ))}
       </Row>
diff --git a/frontend/javascripts/admin/account/helpers/settings_card.tsx b/frontend/javascripts/admin/account/helpers/settings_card.tsx
index 62966cd5dad..438e1b65701 100644
--- a/frontend/javascripts/admin/account/helpers/settings_card.tsx
+++ b/frontend/javascripts/admin/account/helpers/settings_card.tsx
@@ -1,14 +1,14 @@
 import { InfoCircleOutlined } from "@ant-design/icons";
-import { Card, Flex, Popover, Typography } from "antd";
+import { Card, Flex, Tooltip, Typography } from "antd";
 
-interface SettingsCardProps {
+export type SettingsCardProps = {
   title: string;
-  description: React.ReactNode;
-  explanation?: React.ReactNode;
+  content: React.ReactNode;
+  tooltip?: React.ReactNode;
   action?: React.ReactNode;
-}
+};
 
-export function SettingsCard({ title, description, explanation, action }: SettingsCardProps) {
+export function SettingsCard({ title, content, tooltip, action }: SettingsCardProps) {
   return (
     <Card style={{ minHeight: 105 }}>
       <Typography.Text type="secondary" style={{ fontSize: 14 }}>
@@ -16,16 +16,16 @@ export function SettingsCard({ title, description, explanation, action }: Settin
           <div>
             {title}
 
-            {explanation != null ? (
-              <Popover content={explanation}>
+            {tooltip != null ? (
+              <Tooltip title={tooltip}>
                 <InfoCircleOutlined style={{ marginLeft: 4 }} />
-              </Popover>
+              </Tooltip>
             ) : null}
           </div>
           {action}
         </Flex>
       </Typography.Text>
-      <div style={{ fontSize: 16, marginTop: 4 }}>{description}</div>
+      <div style={{ fontSize: 16, marginTop: 4 }}>{content}</div>
     </Card>
   );
 }
diff --git a/frontend/javascripts/admin/organization/organization_danger_zone_view.tsx b/frontend/javascripts/admin/organization/organization_danger_zone_view.tsx
index 3f3646e3f2f..fe63efa0ec9 100644
--- a/frontend/javascripts/admin/organization/organization_danger_zone_view.tsx
+++ b/frontend/javascripts/admin/organization/organization_danger_zone_view.tsx
@@ -50,7 +50,7 @@ export function OrganizationDangerZoneView({ organization }: { organization: API
       />
       <SettingsCard
         title="Danger Zone"
-        description={
+        content={
           <Button
             danger
             loading={isDeleting}
diff --git a/frontend/javascripts/admin/organization/organization_notifications_view.tsx b/frontend/javascripts/admin/organization/organization_notifications_view.tsx
index f903c7e29f2..5a095bfadf5 100644
--- a/frontend/javascripts/admin/organization/organization_notifications_view.tsx
+++ b/frontend/javascripts/admin/organization/organization_notifications_view.tsx
@@ -94,22 +94,22 @@ export function OrganizationNotificationsView({ organization }: { organization:
         <Col span={12}>
           <SettingsCard
             title="WEBKNOSSOS Plan & Subscription"
-            explanation="Get notified when your WK subscription is about to expire or reach user and storage limits."
-            description={ownerEmail}
+            tooltip="Get notified when your WK subscription is about to expire or reach user and storage limits."
+            content={ownerEmail}
           />
         </Col>
         <Col span={12}>
           <SettingsCard
             title="AI Job Completion"
-            explanation="Get notified when a background conversion or AI job is completed."
-            description="Users are notified individually."
+            tooltip="Get notified when a background conversion or AI job is completed."
+            content="Users are notified individually."
           />
         </Col>
         <Col span={12}>
           <SettingsCard
             title="New User Signup"
-            explanation="Get notified when a new user signs up to your organization."
-            description={getNewUserNotificationsSettings()}
+            tooltip="Get notified when a new user signs up to your organization."
+            content={getNewUserNotificationsSettings()}
           />
         </Col>
       </Row>
diff --git a/frontend/javascripts/admin/organization/organization_overview_view.tsx b/frontend/javascripts/admin/organization/organization_overview_view.tsx
index 8f3013555c4..cab0da05223 100644
--- a/frontend/javascripts/admin/organization/organization_overview_view.tsx
+++ b/frontend/javascripts/admin/organization/organization_overview_view.tsx
@@ -4,11 +4,11 @@ import { getPricingPlanStatus, getUsers, updateOrganization } from "admin/rest_a
 import { Button, Col, Row, Spin, Tooltip, Typography } from "antd";
 import { formatCountToDataAmountUnit } from "libs/format_utils";
 import Toast from "libs/toast";
-import { useEffect, useState } from "react";
+import { type Key, useEffect, useState } from "react";
 import type { APIOrganization, APIPricingPlanStatus } from "types/api_types";
 import { setActiveOrganizationAction } from "viewer/model/actions/organization_actions";
 import { Store } from "viewer/singletons";
-import { SettingsCard } from "../account/helpers/settings_card";
+import { SettingsCard, type SettingsCardProps } from "../account/helpers/settings_card";
 import {
   PlanAboutToExceedAlert,
   PlanExceededAlert,
@@ -114,11 +114,11 @@ export function OrganizationOverviewView({ organization }: { organization: APIOr
     </Tooltip>
   );
 
-  const orgaStats = [
+  const orgaStats: (SettingsCardProps & { key: Key })[] = [
     {
       key: "name",
       title: "Name",
-      value: (
+      content: (
         <Typography.Text
           editable={{
             onChange: setOrganizationName,
@@ -131,13 +131,13 @@ export function OrganizationOverviewView({ organization }: { organization: APIOr
     {
       key: "owner",
       title: "Owner",
-      value: organization.ownerName,
+      content: organization.ownerName,
     },
     {
       key: "plan",
       title: "Current Plan",
-      value: organization.pricingPlan,
-      explanation: (
+      content: organization.pricingPlan,
+      tooltip: (
         <a href="https://webknossos.org/pricing" target="_blank" rel="noopener noreferrer">
           Compare all plans
         </a>
@@ -146,20 +146,20 @@ export function OrganizationOverviewView({ organization }: { organization: APIOr
     {
       key: "users",
       title: "Users",
-      value: `${activeUsersCount} / ${maxUsersCountLabel}`,
+      content: `${activeUsersCount} / ${maxUsersCountLabel}`,
       action: upgradeUsersAction,
     },
     {
       key: "storage",
       title: "Storage",
-      value: `${usedStorageLabel} / ${includedStorageLabel}`,
+      content: `${usedStorageLabel} / ${includedStorageLabel}`,
       action: upgradeStorageAction,
     },
 
     {
       key: "credits",
       title: "WEBKNOSSOS Credits",
-      value: organization.creditBalance || "N/A",
+      content: organization.creditBalance || "N/A",
       action: buyMoreCreditsAction,
     },
   ];
@@ -177,9 +177,9 @@ export function OrganizationOverviewView({ organization }: { organization: APIOr
             <Col span={8} key={stat.key}>
               <SettingsCard
                 title={stat.title}
-                description={stat.value}
+                content={stat.content}
                 action={stat.action}
-                explanation={stat.explanation}
+                tooltip={stat.tooltip}
               />
             </Col>
           ))}
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_metadata_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_metadata_tab.tsx
index cf45bd216a3..8cfc0bbd874 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_metadata_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_metadata_tab.tsx
@@ -1,36 +1,51 @@
-import { Col, DatePicker, Input, Row } from "antd";
-import { FormItemWithInfo } from "./helper_components";
+import { Col, DatePicker, Form, Input, Row } from "antd";
+import { SettingsCard, type SettingsCardProps } from "admin/account/helpers/settings_card";
+import { SettingsTitle } from "admin/account/helpers/settings_title";
 
 export default function DatasetSettingsMetadataTab() {
+  const metadataItems: SettingsCardProps[] = [
+    {
+      title: "Display Name",
+      tooltip: "Add a descriptive name for your dataset instead of the technical name.",
+      content: (
+        <Form.Item name={["dataset", "displayName"]}>
+          <Input />
+        </Form.Item>
+      ),
+    },
+
+    {
+      title: "Publication Date",
+      tooltip:
+        "Datasets are sorted by date. Specify the date (e.g. publication date) in order to influence the sorting order of the listed datasets in your dashboard.",
+      content: (
+        <Form.Item name={["dataset", "sortingKey"]}>
+          <DatePicker placeholder="Select a Publication Date" />
+        </Form.Item>
+      ),
+    },
+    {
+      title: "Description",
+      tooltip:
+        "Add a description with additional information about your dataset that will be displayed when working with this dataset. Supports Markdown formatting.",
+      content: (
+        <Form.Item name={["dataset", "description"]}>
+          <Input.TextArea rows={3} />
+        </Form.Item>
+      ),
+    },
+  ];
+
   return (
     <div>
-      <Row gutter={48}>
-        <Col span={12}>
-          <FormItemWithInfo
-            name={["dataset", "displayName"]}
-            label="Display Name"
-            info="Add a descriptive name for your dataset instead of the technical name."
-          >
-            <Input placeholder="Display Name" />
-          </FormItemWithInfo>
-        </Col>
-        <Col span={12}>
-          <FormItemWithInfo
-            name={["dataset", "description"]}
-            label="Description"
-            info="Add a description with additional information about your dataset. Format with Markdown."
-          >
-            <Input.TextArea rows={3} placeholder="Description" />
-          </FormItemWithInfo>
-        </Col>
+      <SettingsTitle title="Metadata" description="Add additional information about your dataset" />
+      <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
+        {metadataItems.map((item) => (
+          <Col span={12} key={item.title}>
+            <SettingsCard title={item.title} content={item.content} tooltip={item.tooltip} />
+          </Col>
+        ))}
       </Row>
-      <FormItemWithInfo
-        name={["dataset", "sortingKey"]}
-        label="Sorting Date"
-        info="Datasets are sorted by date. Specify the date (e.g. publication date) in order to influence the sorting order."
-      >
-        <DatePicker placeholder="Select a Publication Date" />
-      </FormItemWithInfo>
     </div>
   );
 }
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
index 5a01fd6e58f..15a3a3a9d39 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
@@ -1,20 +1,20 @@
-import { CopyOutlined, InfoCircleOutlined, RetweetOutlined } from "@ant-design/icons";
+import { RetweetOutlined } from "@ant-design/icons";
 import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
 import { getDatasetSharingToken, revokeDatasetSharingToken } from "admin/rest_api";
-import { Button, Checkbox, Col, Collapse, Form, Input, Row, Space, Switch, Tooltip } from "antd";
+import { Col, Collapse, Form, Row, Space, Switch, Tooltip, Typography } from "antd";
 import { AsyncButton } from "components/async_clickables";
 import { PricingEnforcedBlur } from "components/pricing_enforcers";
 import DatasetAccessListView from "dashboard/advanced_dataset/dataset_access_list_view";
 import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
 import { useEffectOnlyOnce, useWkSelector } from "libs/react_hooks";
-import Toast from "libs/toast";
 import { isUserAdminOrDatasetManager, isUserAdminOrTeamManager } from "libs/utils";
 import window from "libs/window";
 import { useState } from "react";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
 import { SettingsTitle } from "admin/account/helpers/settings_title";
-import { SettingsCard } from "admin/account/helpers/settings_card";
+import { SettingsCard, type SettingsCardProps } from "admin/account/helpers/settings_card";
+import { useWatch } from "antd/es/form/Form";
 
 export default function DatasetSettingsSharingTab() {
   const { form, datasetId, dataset } = useDatasetSettingsContext();
@@ -22,6 +22,8 @@ export default function DatasetSettingsSharingTab() {
   const activeUser = useWkSelector((state) => state.activeUser);
   const isDatasetManagerOrAdmin = isUserAdminOrDatasetManager(activeUser);
 
+  const isDatasetPublic = useWatch(["dataset", "isPublic"], form);
+
   async function fetch() {
     const newSharingToken = await getDatasetSharingToken(datasetId);
     setSharingToken(newSharingToken);
@@ -31,21 +33,6 @@ export default function DatasetSettingsSharingTab() {
     fetch();
   });
 
-  function handleSelectCode(event: React.MouseEvent<HTMLInputElement>): void {
-    event.currentTarget.select();
-  }
-
-  async function handleCopySharingLink(): Promise<void> {
-    const link = getSharingLink();
-
-    if (!link) {
-      return;
-    }
-
-    await navigator.clipboard.writeText(link);
-    Toast.success("Sharing Link copied to clipboard");
-  }
-
   async function handleRevokeSharingLink(): Promise<void> {
     await revokeDatasetSharingToken(datasetId);
     const newSharingToken = await getDatasetSharingToken(datasetId);
@@ -53,11 +40,8 @@ export default function DatasetSettingsSharingTab() {
   }
 
   function getSharingLink() {
-    if (!form) return undefined;
-
-    const doesNeedToken = !form.getFieldValue(["dataset", "isPublic"]);
     const tokenSuffix = `?token=${sharingToken}`;
-    return `${window.location.origin}/datasets/${dataset ? getReadableURLPart(dataset) : datasetId}/view${doesNeedToken ? tokenSuffix : ""}`;
+    return `${window.location.origin}/datasets/${dataset ? getReadableURLPart(dataset) : datasetId}/view${isDatasetPublic ? "" : tokenSuffix}`;
   }
 
   function getUserAccessList() {
@@ -68,11 +52,10 @@ export default function DatasetSettingsSharingTab() {
       <Collapse
         collapsible="header"
         ghost
-        style={{ padding: 0 }}
         items={[
           {
             key: "1",
-            label: "See all users",
+            label: "Show all users",
             children: <DatasetAccessListView dataset={dataset} />,
           },
         ]}
@@ -80,12 +63,11 @@ export default function DatasetSettingsSharingTab() {
     );
   }
 
-  const sharingItems = [
+  const sharingItems: SettingsCardProps[] = [
     {
       title: "Make dataset publicly accessible",
-      explanation:
-        "Make your dataset public, for anonymous/unregistered users to access your dataset.",
-      value: (
+      tooltip: "Make your dataset public, for anonymous/unregistered users to access your dataset.",
+      content: (
         <Form.Item name={["dataset", "isPublic"]} valuePropName="checked">
           <Switch />
         </Form.Item>
@@ -93,9 +75,9 @@ export default function DatasetSettingsSharingTab() {
     },
     {
       title: "Additional team access permissions for this dataset",
-      explanation:
+      tooltip:
         "The dataset can be seen by administrators, dataset managers and by teams that have access to the folder in which the dataset is located. If you want to grant additional teams access, define these teams here.",
-      value: (
+      content: (
         <Form.Item name={["dataset", "allowedTeams"]} validateStatus="success">
           <PricingEnforcedBlur requiredPricingPlan={PricingPlanEnum.Team}>
             <TeamSelectionComponent
@@ -108,64 +90,54 @@ export default function DatasetSettingsSharingTab() {
     },
     {
       title: "Sharing Link",
-      value: (
-        <Space.Compact>
-          <Input
-            value={getSharingLink()}
-            onClick={handleSelectCode}
-            style={{
-              width: "80%",
-            }}
-            readOnly
-          />
-          <Button onClick={handleCopySharingLink} icon={<CopyOutlined />}>
-            Copy
-          </Button>
-          {!form.getFieldValue(["dataset", "isPublic"]) && (
-            <Tooltip
-              title={
-                <span>
-                  The URL contains a secret token which enables anybody with this link to view the
-                  dataset. Renew the token to make the old link invalid.
-                </span>
-              }
-            >
-              <AsyncButton onClick={handleRevokeSharingLink} icon={<RetweetOutlined />}>
-                Renew
-              </AsyncButton>
-            </Tooltip>
-          )}
-        </Space.Compact>
+      content: (
+        <>
+          <Typography.Paragraph copyable ellipsis={{ expandable: true }}>
+            {getSharingLink()}
+          </Typography.Paragraph>
+          <Space.Compact>
+            {!isDatasetPublic && (
+              <Tooltip
+                title={
+                  <span>
+                    The URL contains a secret token which enables anybody with this link to view the
+                    dataset. Renew the token to make the old link invalid.
+                  </span>
+                }
+              >
+                <AsyncButton onClick={handleRevokeSharingLink} icon={<RetweetOutlined />}>
+                  Renew Authorization Token
+                </AsyncButton>
+              </Tooltip>
+            )}
+          </Space.Compact>
+        </>
       ),
-      explanation:
+      tooltip:
         "The sharing link can be used to allow unregistered users to view this dataset. If the dataset itself is not public, the link contains a secret token which ensures that the dataset can be opened if you know the special link.",
     },
 
     {
       title: "Users with access permission to work with this dataset",
-      explanation:
+      tooltip:
         "Dataset access is based on the specified team permissions and individual user roles. Any changes will only appear after pressing the Save button.",
-      value: getUserAccessList(),
+      content: getUserAccessList(),
     },
   ];
 
-  return form ? (
+  return (
     <div>
       <SettingsTitle
         title="Sharing & Permissions"
-        description="Manage your personal information and preferences"
+        description="Control who can access and edit this dataset"
       />
       <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
         {sharingItems.map((item) => (
           <Col span={12} key={item.title}>
-            <SettingsCard
-              title={item.title}
-              description={item.value}
-              explanation={item.explanation}
-            />
+            <SettingsCard title={item.title} content={item.content} tooltip={item.tooltip} />
           </Col>
         ))}
       </Row>
     </div>
-  ) : null;
+  );
 }
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
index 9d20bf798e0..4e2bc21bf56 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
@@ -2,14 +2,12 @@ import {
   CodeSandboxOutlined,
   DeleteOutlined,
   ExclamationCircleOutlined,
+  ExportOutlined,
   FileTextOutlined,
-  SafetyOutlined,
   SettingOutlined,
   TeamOutlined,
-  UserOutlined,
 } from "@ant-design/icons";
 import { Alert, Breadcrumb, Button, Form, Layout, Menu, Tooltip } from "antd";
-import features from "features";
 import { useDatasetSettingsContext } from "dashboard/dataset/dataset_settings_context";
 import DatasetSettingsDataTab from "dashboard/dataset/dataset_settings_data_tab";
 import DatasetSettingsDeleteTab from "dashboard/dataset/dataset_settings_delete_tab";
@@ -69,6 +67,17 @@ const MENU_ITEMS: MenuItemGroupType[] = [
       },
     ],
   },
+  { type: "divider" },
+  {
+    type: "group",
+    children: [
+      {
+        key: "open",
+        icon: <ExportOutlined />,
+        label: "Open in WEBKNOSSOS",
+      },
+    ],
+  },
 ];
 
 // if (isUserAdmin && features().allowDeleteDatasets) {

From b550de481027928789b39b52dc6d830f78dbcae0 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Mon, 30 Jun 2025 15:45:03 +0200
Subject: [PATCH 5/9] WIP restyle the dataset settings form

---
 .../admin/account/helpers/settings_card.tsx   |   2 +-
 .../color_layer_ordering_component.tsx        |  20 +-
 .../dataset/dataset_settings_delete_tab.tsx   |  34 +-
 .../dataset/dataset_settings_view.tsx         |   2 +-
 .../dataset_settings_viewconfig_tab.tsx       | 347 +++++++++---------
 frontend/javascripts/messages.tsx             |   5 +-
 6 files changed, 219 insertions(+), 191 deletions(-)

diff --git a/frontend/javascripts/admin/account/helpers/settings_card.tsx b/frontend/javascripts/admin/account/helpers/settings_card.tsx
index 438e1b65701..158f0997351 100644
--- a/frontend/javascripts/admin/account/helpers/settings_card.tsx
+++ b/frontend/javascripts/admin/account/helpers/settings_card.tsx
@@ -18,7 +18,7 @@ export function SettingsCard({ title, content, tooltip, action }: SettingsCardPr
 
             {tooltip != null ? (
               <Tooltip title={tooltip}>
-                <InfoCircleOutlined style={{ marginLeft: 4 }} />
+                <InfoCircleOutlined style={{ marginLeft: 10 }} />
               </Tooltip>
             ) : null}
           </div>
diff --git a/frontend/javascripts/dashboard/dataset/color_layer_ordering_component.tsx b/frontend/javascripts/dashboard/dataset/color_layer_ordering_component.tsx
index 2f07a49d394..d06042452a9 100644
--- a/frontend/javascripts/dashboard/dataset/color_layer_ordering_component.tsx
+++ b/frontend/javascripts/dashboard/dataset/color_layer_ordering_component.tsx
@@ -54,29 +54,18 @@ export default function ColorLayerOrderingTable({
 
   const isSettingEnabled = colorLayerNames && colorLayerNames.length > 1;
   const sortingItems = isSettingEnabled ? colorLayerNames.map((name) => name) : [];
-  const collapsibleDisabledExplanation =
+  const settingsIsDisabledExplanation =
     "The order of layers can only be configured when the dataset has multiple color layers.";
 
-  const panelTitle = (
-    <span style={{ width: "100%" }}>
-      {settings.colorLayerOrder}{" "}
-      <Tooltip
-        title={isSettingEnabled ? settingsTooltips.colorLayerOrder : collapsibleDisabledExplanation}
-      >
-        <InfoCircleOutlined style={{ color: "gray" }} />
-      </Tooltip>
-    </span>
-  );
-
   const collapseItems: CollapseProps["items"] = [
     {
-      label: panelTitle,
+      label: settingsTooltips.colorLayerOrder,
       key: "1",
       children: sortingItems.map((name) => <SortableListItem key={name} colorLayerName={name} />),
     },
   ];
 
-  return (
+  return isSettingEnabled ? (
     <DndContext
       autoScroll={false}
       onDragStart={() => {
@@ -89,8 +78,11 @@ export default function ColorLayerOrderingTable({
           defaultActiveKey={[]}
           collapsible={isSettingEnabled ? "header" : "disabled"}
           items={collapseItems}
+          ghost
         />
       </SortableContext>
     </DndContext>
+  ) : (
+    settingsIsDisabledExplanation
   );
 }
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
index 62a8f9b8e15..684695a4296 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
@@ -1,12 +1,14 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { deleteDatasetOnDisk } from "admin/rest_api";
-import { Button } from "antd";
+import { Button, Col, Row } from "antd";
 import Toast from "libs/toast";
 import messages from "messages";
 import { useState } from "react";
 import { useHistory } from "react-router-dom";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
 import { confirmAsync } from "./helper_components";
+import { SettingsCard } from "admin/account/helpers/settings_card";
+import { SettingsTitle } from "admin/account/helpers/settings_title";
 
 const DatasetSettingsDeleteTab = () => {
   const { dataset } = useDatasetSettingsContext();
@@ -14,13 +16,12 @@ const DatasetSettingsDeleteTab = () => {
   const queryClient = useQueryClient();
   const history = useHistory();
 
-  // const dataset = useFetch(() => getDataset(datasetId), null, [datasetId]);
-
   async function handleDeleteButtonClicked(): Promise<void> {
     if (!dataset) {
       return;
     }
 
+    // TODO why is this an async confirm? Sync should work too and get proper antd styling
     const deleteDataset = await confirmAsync({
       title: `Deleting a dataset on disk cannot be undone. Are you certain to delete dataset ${dataset.name}? Note that the name of a dataset is not guaranteed to be free to use afterwards.`,
       okText: "Yes, Delete Dataset on Disk now",
@@ -53,12 +54,27 @@ const DatasetSettingsDeleteTab = () => {
 
   return (
     <div>
-      <p>Deleting a dataset on disk cannot be undone. Please be certain.</p>
-      <p>Note that annotations for the dataset stay downloadable and the name stays reserved.</p>
-      <p>Only admins are allowed to delete datasets.</p>
-      <Button danger loading={isDeleting} onClick={handleDeleteButtonClicked}>
-        Delete Dataset on Disk
-      </Button>
+      <SettingsTitle title="Delete Dataset" description="Delete this dataset on disk" />
+      <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
+        <Col span={24}>
+          <SettingsCard
+            title="Delete Dataset"
+            content={
+              <>
+                <p>Deleting a dataset on disk cannot be undone. Please be certain.</p>
+                <p>
+                  Note that annotations for the dataset stay downloadable and the name stays
+                  reserved.
+                </p>
+                <p>Only admins are allowed to delete datasets.</p>
+                <Button danger loading={isDeleting} onClick={handleDeleteButtonClicked}>
+                  Delete Dataset on Disk
+                </Button>
+              </>
+            }
+          />
+        </Col>
+      </Row>
     </div>
   );
 };
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
index 4e2bc21bf56..62e6e1d274e 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
@@ -221,7 +221,7 @@ const DatasetSettingsView: React.FC = () => {
     <Layout
       style={{ minHeight: "calc(100vh - 64px)", backgroundColor: "var(--ant-layout-body-bg)" }}
     >
-      <Sider width={200}>
+      <Sider width={300}>
         <Menu
           mode="inline"
           selectedKeys={[selectedKey]}
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
index b608e6bcbfd..4e88b6080a3 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
@@ -1,15 +1,15 @@
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { getAgglomeratesForDatasetLayer, getMappingsForDatasetLayer } from "admin/rest_api";
 import {
-  Alert,
   Checkbox,
   Col,
-  Divider,
   Form,
   Input,
   InputNumber,
   Row,
   Select,
+  Space,
+  Switch,
   Table,
   Tooltip,
 } from "antd";
@@ -30,7 +30,9 @@ import { BLEND_MODES } from "viewer/constants";
 import type { DatasetConfiguration, DatasetLayerConfiguration } from "viewer/store";
 import ColorLayerOrderingTable from "./color_layer_ordering_component";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
-import { FormItemWithInfo, jsonEditStyle } from "./helper_components";
+import { jsonEditStyle } from "./helper_components";
+import { SettingsCard, SettingsCardProps } from "admin/account/helpers/settings_card";
+import { SettingsTitle } from "admin/account/helpers/settings_title";
 
 const FormItem = Form.Item;
 
@@ -160,176 +162,191 @@ export default function DatasetSettingsViewConfigTab(props: {
       };
     },
   );
-  const checkboxSettings = (
-    [
-      ["interpolation", 6],
-      ["fourBit", 6],
-      ["renderMissingDataBlack", 6],
-    ] as Array<[keyof RecommendedConfiguration, number]>
-  ).map(([settingsName, spanWidth]) => (
-    <Col span={spanWidth} key={settingsName}>
-      <FormItem name={["defaultConfiguration", settingsName]} valuePropName="checked" colon={false}>
-        <Checkbox>
-          {settings[settingsName]}{" "}
-          <Tooltip title={settingsTooltips[settingsName]}>
-            <InfoCircleOutlined
-              style={{
-                color: "gray",
-              }}
-            />
-          </Tooltip>
-        </Checkbox>
-      </FormItem>
-    </Col>
-  ));
+
+  const viewConfigItems: SettingsCardProps[] = [
+    {
+      title: "Position",
+      tooltip: "The default position is defined in voxel-coordinates (x, y, z).",
+      content: (
+        <Form.Item name={["defaultConfiguration", "position"]}>
+          <Vector3Input placeholder="0, 0, 0" />
+        </Form.Item>
+      ),
+    },
+    {
+      title: "Zoom Level",
+      tooltip:
+        "A zoom level of &ldquo;1&rdquo; will display the data in its original magnification.",
+      content: (
+        <Form.Item
+          name={["defaultConfiguration", "zoom"]}
+          rules={[
+            {
+              validator: syncValidator(
+                (value) => value == null || value > 0,
+                "The zoom value must be greater than 0.",
+              ),
+            },
+          ]}
+        >
+          <InputNumber
+            style={{
+              width: "100%",
+            }}
+            placeholder="1"
+          />
+        </Form.Item>
+      ),
+    },
+    {
+      title: "Rotation - Arbitrary Modes only",
+      tooltip: "The default rotation that will be used in oblique and flight view mode.",
+      content: (
+        <Form.Item name={["defaultConfiguration", "rotation"]}>
+          <Vector3Input placeholder="0, 0, 0" />
+        </Form.Item>
+      ),
+    },
+    {
+      title: settings.interpolation,
+      tooltip: settingsTooltips.interpolation,
+      content: (
+        <Form.Item name={["defaultConfiguration", "interpolation"]} valuePropName="checked">
+          <Switch />
+        </Form.Item>
+      ),
+    },
+    {
+      title: settings.fourBit,
+      tooltip: settingsTooltips.fourBit,
+      content: (
+        <Form.Item name={["defaultConfiguration", "fourBit"]} valuePropName="checked">
+          <Switch />
+        </Form.Item>
+      ),
+    },
+    {
+      title: settings.renderMissingDataBlack,
+      tooltip: settingsTooltips.renderMissingDataBlack,
+      content: (
+        <Form.Item
+          name={["defaultConfiguration", "renderMissingDataBlack"]}
+          valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
+      ),
+    },
+    {
+      title: settings.segmentationPatternOpacity,
+      tooltip: settingsTooltips.segmentationPatternOpacity,
+      content: (
+        <Row>
+          <Col span={16}>
+            <Form.Item name={["defaultConfiguration", "segmentationPatternOpacity"]}>
+              <Slider min={0} max={100} step={1} />
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <FormItem name={["defaultConfiguration", "segmentationPatternOpacity"]}>
+              <InputNumber min={0} max={100} step={1} precision={0} />
+            </FormItem>
+          </Col>
+        </Row>
+      ),
+    },
+    {
+      title: settings.blendMode,
+      tooltip: settingsTooltips.blendMode,
+      content: (
+        <Form.Item name={["defaultConfiguration", "blendMode"]}>
+          <Select allowClear>
+            <Select.Option value={BLEND_MODES.Additive}>Additive</Select.Option>
+            <Select.Option value={BLEND_MODES.Cover}>Cover</Select.Option>
+          </Select>
+        </Form.Item>
+      ),
+    },
+    {
+      title: settings.loadingStrategy,
+      tooltip: settingsTooltips.loadingStrategy,
+      content: (
+        <Form.Item name={["defaultConfiguration", "loadingStrategy"]}>
+          <Select allowClear>
+            <Select.Option value={"BEST_QUALITY_FIRST"}>Best quality first</Select.Option>
+            <Select.Option value={"PROGRESSIVE_QUALITY"}>Progressive quality</Select.Option>
+          </Select>
+        </Form.Item>
+      ),
+    },
+    {
+      title: "Color Layer Order",
+      tooltip:
+        "Set the order in which color layers are rendered. This setting is only relevant if the cover blend mode is active.",
+      content: (
+        <Form.Item name={["defaultConfiguration", "colorLayerOrder"]}>
+          <ColorLayerOrderingTable />
+        </Form.Item>
+      ),
+    },
+  ];
 
   return (
     <div>
-      <Alert
-        message="The following settings define the default configuration when viewing or creating an explorational annotation for this dataset. Use them to optimize the first appearance of your dataset."
-        type="info"
-        style={{ marginBottom: 8 }}
-        showIcon
+      <SettingsTitle
+        title="View Configuration"
+        description="Define the default view configuration values and optimize the initial appearance of this dataset."
       />
-      <Row gutter={24}>
-        <Col span={6}>
-          <FormItemWithInfo
-            name={["defaultConfiguration", "position"]}
-            label="Position"
-            info="The default position is defined in voxel-coordinates (x, y, z)."
-          >
-            <Vector3Input />
-          </FormItemWithInfo>
-        </Col>
-        <Col span={6}>
-          <FormItemWithInfo
-            name={["defaultConfiguration", "zoom"]}
-            label="Zoom"
-            info="A zoom of &ldquo;1&rdquo; will display the data in its original magnification."
-            rules={[
-              {
-                validator: syncValidator(
-                  (value) => value == null || value > 0,
-                  "The zoom value must be greater than 0.",
-                ),
-              },
-            ]}
-          >
-            <InputNumber
-              style={{
-                width: "100%",
-              }}
-            />
-          </FormItemWithInfo>
-        </Col>
-        <Col span={6}>
-          <FormItemWithInfo
-            name={["defaultConfiguration", "rotation"]}
-            label="Rotation - Arbitrary View Modes"
-            info="The default rotation that will be used in oblique and flight view mode."
-          >
-            <Vector3Input />
-          </FormItemWithInfo>
-        </Col>
+      <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
+        {viewConfigItems.map((item) => (
+          <Col span={8} key={item.title}>
+            <SettingsCard title={item.title} content={item.content} tooltip={item.tooltip} />
+          </Col>
+        ))}
       </Row>
-      <Row gutter={24}>{checkboxSettings}</Row>
-      <Row gutter={24}>
-        <Col span={6}>
-          <Row gutter={24}>
-            <Col span={16}>
-              <FormItemWithInfo
-                name={["defaultConfiguration", "segmentationPatternOpacity"]}
-                label={settings.segmentationPatternOpacity}
-                info={settingsTooltips.segmentationPatternOpacity}
-                colon={false}
-              >
-                <Slider min={0} max={100} step={1} />
-              </FormItemWithInfo>
-            </Col>
-            <Col span={8} style={{ marginRight: -12 }}>
-              <FormItem
-                name={["defaultConfiguration", "segmentationPatternOpacity"]}
-                colon={false}
-                label=" "
-              >
-                <InputNumber min={0} max={100} step={1} precision={0} />
-              </FormItem>
-            </Col>
-          </Row>
-        </Col>
-        <Col span={6}>
-          <FormItemWithInfo
-            colon={false}
-            name={["defaultConfiguration", "blendMode"]}
-            label={settings.blendMode}
-            info={settingsTooltips.blendMode}
-          >
-            <Select allowClear>
-              <Select.Option value={BLEND_MODES.Additive}>Additive</Select.Option>
-              <Select.Option value={BLEND_MODES.Cover}>Cover</Select.Option>
-            </Select>
-          </FormItemWithInfo>
-        </Col>
-        <Col span={6}>
-          <FormItemWithInfo
-            colon={false}
-            name={["defaultConfiguration", "loadingStrategy"]}
-            label={settings.loadingStrategy}
-            info={settingsTooltips.loadingStrategy}
-          >
-            <Select allowClear>
-              <Select.Option value={"BEST_QUALITY_FIRST"}>Best quality first</Select.Option>
-              <Select.Option value={"PROGRESSIVE_QUALITY"}>Progressive quality</Select.Option>
-            </Select>
-          </FormItemWithInfo>
-        </Col>
-      </Row>
-      <Row gutter={24}>
-        <Col span={6}>
-          <FormItem
-            name={["defaultConfiguration", "colorLayerOrder"]}
-            valuePropName="colorLayerNames"
-          >
-            <ColorLayerOrderingTable />
-          </FormItem>
-        </Col>
-      </Row>
-      <Divider />
-      <Row gutter={32}>
+
+      <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
         <Col span={12}>
-          <FormItemWithInfo
-            name="defaultConfigurationLayersJson"
-            label="Layer Configuration"
-            info="Use the following JSON to define layer-specific properties, such as color, alpha and intensityRange."
-            rules={[
-              {
-                validator: (_rule, config: string) =>
-                  Promise.all([
-                    // Use dataset.dataSource.id for dataSourceId
-                    validateLayerViewConfigurationObjectJSON(_rule, config),
-                    dataStoreURL
-                      ? validateDefaultMappings(config, dataStoreURL, dataSourceId)
-                      : Promise.resolve(),
-                  ]),
-              },
-            ]}
-          >
-            <Input.TextArea rows={18} style={jsonEditStyle} />
-          </FormItemWithInfo>
+          <SettingsCard
+            title="Layer Configuration"
+            tooltip="Define layer-specific properties, such as color, alpha and intensityRange in JSON format"
+            content={
+              <Form.Item
+                name="defaultConfigurationLayersJson"
+                rules={[
+                  {
+                    validator: (_rule, config: string) =>
+                      Promise.all([
+                        // Use dataset.dataSource.id for dataSourceId
+                        validateLayerViewConfigurationObjectJSON(_rule, config),
+                        dataStoreURL
+                          ? validateDefaultMappings(config, dataStoreURL, dataSourceId)
+                          : Promise.resolve(),
+                      ]),
+                  },
+                ]}
+              >
+                <Input.TextArea rows={18} style={jsonEditStyle} />
+              </Form.Item>
+            }
+          />
         </Col>
         <Col span={12}>
-          Valid layer view configurations and their default values:
-          <br />
-          <br />
-          <Table
-            columns={columns}
-            dataSource={layerViewConfigurationEntries}
-            size="small"
-            pagination={false}
-            className="large-table"
-            scroll={{
-              x: "max-content",
-            }}
+          <SettingsCard
+            title="Valid layer view configurations and their default values"
+            tooltip="The default values are defined in the dataset's properties."
+            content={
+              <Table
+                columns={columns}
+                dataSource={layerViewConfigurationEntries}
+                size="small"
+                pagination={false}
+                className="large-table"
+                scroll={{
+                  x: "max-content",
+                }}
+              />
+            }
           />
         </Col>
       </Row>
diff --git a/frontend/javascripts/messages.tsx b/frontend/javascripts/messages.tsx
index 5b709334965..25a3a017fb0 100644
--- a/frontend/javascripts/messages.tsx
+++ b/frontend/javascripts/messages.tsx
@@ -39,7 +39,7 @@ export const settings: Partial<Record<keyof RecommendedConfiguration, string>> =
   sphericalCapRadius: "Sphere Radius",
   crosshairSize: "Crosshair Size",
   brushSize: "Brush Size",
-  segmentationPatternOpacity: "Pattern Opacity",
+  segmentationPatternOpacity: "Segmentation Pattern Opacity",
   loadingStrategy: "Loading Strategy",
   gpuMemoryFactor: "Hardware Utilization",
   overwriteMode: "Volume Annotation Overwrite Mode",
@@ -50,6 +50,8 @@ export const settings: Partial<Record<keyof RecommendedConfiguration, string>> =
   colorLayerOrder: "Color Layer Order",
 };
 export const settingsTooltips: Partial<Record<keyof RecommendedConfiguration, string>> = {
+  segmentationPatternOpacity:
+    "The opacity of the pattern overlaid on any segmentation layer for improved contrast.",
   loadingStrategy: `You can choose between loading the best quality first
       (will take longer until you see data) or alternatively,
       improving the quality progressively (data will be loaded faster,
@@ -82,6 +84,7 @@ export const settingsTooltips: Partial<Record<keyof RecommendedConfiguration, st
   colorLayerOrder:
     "Set the order in which color layers are rendered. This setting is only relevant if the cover blend mode is active.",
 };
+
 export const layerViewConfigurations: Partial<Record<keyof DatasetLayerConfiguration, string>> = {
   color: "Color",
   alpha: "Layer opacity",

From 3eecbeba75f04680ddbc37129ec574b631329cb0 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Mon, 30 Jun 2025 16:38:05 +0200
Subject: [PATCH 6/9] WIP

---
 .../admin/account/helpers/settings_card.tsx   |   7 +-
 .../dataset/dataset_settings_data_tab.tsx     | 263 +++++++++---------
 .../dataset/dataset_settings_view.tsx         |  12 +
 3 files changed, 142 insertions(+), 140 deletions(-)

diff --git a/frontend/javascripts/admin/account/helpers/settings_card.tsx b/frontend/javascripts/admin/account/helpers/settings_card.tsx
index 158f0997351..130b9f1c74f 100644
--- a/frontend/javascripts/admin/account/helpers/settings_card.tsx
+++ b/frontend/javascripts/admin/account/helpers/settings_card.tsx
@@ -6,11 +6,12 @@ export type SettingsCardProps = {
   content: React.ReactNode;
   tooltip?: React.ReactNode;
   action?: React.ReactNode;
+  style?: React.CSSProperties;
 };
 
-export function SettingsCard({ title, content, tooltip, action }: SettingsCardProps) {
+export function SettingsCard({ title, content, tooltip, action, style }: SettingsCardProps) {
   return (
-    <Card style={{ minHeight: 105 }}>
+    <Card style={{ minHeight: 105, ...style }}>
       <Typography.Text type="secondary" style={{ fontSize: 14 }}>
         <Flex justify="space-between">
           <div>
@@ -18,7 +19,7 @@ export function SettingsCard({ title, content, tooltip, action }: SettingsCardPr
 
             {tooltip != null ? (
               <Tooltip title={tooltip}>
-                <InfoCircleOutlined style={{ marginLeft: 10 }} />
+                <InfoCircleOutlined style={{ marginLeft: 8 }} />
               </Tooltip>
             ) : null}
           </div>
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
index 947351db34d..fb8f6f44e49 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
@@ -36,6 +36,8 @@ import { getSupportedValueRangeForElementClass } from "viewer/model/bucket_data_
 import type { BoundingBoxObject } from "viewer/store";
 import { AxisRotationSettingForDataset } from "./dataset_rotation_form_item";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
+import { SettingsTitle } from "admin/account/helpers/settings_title";
+import { SettingsCard } from "admin/account/helpers/settings_card";
 
 const FormItem = Form.Item;
 
@@ -101,9 +103,9 @@ export default function DatasetSettingsDataTab({
 
   return (
     <div>
-      <div
+      <span
         style={{
-          textAlign: "right",
+          float: "right",
         }}
       >
         <Tooltip
@@ -127,7 +129,8 @@ export default function DatasetSettingsDataTab({
             }}
           />
         </Tooltip>
-      </div>
+      </span>
+      <SettingsTitle title="Data Source" description="Configure the data source" />
 
       <Hideable hidden={activeDataSourceEditMode !== "simple"}>
         <RetryingErrorBoundary>
@@ -190,149 +193,135 @@ function SimpleDatasetForm({
     });
     syncDataSourceFields(form, "advanced");
   };
+
   return (
     <div>
-      <List
-        header={
-          <div
-            style={{
-              fontWeight: "bold",
-            }}
-          >
-            Dataset
-          </div>
-        }
-      >
-        <List.Item>
-          <div
-            style={{
-              width: "100%",
-            }}
-          >
-            <Row gutter={48}>
-              <Col span={24} xl={12}>
-                <FormItemWithInfo
-                  // The dataset name is not synced with the datasource.id.name in the advanced settings, because datasource.id represents a DataSourceId
-                  // where datasource.id.name represents the dataset's directoryName and not the dataset's name.
-                  name={["dataset", "name"]}
-                  label="Name"
-                  info="The name of the dataset"
-                  validateFirst
-                  rules={getDatasetNameRules(activeUser)}
-                >
+      <SettingsCard
+        title="General Dataset Settings"
+        content={
+          <Row gutter={[24, 24]}>
+            <Col span={24} xl={12}>
+              <FormItemWithInfo
+                // The dataset name is not synced with the datasource.id.name in the advanced settings, because datasource.id represents a DataSourceId
+                // where datasource.id.name represents the dataset's directoryName and not the dataset's name.
+                name={["dataset", "name"]}
+                label="Name"
+                info="The name of the dataset"
+                validateFirst
+                rules={getDatasetNameRules(activeUser)}
+              >
+                <Input
+                  style={{
+                    width: LEFT_COLUMN_ITEMS_WIDTH,
+                  }}
+                />
+              </FormItemWithInfo>
+              <Space size="large" />
+              <FormItemWithInfo
+                name={["dataset", "id"]}
+                label="Dataset ID"
+                info="The ID used to identify the dataset. Needed for e.g. Task bulk creation."
+              >
+                <Space.Compact>
                   <Input
+                    value={dataset?.id}
                     style={{
-                      width: LEFT_COLUMN_ITEMS_WIDTH,
+                      width: LEFT_COLUMN_ITEMS_WIDTH - COPY_ICON_BUTTON_WIDTH,
                     }}
+                    readOnly
+                    disabled
                   />
-                </FormItemWithInfo>
-                <Space size="large" />
-                <FormItemWithInfo
-                  name={["dataset", "id"]}
-                  label="Dataset ID"
-                  info="The ID used to identify the dataset. Needed for e.g. Task bulk creation."
-                >
-                  <Space.Compact>
-                    <Input
-                      value={dataset?.id}
-                      style={{
-                        width: LEFT_COLUMN_ITEMS_WIDTH - COPY_ICON_BUTTON_WIDTH,
-                      }}
-                      readOnly
-                      disabled
-                    />
-                    <Tooltip title="Copy dataset ID">
-                      <Button onClick={() => copyDatasetID(dataset?.id)} icon={<CopyOutlined />} />
-                    </Tooltip>
-                  </Space.Compact>
-                </FormItemWithInfo>
-              </Col>
-              <Col span={24} xl={12}>
-                <FormItemWithInfo
-                  name={["dataSource", "scale", "factor"]}
-                  label="Voxel Size"
-                  info="The voxel size defines the extent (for x, y, z) of one voxel in the specified unit."
-                  rules={[
-                    {
-                      required: true,
-                      message: "Please provide a voxel size for the dataset.",
-                    },
-                    {
-                      validator: syncValidator(
-                        (value: Vector3) => value?.every((el) => el > 0),
-                        "Each component of the voxel size must be greater than 0",
-                      ),
-                    },
-                  ]}
-                >
-                  <Vector3Input
-                    style={{
-                      width: 400,
-                    }}
-                    allowDecimals
-                  />
-                </FormItemWithInfo>
-                <Space size="large" />
-                <FormItemWithInfo
-                  name={["dataSource", "scale", "unit"]}
-                  label="Unit"
-                  info="The unit in which the voxel size is defined."
-                  rules={[
-                    {
-                      required: true,
-                      message: "Please provide a unit for the voxel scale of the dataset.",
-                    },
-                  ]}
-                >
-                  <Select
-                    style={{ width: 120 }}
-                    options={AllUnits.map((unit) => ({
-                      value: unit,
-                      label: (
-                        <span>
-                          <Tooltip title={unit}>{LongUnitToShortUnitMap[unit]}</Tooltip>
-                        </span>
-                      ),
-                    }))}
-                  />
-                </FormItemWithInfo>
-              </Col>
-            </Row>
-            <Row gutter={48}>
-              <Col span={24} xl={12} />
-              <Col span={24} xl={12}>
-                <AxisRotationSettingForDataset form={form} />
-              </Col>
-            </Row>
-          </div>
-        </List.Item>
-      </List>
+                  <Tooltip title="Copy dataset ID">
+                    <Button onClick={() => copyDatasetID(dataset?.id)} icon={<CopyOutlined />} />
+                  </Tooltip>
+                </Space.Compact>
+              </FormItemWithInfo>
+            </Col>
+            <Col span={24} xl={12}>
+              <FormItemWithInfo
+                name={["dataSource", "scale", "factor"]}
+                label="Voxel Size"
+                info="The voxel size defines the extent (for x, y, z) of one voxel in the specified unit."
+                rules={[
+                  {
+                    required: true,
+                    message: "Please provide a voxel size for the dataset.",
+                  },
+                  {
+                    validator: syncValidator(
+                      (value: Vector3) => value?.every((el) => el > 0),
+                      "Each component of the voxel size must be greater than 0",
+                    ),
+                  },
+                ]}
+              >
+                <Vector3Input
+                  style={{
+                    width: 400,
+                  }}
+                  allowDecimals
+                />
+              </FormItemWithInfo>
+              <Space size="large" />
+              <FormItemWithInfo
+                name={["dataSource", "scale", "unit"]}
+                label="Unit"
+                info="The unit in which the voxel size is defined."
+                rules={[
+                  {
+                    required: true,
+                    message: "Please provide a unit for the voxel scale of the dataset.",
+                  },
+                ]}
+              >
+                <Select
+                  style={{ width: 120 }}
+                  options={AllUnits.map((unit) => ({
+                    value: unit,
+                    label: (
+                      <span>
+                        <Tooltip title={unit}>{LongUnitToShortUnitMap[unit]}</Tooltip>
+                      </span>
+                    ),
+                  }))}
+                />
+              </FormItemWithInfo>
+            </Col>
+          </Row>
+        }
+        style={{ marginBottom: 24 }}
+      />
 
-      <List
-        locale={{ emptyText: "No Layers" }}
-        header={
-          <div
-            style={{
-              fontWeight: "bold",
-            }}
-          >
-            Layers
-          </div>
+      <SettingsCard
+        title="Axis Rotation"
+        content={
+          <Row gutter={[24, 24]}>
+            <Col span={24}>
+              <AxisRotationSettingForDataset form={form} />
+            </Col>
+          </Row>
         }
-      >
-        {dataSource?.dataLayers?.map((layer: DataLayer, idx: number) => (
-          // the layer name may change in this view, the order does not, so idx is the right key choice here
-          <List.Item key={`layer-${idx}`}>
-            <SimpleLayerForm
-              dataset={dataset}
-              layer={layer}
-              index={idx}
-              onRemoveLayer={onRemoveLayer}
-              form={form}
+      />
+
+      {dataSource?.dataLayers?.map((layer: DataLayer, idx: number) => (
+        // the layer name may change in this view, the order does not, so idx is the right key choice here
+        <Row gutter={[24, 24]} key={`layer-${idx}`}>
+          <Col span={24}>
+            <SettingsCard
+              title={`Layer: ${layer.name}`}
+              content={
+                <SimpleLayerForm
+                  dataset={dataset}
+                  layer={layer}
+                  index={idx}
+                  onRemoveLayer={onRemoveLayer}
+                  form={form}
+                />
+              }
             />
-          </List.Item>
-        ))}
-      </List>
+          </Col>
+        </Row>
+      ))}
     </div>
   );
 }
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
index 62e6e1d274e..d80176a7ac6 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
@@ -84,6 +84,17 @@ const MENU_ITEMS: MenuItemGroupType[] = [
 //   MENU_ITEMS[0].children.push();
 // }
 
+const FIXED_SIDER_STYLE: React.CSSProperties = {
+  overflow: "auto",
+  height: "100vh",
+  position: "sticky",
+  insetInlineStart: 0,
+  top: 0,
+  bottom: 0,
+  scrollbarWidth: "thin",
+  scrollbarGutter: "stable",
+};
+
 const DatasetSettingsView: React.FC = () => {
   const {
     form,
@@ -212,6 +223,7 @@ const DatasetSettingsView: React.FC = () => {
     {
       title: "Dataset Settings",
     },
+    { title: dataset?.name },
     {
       title: BREADCRUMB_LABELS[selectedKey as keyof typeof BREADCRUMB_LABELS],
     },

From 131598dbf862533712024046d15b38cc6e6d228f Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Tue, 1 Jul 2025 14:32:56 +0200
Subject: [PATCH 7/9] WIP

---
 .../dataset/dataset_rotation_form_item.tsx    |   5 +-
 .../dataset/dataset_settings_context.tsx      |   9 +-
 .../dataset/dataset_settings_data_tab.tsx     |  30 ++-
 .../dataset/dataset_settings_provider.tsx     | 188 ++++++++----------
 .../dataset/dataset_settings_view.tsx         | 148 +++++++-------
 .../dataset_settings_viewconfig_tab.tsx       |  37 ++--
 .../dashboard/dataset/useBeforeUnload_hook.ts |   2 +-
 7 files changed, 192 insertions(+), 227 deletions(-)

diff --git a/frontend/javascripts/dashboard/dataset/dataset_rotation_form_item.tsx b/frontend/javascripts/dashboard/dataset/dataset_rotation_form_item.tsx
index 38bee1be18a..bbc1e778347 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_rotation_form_item.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_rotation_form_item.tsx
@@ -42,7 +42,10 @@ export const AxisRotationFormItem: React.FC<AxisRotationFormItemProps> = ({
   form,
   axis,
 }: AxisRotationFormItemProps) => {
-  const dataLayers: APIDataLayer[] = Form.useWatch(["dataSource", "dataLayers"], form);
+  const dataLayers: APIDataLayer[] = Form.useWatch(["dataSource", "dataLayers"], {
+    form,
+    preserve: true,
+  });
   const datasetBoundingBox = useMemo(
     () => getDatasetBoundingBoxFromLayers(dataLayers),
     [dataLayers],
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx
index 82a09e053a0..92202ba3748 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_context.tsx
@@ -13,19 +13,14 @@ export type FormData = {
   datasetRotation?: DatasetRotationAndMirroringSettings;
 };
 
-
 export type DatasetSettingsContextValue = {
   form: FormInstance<FormData>;
   isLoading: boolean;
-  hasUnsavedChanges: boolean;
   dataset: APIDataset | null | undefined;
   datasetId: string;
   datasetDefaultConfiguration: DatasetConfiguration | null | undefined;
   activeDataSourceEditMode: "simple" | "advanced";
-  savedDataSourceOnServer: APIDataSource | null | undefined;
   isEditingMode: boolean;
-  onComplete: () => void;
-  onCancel: () => void;
   handleSubmit: () => void;
   handleCancel: () => void;
   handleDataSourceEditModeChange: (activeEditMode: "simple" | "advanced") => void;
@@ -40,9 +35,7 @@ export const DatasetSettingsContext = createContext<DatasetSettingsContextValue
 export const useDatasetSettingsContext = () => {
   const context = useContext(DatasetSettingsContext);
   if (!context) {
-    throw new Error(
-      "useDatasetSettingsContext must be used within a DatasetSettingsProvider",
-    );
+    throw new Error("useDatasetSettingsContext must be used within a DatasetSettingsProvider");
   }
   return context;
 };
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
index fb8f6f44e49..6ce0432df9b 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
@@ -80,15 +80,9 @@ export const syncDataSourceFields = (
   }
 };
 
-export default function DatasetSettingsDataTab({
-  onChange,
-}: {
-  // Form is passed explicitly because syncDataSourceFields is a utility function
-  // that needs the form instance, and it's called from the parent.
-  // The rest of the props are now derived from context.
-  onChange: (arg0: "simple" | "advanced") => void;
-}) {
-  const { dataset, form, activeDataSourceEditMode } = useDatasetSettingsContext();
+export default function DatasetSettingsDataTab() {
+  const { dataset, form, activeDataSourceEditMode, handleDataSourceEditModeChange } =
+    useDatasetSettingsContext();
   // Using the return value of useWatch for the `dataSource` var
   // yields outdated values. Therefore, the hook only exists for listening.
   Form.useWatch("dataSource", form);
@@ -98,7 +92,6 @@ export default function DatasetSettingsDataTab({
   const datasetStoredLocationInfo = dataset
     ? ` (as stored on datastore ${dataset?.dataStore.name} at ${dataset?.owningOrganization}/${dataset?.directoryName})`
     : "";
-
   const isJSONValid = isValidJSON(dataSourceJson);
 
   return (
@@ -125,7 +118,7 @@ export default function DatasetSettingsDataTab({
             }}
             onChange={(bool) => {
               const key = bool ? "advanced" : "simple";
-              onChange(key);
+              handleDataSourceEditModeChange(key);
             }}
           />
         </Tooltip>
@@ -193,11 +186,15 @@ function SimpleDatasetForm({
     });
     syncDataSourceFields(form, "advanced");
   };
+  const marginBottom: React.CSSProperties = {
+    marginBottom: 24,
+  };
 
   return (
     <div>
       <SettingsCard
         title="General Dataset Settings"
+        style={marginBottom}
         content={
           <Row gutter={[24, 24]}>
             <Col span={24} xl={12}>
@@ -289,11 +286,11 @@ function SimpleDatasetForm({
             </Col>
           </Row>
         }
-        style={{ marginBottom: 24 }}
       />
 
       <SettingsCard
         title="Axis Rotation"
+        style={marginBottom}
         content={
           <Row gutter={[24, 24]}>
             <Col span={24}>
@@ -309,6 +306,7 @@ function SimpleDatasetForm({
           <Col span={24}>
             <SettingsCard
               title={`Layer: ${layer.name}`}
+              style={marginBottom}
               content={
                 <SimpleLayerForm
                   dataset={dataset}
@@ -349,8 +347,8 @@ function SimpleLayerForm({
 }) {
   const layerCategorySavedOnServer = dataset?.dataSource.dataLayers[index]?.category;
   const isStoredAsSegmentationLayer = layerCategorySavedOnServer === "segmentation";
-  const dataLayers = Form.useWatch(["dataSource", "dataLayers"]);
-  const category = Form.useWatch(["dataSource", "dataLayers", index, "category"]);
+  const dataLayers = Form.useWatch(["dataSource", "dataLayers"], form);
+  const category = Form.useWatch(["dataSource", "dataLayers", index, "category"], form);
   const isSegmentation = category === "segmentation";
   const valueRange = getSupportedValueRangeForElementClass(layer.elementClass);
 
@@ -457,11 +455,11 @@ function SimpleLayerForm({
               </Select>
             </FormItemWithInfo>
             <FormItemWithInfo
-              label="Element Class"
+              label="Data Type"
               style={{
                 marginBottom: 24,
               }}
-              info="The element class (data type) of the layer."
+              info="The data type (sometimes called dtype) of the layer."
             >
               <Select disabled value={layer.elementClass} style={{ width: 120 }}>
                 <Select.Option value={layer.elementClass}>{layer.elementClass}</Select.Option>
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
index b6f405dc5dd..2f9c8200533 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
@@ -11,13 +11,12 @@ import {
 } from "admin/rest_api";
 import { Form } from "antd";
 import dayjs from "dayjs";
-import type { UnregisterCallback } from "history";
 import { handleGenericError } from "libs/error_handling";
 import Toast from "libs/toast";
 import { jsonStringify } from "libs/utils";
 import _ from "lodash";
 import messages from "messages";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import type { APIDataSource, APIDataset, MutableAPIDataset } from "types/api_types";
 import { enforceValidatedDatasetViewConfiguration } from "types/schemas/dataset_view_configuration_defaults";
 import {
@@ -35,20 +34,26 @@ import { syncDataSourceFields } from "./dataset_settings_data_tab";
 import type { FormData } from "./dataset_settings_context";
 import { hasFormError } from "./helper_components";
 import useBeforeUnload from "./useBeforeUnload_hook";
+import { useHistory } from "react-router-dom";
 
 type DatasetSettingsProviderProps = {
   children: React.ReactNode;
   datasetId: string;
   isEditingMode: boolean;
+  onComplete?: () => void;
+  onCancel?: () => void;
 };
 
 export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = ({
   children,
   datasetId,
   isEditingMode,
+  onComplete,
+  onCancel,
 }) => {
   const [form] = Form.useForm<FormData>();
   const queryClient = useQueryClient();
+  const history = useHistory();
 
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [dataset, setDataset] = useState<APIDataset | null | undefined>(null);
@@ -63,26 +68,8 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
     APIDataSource | null | undefined
   >(null);
 
-  const unblockRef = useRef<UnregisterCallback | null>(null);
-  const blockTimeoutIdRef = useRef<number | null>(null);
-
-  const unblockHistory = useCallback(() => {
-    window.onbeforeunload = null;
-
-    if (blockTimeoutIdRef.current != null) {
-      clearTimeout(blockTimeoutIdRef.current);
-      blockTimeoutIdRef.current = null;
-    }
-
-    if (unblockRef.current != null) {
-      unblockRef.current();
-      unblockRef.current = null;
-    }
-  }, []);
-
-  const onComplete = () => window.history.back();
-
-  const onCancel = () => window.history.back();
+  onComplete = onComplete ? onComplete : () => history.push("/dashboard");
+  onCancel = onCancel ? onCancel : () => history.push("/dashboard");
 
   const fetchData = useCallback(async (): Promise<string | undefined> => {
     try {
@@ -109,6 +96,7 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
           isPublic: fetchedDataset.isPublic || false,
           description: fetchedDataset.description || undefined,
           allowedTeams: fetchedDataset.allowedTeams || [],
+          // @ts-ignore: The Antd DatePicker component requires a daysjs date object instead of plain number timestamp
           sortingKey: dayjs(fetchedDataset.sortingKey),
         },
       });
@@ -172,7 +160,7 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
       setIsLoading(false);
       form.validateFields();
     }
-  }, [datasetId, form]);
+  }, [datasetId]);
 
   const getFormValidationSummary = useCallback((): Record<string, any> => {
     const err = form.getFieldsError();
@@ -236,76 +224,72 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
     return false;
   }, [getFormValidationSummary, form, didDatasourceChange]);
 
-  const submitForm = useCallback(
-    async (formValues: FormData) => {
-      const datasetChangeValues = { ...formValues.dataset };
+  const submitForm = useCallback(async () => {
+    // Call getFieldsValue() with "True" to get all values from form not just those that are visible in the current view
+    const formValues: FormData = form.getFieldsValue(true);
+    const datasetChangeValues = { ...formValues.dataset };
 
-      if (datasetChangeValues.sortingKey != null) {
-        datasetChangeValues.sortingKey = datasetChangeValues.sortingKey.valueOf();
-      }
+    if (datasetChangeValues.sortingKey != null) {
+      datasetChangeValues.sortingKey = datasetChangeValues.sortingKey.valueOf();
+    }
 
-      const teamIds = formValues.dataset.allowedTeams.map((t) => t.id);
-      await updateDatasetPartial(datasetId, datasetChangeValues);
+    const teamIds = formValues.dataset.allowedTeams.map((t) => t.id);
+    await updateDatasetPartial(datasetId, datasetChangeValues);
 
-      if (datasetDefaultConfiguration != null) {
-        await updateDatasetDefaultConfiguration(
-          datasetId,
-          _.extend({}, datasetDefaultConfiguration, formValues.defaultConfiguration, {
-            layers: JSON.parse(formValues.defaultConfigurationLayersJson),
-          }),
-        );
-      }
+    if (datasetDefaultConfiguration != null) {
+      await updateDatasetDefaultConfiguration(
+        datasetId,
+        _.extend({}, datasetDefaultConfiguration, formValues.defaultConfiguration, {
+          layers: JSON.parse(formValues.defaultConfigurationLayersJson),
+        }),
+      );
+    }
 
-      await updateDatasetTeams(datasetId, teamIds);
-      const dataSource = JSON.parse(formValues.dataSourceJson);
+    await updateDatasetTeams(datasetId, teamIds);
+    const dataSource = JSON.parse(formValues.dataSourceJson);
 
-      if (dataset != null && didDatasourceChange(dataSource)) {
-        if (didDatasourceIdChange(dataSource)) {
-          Toast.warning(messages["dataset.settings.updated_datasource_id_warning"]);
-        }
-        await updateDatasetDatasource(dataset.directoryName, dataset.dataStore.url, dataSource);
-        setSavedDataSourceOnServer(dataSource);
+    if (dataset != null && didDatasourceChange(dataSource)) {
+      if (didDatasourceIdChange(dataSource)) {
+        Toast.warning(messages["dataset.settings.updated_datasource_id_warning"]);
       }
+      await updateDatasetDatasource(dataset.directoryName, dataset.dataStore.url, dataSource);
+      setSavedDataSourceOnServer(dataSource);
+    }
 
-      const verb = isEditingMode ? "updated" : "imported";
-      Toast.success(`Successfully ${verb} ${dataset?.name || datasetId}.`);
-      setHasUnsavedChanges(false);
+    const verb = isEditingMode ? "updated" : "imported";
+    Toast.success(`Successfully ${verb} ${datasetChangeValues?.name || datasetId}.`);
+    setHasUnsavedChanges(false);
 
-      if (dataset && queryClient) {
-        queryClient.invalidateQueries({
-          queryKey: ["datasetsByFolder", dataset.folderId],
-        });
-        queryClient.invalidateQueries({ queryKey: ["dataset", "search"] });
-      }
+    if (dataset && queryClient) {
+      queryClient.invalidateQueries({
+        queryKey: ["datasetsByFolder", dataset.folderId],
+      });
+      queryClient.invalidateQueries({ queryKey: ["dataset", "search"] });
+    }
 
-      onComplete();
-    },
-    [
-      datasetId,
-      datasetDefaultConfiguration,
-      dataset,
-      didDatasourceChange,
-      didDatasourceIdChange,
-      isEditingMode,
-      queryClient,
-      onComplete,
-    ],
-  );
+    onComplete();
+  }, [
+    datasetId,
+    datasetDefaultConfiguration,
+    dataset,
+    didDatasourceChange,
+    didDatasourceIdChange,
+    isEditingMode,
+    queryClient,
+    onComplete,
+  ]);
 
-  const handleValidationFailed = useCallback(
-    ({ values }: { values: FormData }) => {
-      const isOnlyDatasourceIncorrectAndNotEditedResult = isOnlyDatasourceIncorrectAndNotEdited();
+  const handleValidationFailed = useCallback(() => {
+    const isOnlyDatasourceIncorrectAndNotEditedResult = isOnlyDatasourceIncorrectAndNotEdited();
 
-      if (!isOnlyDatasourceIncorrectAndNotEditedResult || !dataset) {
-        // TODO: Add logic to switch to problematic tab
-        console.warn("Validation failed, switching to problematic tab logic needed.");
-        Toast.warning(messages["dataset.import.invalid_fields"]);
-      } else {
-        submitForm(values);
-      }
-    },
-    [isOnlyDatasourceIncorrectAndNotEdited, dataset, submitForm],
-  );
+    if (!isOnlyDatasourceIncorrectAndNotEditedResult || !dataset) {
+      // TODO: Add logic to switch to problematic tab
+      console.warn("Validation failed, switching to problematic tab logic needed.");
+      Toast.warning(messages["dataset.import.invalid_fields"]);
+    } else {
+      submitForm();
+    }
+  }, [isOnlyDatasourceIncorrectAndNotEdited, dataset, submitForm]);
 
   const handleSubmit = useCallback(() => {
     syncDataSourceFields(form, activeDataSourceEditMode === "simple" ? "advanced" : "simple");
@@ -315,7 +299,7 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
         () =>
           form
             .validateFields()
-            .then((formValues) => submitForm(formValues))
+            .then(submitForm)
             .catch((errorInfo) => handleValidationFailed(errorInfo)),
         0,
       );
@@ -330,9 +314,8 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
   }, []);
 
   const handleCancel = useCallback(() => {
-    unblockHistory();
     onCancel();
-  }, [unblockHistory, onCancel]);
+  }, [onCancel]);
 
   const handleDataSourceEditModeChange = useCallback(
     (activeEditMode: "simple" | "advanced") => {
@@ -353,24 +336,23 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
     });
   }, [fetchData]);
 
-  const contextValue: DatasetSettingsContextValue = {
-    form,
-    isLoading,
-    hasUnsavedChanges,
-    dataset,
-    datasetId,
-    datasetDefaultConfiguration,
-    activeDataSourceEditMode,
-    savedDataSourceOnServer,
-    isEditingMode,
-    onComplete,
-    onCancel,
-    handleSubmit,
-    handleCancel,
-    handleDataSourceEditModeChange,
-    onValuesChange,
-    getFormValidationSummary,
-  };
+  const contextValue: DatasetSettingsContextValue = useMemo(
+    () => ({
+      form,
+      isLoading,
+      dataset,
+      datasetId,
+      datasetDefaultConfiguration,
+      activeDataSourceEditMode,
+      isEditingMode,
+      handleSubmit,
+      handleCancel,
+      handleDataSourceEditModeChange,
+      onValuesChange,
+      getFormValidationSummary,
+    }),
+    [isEditingMode, isLoading, datasetDefaultConfiguration, dataset, activeDataSourceEditMode],
+  );
 
   return (
     <DatasetSettingsContext.Provider value={contextValue}>
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
index d80176a7ac6..5e4ae02304c 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
@@ -17,11 +17,19 @@ import DatasetSettingsViewConfigTab from "./dataset_settings_viewconfig_tab";
 import { useWkSelector } from "libs/react_hooks";
 import type React from "react";
 import { useCallback } from "react";
-import { Link, Route, useHistory, useLocation, Switch } from "react-router-dom";
+import {
+  Route,
+  useHistory,
+  useLocation,
+  Switch,
+  Redirect,
+  type RouteComponentProps,
+} from "react-router-dom";
 import { Unicode } from "viewer/constants";
 import messages from "messages";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import type { MenuItemGroupType } from "antd/es/menu/interface";
+import features from "features";
 
 const { Sider, Content } = Layout;
 const FormItem = Form.Item;
@@ -35,55 +43,6 @@ const BREADCRUMB_LABELS = {
   delete: "Delete Dataset",
 };
 
-const MENU_ITEMS: MenuItemGroupType[] = [
-  {
-    label: "Dataset Settings",
-    type: "group",
-    children: [
-      {
-        key: "data",
-        icon: <CodeSandboxOutlined />,
-        label: "Data Source",
-      },
-      {
-        key: "sharing",
-        icon: <TeamOutlined />,
-        label: "Sharing & Permissions",
-      },
-      {
-        key: "metadata",
-        icon: <FileTextOutlined />,
-        label: "Metadata",
-      },
-      {
-        key: "defaultConfig",
-        icon: <SettingOutlined />,
-        label: "View Configuration",
-      },
-      {
-        key: "delete",
-        icon: <DeleteOutlined />,
-        label: "Delete",
-      },
-    ],
-  },
-  { type: "divider" },
-  {
-    type: "group",
-    children: [
-      {
-        key: "open",
-        icon: <ExportOutlined />,
-        label: "Open in WEBKNOSSOS",
-      },
-    ],
-  },
-];
-
-// if (isUserAdmin && features().allowDeleteDatasets) {
-//   MENU_ITEMS[0].children.push();
-// }
-
 const FIXED_SIDER_STYLE: React.CSSProperties = {
   overflow: "auto",
   height: "100vh",
@@ -189,22 +148,9 @@ const DatasetSettingsView: React.FC = () => {
     );
   }, [dataset, isEditingMode]);
 
+  const titleString = isEditingMode ? "Dataset Settings" : "Import";
   const maybeStoredDatasetName = dataset?.name || datasetId;
-  const maybeDataSourceId = dataset
-    ? {
-        owningOrganization: dataset.owningOrganization,
-        directoryName: dataset.directoryName,
-      }
-    : null;
 
-  const titleString = isEditingMode ? "Settings for" : "Import";
-  const datasetLinkOrName = isEditingMode ? (
-    <Link to={`/datasets/${dataset ? getReadableURLPart(dataset) : datasetId}/view`}>
-      {maybeStoredDatasetName}
-    </Link>
-  ) : (
-    maybeStoredDatasetName
-  );
   const confirmString =
     isEditingMode || (dataset != null && dataset.dataSource.status == null) ? "Save" : "Import";
   const formErrors = getFormValidationSummary();
@@ -219,11 +165,66 @@ const DatasetSettingsView: React.FC = () => {
     </Tooltip>
   );
 
+  const menuItems: MenuItemGroupType[] = [
+    {
+      label: titleString,
+      type: "group",
+      children: [
+        {
+          key: "data",
+          icon: <CodeSandboxOutlined />,
+          label: "Data Source",
+        },
+        {
+          key: "sharing",
+          icon: <TeamOutlined />,
+          label: "Sharing & Permissions",
+        },
+        {
+          key: "metadata",
+          icon: <FileTextOutlined />,
+          label: "Metadata",
+        },
+        {
+          key: "defaultConfig",
+          icon: <SettingOutlined />,
+          label: "View Configuration",
+        },
+        isUserAdmin && features().allowDeleteDatasets
+          ? {
+              key: "delete",
+              icon: <DeleteOutlined />,
+              label: "Delete",
+            }
+          : null,
+      ],
+    },
+    { type: "divider" },
+    {
+      type: "group",
+      children: isEditingMode
+        ? [
+            {
+              key: "open",
+              icon: <ExportOutlined />,
+              label: "Open in WEBKNOSSOS",
+              onClick: () =>
+                window.open(
+                  `/datasets/${dataset ? getReadableURLPart(dataset) : datasetId}/view`,
+                  "_blank",
+                  "noopener",
+                ),
+            },
+          ]
+        : [],
+    },
+  ];
+
   const breadcrumbItems = [
     {
-      title: "Dataset Settings",
+      title: titleString,
     },
-    { title: dataset?.name },
+    { title: maybeStoredDatasetName },
     {
       title: BREADCRUMB_LABELS[selectedKey as keyof typeof BREADCRUMB_LABELS],
     },
@@ -238,7 +239,7 @@ const DatasetSettingsView: React.FC = () => {
           mode="inline"
           selectedKeys={[selectedKey]}
           style={{ height: "100%", padding: 24 }}
-          items={MENU_ITEMS}
+          items={menuItems}
           onClick={({ key }) => history.push(`/datasets/${datasetId}/edit/${key}`)}
         />
       </Sider>
@@ -267,17 +268,18 @@ const DatasetSettingsView: React.FC = () => {
             />
             <Route
               path="/datasets/:datasetNameAndId/edit/defaultConfig"
-              render={() => (
-                <DatasetSettingsViewConfigTab
-                  dataSourceId={maybeDataSourceId}
-                  dataStoreURL={dataset?.dataStore.url}
-                />
-              )}
+              component={DatasetSettingsViewConfigTab}
             />
             <Route
               path="/datasets/:datasetNameAndId/edit/delete"
               component={DatasetSettingsDeleteTab}
             />
+            <Route
+              path="/datasets/:datasetNameAndId/edit"
+              render={({ match }: RouteComponentProps<{ datasetNameAndId: string }>) => (
+                <Redirect to={`/datasets/${match.params.datasetNameAndId}/edit/data`} />
+              )}
+            />
           </Switch>
           <FormItem
             style={{
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
index 4e88b6080a3..a70ea5bba47 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
@@ -1,27 +1,10 @@
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { getAgglomeratesForDatasetLayer, getMappingsForDatasetLayer } from "admin/rest_api";
-import {
-  Checkbox,
-  Col,
-  Form,
-  Input,
-  InputNumber,
-  Row,
-  Select,
-  Space,
-  Switch,
-  Table,
-  Tooltip,
-} from "antd";
+import { Col, Form, Input, InputNumber, Row, Select, Switch, Table, Tooltip } from "antd";
 import { Slider } from "components/slider";
 import { Vector3Input } from "libs/vector_input";
 import _ from "lodash";
-import messages, {
-  type RecommendedConfiguration,
-  layerViewConfigurations,
-  settings,
-  settingsTooltips,
-} from "messages";
+import messages, { layerViewConfigurations, settings, settingsTooltips } from "messages";
 import { useMemo, useState } from "react";
 import type { APIDataSourceId } from "types/api_types";
 import { getDefaultLayerViewConfiguration } from "types/schemas/dataset_view_configuration.schema";
@@ -31,21 +14,25 @@ import type { DatasetConfiguration, DatasetLayerConfiguration } from "viewer/sto
 import ColorLayerOrderingTable from "./color_layer_ordering_component";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
 import { jsonEditStyle } from "./helper_components";
-import { SettingsCard, SettingsCardProps } from "admin/account/helpers/settings_card";
+import { SettingsCard, type SettingsCardProps } from "admin/account/helpers/settings_card";
 import { SettingsTitle } from "admin/account/helpers/settings_title";
 
 const FormItem = Form.Item;
 
-export default function DatasetSettingsViewConfigTab(props: {
-  dataSourceId: APIDataSourceId;
-  dataStoreURL: string | undefined;
-}) {
-  const { dataSourceId, dataStoreURL } = props;
+export default function DatasetSettingsViewConfigTab() {
   const [availableMappingsPerLayerCache, setAvailableMappingsPerLayer] = useState<
     Record<string, [string[], string[]]>
   >({});
 
   const { dataset } = useDatasetSettingsContext();
+  const dataStoreURL = dataset?.dataStore.url;
+  const dataSourceId = dataset
+    ? {
+        owningOrganization: dataset.owningOrganization,
+        directoryName: dataset.directoryName,
+      }
+    : null;
+
   const validateDefaultMappings = useMemo(
     () => async (configStr: string, dataStoreURL: string, dataSourceId: APIDataSourceId) => {
       let config = {} as DatasetConfiguration["layers"];
diff --git a/frontend/javascripts/dashboard/dataset/useBeforeUnload_hook.ts b/frontend/javascripts/dashboard/dataset/useBeforeUnload_hook.ts
index 315afd2e89d..66a09282334 100644
--- a/frontend/javascripts/dashboard/dataset/useBeforeUnload_hook.ts
+++ b/frontend/javascripts/dashboard/dataset/useBeforeUnload_hook.ts
@@ -31,7 +31,7 @@ const useBeforeUnload = (hasUnsavedChanges: boolean, message: string) => {
       // Only show the prompt if this is a proper beforeUnload event from the browser
       // or the pathname changed
       // This check has to be done because history.block triggers this function even if only the url hash changed
-      if (action === undefined || newLocation.pathname !== window.location.pathname) {
+      if (action === undefined || !newLocation.pathname.includes("/datasets")) {
         if (hasUnsavedChanges) {
           window.onbeforeunload = null; // clear the event handler otherwise it would be called twice. Once from history.block once from the beforeunload event
           blockTimeoutIdRef.current = window.setTimeout(() => {

From fd6f247dce11a97722f17bc05fcf1f6922fe00f1 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Fri, 11 Jul 2025 13:41:10 +0200
Subject: [PATCH 8/9] add useQuery to fro dataset sharing token

---
 .../components/async_clickables.tsx           |  31 ++++
 .../dataset/dataset_settings_sharing_tab.tsx  | 165 +++++++++---------
 2 files changed, 117 insertions(+), 79 deletions(-)

diff --git a/frontend/javascripts/components/async_clickables.tsx b/frontend/javascripts/components/async_clickables.tsx
index 043b0f602be..1694fd8a160 100644
--- a/frontend/javascripts/components/async_clickables.tsx
+++ b/frontend/javascripts/components/async_clickables.tsx
@@ -4,11 +4,26 @@ import * as React from "react";
 import FastTooltip from "./fast_tooltip";
 const { useState, useEffect, useRef } = React;
 
+/**
+ * Props for the AsyncButton component.
+ */
 export type AsyncButtonProps = Omit<ButtonProps, "onClick"> & {
+  /**
+   * If true, the button's content will be hidden when it is in the loading state.
+   */
   hideContentWhenLoading?: boolean;
+  /**
+   * The async function to be called when the button is clicked.
+   * It should return a promise that resolves when the async operation is complete.
+   */
   onClick: (event: React.MouseEvent) => Promise<any>;
 };
 
+/**
+ * A React hook that wraps an async onClick handler to manage a loading state.
+ * @param originalOnClick The async function to be called when the element is clicked.
+ * @returns A tuple containing a boolean `isLoading` state and the wrapped `onClick` handler.
+ */
 function useLoadingClickHandler(
   originalOnClick: (event: React.MouseEvent) => Promise<any>,
 ): [boolean, React.MouseEventHandler] {
@@ -41,6 +56,11 @@ function useLoadingClickHandler(
   return [isLoading, onClick];
 }
 
+/**
+ * A button component that handles asynchronous actions.
+ * It displays a loading indicator while the `onClick` promise is pending.
+ * It is a wrapper around the antd Button component.
+ */
 export function AsyncButton(props: AsyncButtonProps) {
   const [isLoading, onClick] = useLoadingClickHandler(props.onClick);
   const { children, hideContentWhenLoading, title, ...rest } = props;
@@ -56,14 +76,25 @@ export function AsyncButton(props: AsyncButtonProps) {
     </FastTooltip>
   );
 }
+
+/**
+ * An icon button component that handles asynchronous actions.
+ * It displays a loading indicator in place of the icon while the `onClick` promise is pending.
+ */
 export function AsyncIconButton(
   props: Omit<AsyncButtonProps, "icon"> & {
+    /** The icon to be displayed on the button. */
     icon: React.ReactElement<any>;
   },
 ) {
   const [isLoading, onClick] = useLoadingClickHandler(props.onClick);
   return React.cloneElement(isLoading ? <LoadingOutlined /> : props.icon, { ...props, onClick });
 }
+
+/**
+ * A link component that handles asynchronous actions.
+ * It displays a loading indicator before the link text while the `onClick` promise is pending.
+ */
 export function AsyncLink(props: AsyncButtonProps) {
   const [isLoading, onClick] = useLoadingClickHandler(props.onClick);
   const icon = isLoading ? (
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
index 15a3a3a9d39..46923cf9f5e 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
@@ -9,42 +9,41 @@ import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
 import { useEffectOnlyOnce, useWkSelector } from "libs/react_hooks";
 import { isUserAdminOrDatasetManager, isUserAdminOrTeamManager } from "libs/utils";
 import window from "libs/window";
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
 import { SettingsTitle } from "admin/account/helpers/settings_title";
 import { SettingsCard, type SettingsCardProps } from "admin/account/helpers/settings_card";
 import { useWatch } from "antd/es/form/Form";
+import { useQuery } from "@tanstack/react-query";
 
 export default function DatasetSettingsSharingTab() {
   const { form, datasetId, dataset } = useDatasetSettingsContext();
-  const [sharingToken, setSharingToken] = useState("");
   const activeUser = useWkSelector((state) => state.activeUser);
   const isDatasetManagerOrAdmin = isUserAdminOrDatasetManager(activeUser);
 
   const isDatasetPublic = useWatch(["dataset", "isPublic"], form);
-
-  async function fetch() {
-    const newSharingToken = await getDatasetSharingToken(datasetId);
-    setSharingToken(newSharingToken);
-  }
-
-  useEffectOnlyOnce(() => {
-    fetch();
+  const { data: sharingToken, refetch } = useQuery({
+    queryKey: ["datasetSharingToken", datasetId],
+    queryFn: () => getDatasetSharingToken(datasetId),
   });
 
-  async function handleRevokeSharingLink(): Promise<void> {
+  const handleRevokeSharingLink = useCallback(async () => {
     await revokeDatasetSharingToken(datasetId);
-    const newSharingToken = await getDatasetSharingToken(datasetId);
-    setSharingToken(newSharingToken);
-  }
+    refetch();
+  }, [datasetId, refetch]);
 
-  function getSharingLink() {
+  const sharingLink = useMemo(() => {
     const tokenSuffix = `?token=${sharingToken}`;
-    return `${window.location.origin}/datasets/${dataset ? getReadableURLPart(dataset) : datasetId}/view${isDatasetPublic ? "" : tokenSuffix}`;
-  }
+    const sharingLink = `${window.location.origin}/datasets/${dataset ? getReadableURLPart(dataset) : datasetId}/view${isDatasetPublic ? "" : tokenSuffix}`;
+    return (
+      <Typography.Paragraph copyable ellipsis={{ expandable: true }}>
+        {sharingLink}
+      </Typography.Paragraph>
+    );
+  }, [dataset, datasetId, isDatasetPublic, sharingToken]);
 
-  function getUserAccessList() {
+  const userAccessList = useMemo(() => {
     if (!activeUser || !dataset) return undefined;
     if (!isUserAdminOrTeamManager(activeUser)) return undefined;
 
@@ -61,69 +60,77 @@ export default function DatasetSettingsSharingTab() {
         ]}
       />
     );
-  }
+  }, [activeUser, dataset]);
 
-  const sharingItems: SettingsCardProps[] = [
-    {
-      title: "Make dataset publicly accessible",
-      tooltip: "Make your dataset public, for anonymous/unregistered users to access your dataset.",
-      content: (
-        <Form.Item name={["dataset", "isPublic"]} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-      ),
-    },
-    {
-      title: "Additional team access permissions for this dataset",
-      tooltip:
-        "The dataset can be seen by administrators, dataset managers and by teams that have access to the folder in which the dataset is located. If you want to grant additional teams access, define these teams here.",
-      content: (
-        <Form.Item name={["dataset", "allowedTeams"]} validateStatus="success">
-          <PricingEnforcedBlur requiredPricingPlan={PricingPlanEnum.Team}>
-            <TeamSelectionComponent
-              mode="multiple"
-              allowNonEditableTeams={isDatasetManagerOrAdmin}
-            />
-          </PricingEnforcedBlur>
-        </Form.Item>
-      ),
-    },
-    {
-      title: "Sharing Link",
-      content: (
-        <>
-          <Typography.Paragraph copyable ellipsis={{ expandable: true }}>
-            {getSharingLink()}
-          </Typography.Paragraph>
-          <Space.Compact>
-            {!isDatasetPublic && (
-              <Tooltip
-                title={
-                  <span>
-                    The URL contains a secret token which enables anybody with this link to view the
-                    dataset. Renew the token to make the old link invalid.
-                  </span>
-                }
-              >
-                <AsyncButton onClick={handleRevokeSharingLink} icon={<RetweetOutlined />}>
-                  Renew Authorization Token
-                </AsyncButton>
-              </Tooltip>
-            )}
-          </Space.Compact>
-        </>
-      ),
-      tooltip:
-        "The sharing link can be used to allow unregistered users to view this dataset. If the dataset itself is not public, the link contains a secret token which ensures that the dataset can be opened if you know the special link.",
-    },
+  const sharingItems: SettingsCardProps[] = useMemo(
+    () => [
+      {
+        title: "Make dataset publicly accessible",
+        tooltip:
+          "Make your dataset public, for anonymous/unregistered users to access your dataset.",
+        content: (
+          <Form.Item name={["dataset", "isPublic"]} valuePropName="checked">
+            <Switch />
+          </Form.Item>
+        ),
+      },
+      {
+        title: "Additional team access permissions for this dataset",
+        tooltip:
+          "The dataset can be seen by administrators, dataset managers and by teams that have access to the folder in which the dataset is located. If you want to grant additional teams access, define these teams here.",
+        content: (
+          <Form.Item name={["dataset", "allowedTeams"]} validateStatus="success">
+            <PricingEnforcedBlur requiredPricingPlan={PricingPlanEnum.Team}>
+              <TeamSelectionComponent
+                mode="multiple"
+                allowNonEditableTeams={isDatasetManagerOrAdmin}
+              />
+            </PricingEnforcedBlur>
+          </Form.Item>
+        ),
+      },
+      {
+        title: "Sharing Link",
+        content: (
+          <>
+            {sharingLink}
+            <Space.Compact>
+              {!isDatasetPublic && (
+                <Tooltip
+                  title={
+                    <span>
+                      The URL contains a secret token which enables anybody with this link to view
+                      the dataset. Renew the token to make the old link invalid.
+                    </span>
+                  }
+                >
+                  <AsyncButton onClick={handleRevokeSharingLink} icon={<RetweetOutlined />}>
+                    Renew Authorization Token
+                  </AsyncButton>
+                </Tooltip>
+              )}
+            </Space.Compact>
+          </>
+        ),
+        tooltip:
+          "The sharing link can be used to allow unregistered users to view this dataset. If the dataset itself is not public, the link contains a secret token which ensures that the dataset can be opened if you know the special link.",
+      },
 
-    {
-      title: "Users with access permission to work with this dataset",
-      tooltip:
-        "Dataset access is based on the specified team permissions and individual user roles. Any changes will only appear after pressing the Save button.",
-      content: getUserAccessList(),
-    },
-  ];
+      {
+        title: "Users with access permission to work with this dataset",
+        tooltip:
+          "Dataset access is based on the specified team permissions and individual user roles. Any changes will only appear after pressing the Save button.",
+        content: userAccessList,
+      },
+    ],
+    [
+      sharingLink,
+      userAccessList,
+      handleRevokeSharingLink,
+      isDatasetPublic,
+      isDatasetManagerOrAdmin,
+    ],
+  );
 
   return (
     <div>

From b5b2da1ad6822d0684d46522753d813f382f3757 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Fri, 11 Jul 2025 14:07:29 +0200
Subject: [PATCH 9/9] formatting and types

---
 .../color_layer_ordering_component.tsx        | 48 ++++++++---------
 .../dataset/dataset_settings_data_tab.tsx     | 14 ++---
 .../dataset/dataset_settings_delete_tab.tsx   | 10 ++--
 .../dataset/dataset_settings_metadata_tab.tsx |  2 +-
 .../dataset/dataset_settings_provider.tsx     | 51 ++++++++-----------
 .../dataset/dataset_settings_sharing_tab.tsx  | 12 ++---
 .../dataset/dataset_settings_view.tsx         | 35 +++++--------
 .../dataset_settings_viewconfig_tab.tsx       | 19 +++----
 .../dashboard/dataset/helper_components.tsx   |  6 +--
 frontend/javascripts/router.tsx               |  2 +-
 10 files changed, 92 insertions(+), 107 deletions(-)

diff --git a/frontend/javascripts/dashboard/dataset/color_layer_ordering_component.tsx b/frontend/javascripts/dashboard/dataset/color_layer_ordering_component.tsx
index d06042452a9..b925dc6567d 100644
--- a/frontend/javascripts/dashboard/dataset/color_layer_ordering_component.tsx
+++ b/frontend/javascripts/dashboard/dataset/color_layer_ordering_component.tsx
@@ -1,9 +1,10 @@
-import { InfoCircleOutlined, MenuOutlined } from "@ant-design/icons";
+import { MenuOutlined } from "@ant-design/icons";
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { Collapse, type CollapseProps, List, Tooltip } from "antd";
-import { settings, settingsTooltips } from "messages";
+import { Collapse, type CollapseProps, List } from "antd";
+import { settingsTooltips } from "messages";
+import { useCallback } from "react";
 
 // Example taken and modified from https://ant.design/components/table/#components-table-demo-drag-sorting-handler.
 
@@ -34,23 +35,26 @@ export default function ColorLayerOrderingTable({
   colorLayerNames?: string[];
   onChange?: (newColorLayerNames: string[]) => void;
 }) {
-  const onSortEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
+  const onSortEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
 
-    if (active && over && colorLayerNames) {
-      const oldIndex = colorLayerNames.indexOf(active.id as string);
-      const newIndex = colorLayerNames.indexOf(over.id as string);
+      if (active && over && colorLayerNames) {
+        const oldIndex = colorLayerNames.indexOf(active.id as string);
+        const newIndex = colorLayerNames.indexOf(over.id as string);
 
-      document.body.classList.remove("is-dragging");
+        document.body.classList.remove("is-dragging");
 
-      if (oldIndex !== newIndex && onChange) {
-        const movedElement = colorLayerNames[oldIndex];
-        const newColorLayerNames = colorLayerNames.filter((_, index) => index !== oldIndex);
-        newColorLayerNames.splice(newIndex, 0, movedElement);
-        onChange(newColorLayerNames);
+        if (oldIndex !== newIndex && onChange) {
+          const movedElement = colorLayerNames[oldIndex];
+          const newColorLayerNames = colorLayerNames.filter((_, index) => index !== oldIndex);
+          newColorLayerNames.splice(newIndex, 0, movedElement);
+          onChange(newColorLayerNames);
+        }
       }
-    }
-  };
+    },
+    [colorLayerNames, onChange],
+  );
 
   const isSettingEnabled = colorLayerNames && colorLayerNames.length > 1;
   const sortingItems = isSettingEnabled ? colorLayerNames.map((name) => name) : [];
@@ -65,14 +69,12 @@ export default function ColorLayerOrderingTable({
     },
   ];
 
+  const onDragStart = useCallback(() => {
+    colorLayerNames && colorLayerNames.length > 1 && document.body.classList.add("is-dragging");
+  }, [colorLayerNames]);
+
   return isSettingEnabled ? (
-    <DndContext
-      autoScroll={false}
-      onDragStart={() => {
-        colorLayerNames && colorLayerNames.length > 1 && document.body.classList.add("is-dragging");
-      }}
-      onDragEnd={onSortEnd}
-    >
+    <DndContext autoScroll={false} onDragStart={onDragStart} onDragEnd={onSortEnd}>
       <SortableContext items={sortingItems} strategy={verticalListSortingStrategy}>
         <Collapse
           defaultActiveKey={[]}
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
index 6ce0432df9b..5369c19bc7d 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_data_tab.tsx
@@ -1,5 +1,8 @@
 import { CopyOutlined, DeleteOutlined } from "@ant-design/icons";
+import { SettingsCard } from "admin/account/helpers/settings_card";
+import { SettingsTitle } from "admin/account/helpers/settings_title";
 import { getDatasetNameRules, layerNameRules } from "admin/dataset/dataset_components";
+import { useStartAndPollJob } from "admin/job/job_hooks";
 import { startFindLargestSegmentIdJob } from "admin/rest_api";
 import {
   Button,
@@ -8,14 +11,12 @@ import {
   type FormInstance,
   Input,
   InputNumber,
-  List,
   Row,
   Select,
   Space,
   Switch,
   Tooltip,
 } from "antd";
-import { useStartAndPollJob } from "admin/job/job_hooks";
 import {
   FormItemWithInfo,
   Hideable,
@@ -26,7 +27,8 @@ import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { jsonStringify, parseMaybe } from "libs/utils";
 import { BoundingBoxInput, Vector3Input } from "libs/vector_input";
-import * as React from "react";
+import type React from "react";
+import { cloneElement, useEffect } from "react";
 import { type APIDataLayer, type APIDataset, APIJobType } from "types/api_types";
 import type { ArbitraryObject } from "types/globals";
 import type { DataLayer } from "types/schemas/datasource.types";
@@ -36,8 +38,6 @@ import { getSupportedValueRangeForElementClass } from "viewer/model/bucket_data_
 import type { BoundingBoxObject } from "viewer/store";
 import { AxisRotationSettingForDataset } from "./dataset_rotation_form_item";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
-import { SettingsTitle } from "admin/account/helpers/settings_title";
-import { SettingsCard } from "admin/account/helpers/settings_card";
 
 const FormItem = Form.Item;
 
@@ -355,7 +355,7 @@ function SimpleLayerForm({
   const mayLayerBeRemoved = dataLayers?.length > 1;
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Always revalidate in case the user changes the data layers in the form.
-  React.useEffect(() => {
+  useEffect(() => {
     // Always validate all fields so that in the case of duplicate layer
     // names all relevant fields are properly validated.
     // This is a workaround, since shouldUpdate=true on a
@@ -669,7 +669,7 @@ function DelegatePropsToFirstChild({ children, ...props }: { children: React.Rea
   // even though antd only demands one. We do this for better layouting.
   return (
     <>
-      {React.cloneElement(children[0], props)}
+      {cloneElement(children[0], props)}
       {children[1]}
     </>
   );
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
index 684695a4296..76781012fca 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
@@ -1,14 +1,14 @@
 import { useQueryClient } from "@tanstack/react-query";
+import { SettingsCard } from "admin/account/helpers/settings_card";
+import { SettingsTitle } from "admin/account/helpers/settings_title";
 import { deleteDatasetOnDisk } from "admin/rest_api";
 import { Button, Col, Row } from "antd";
 import Toast from "libs/toast";
 import messages from "messages";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
 import { confirmAsync } from "./helper_components";
-import { SettingsCard } from "admin/account/helpers/settings_card";
-import { SettingsTitle } from "admin/account/helpers/settings_title";
 
 const DatasetSettingsDeleteTab = () => {
   const { dataset } = useDatasetSettingsContext();
@@ -16,7 +16,7 @@ const DatasetSettingsDeleteTab = () => {
   const queryClient = useQueryClient();
   const history = useHistory();
 
-  async function handleDeleteButtonClicked(): Promise<void> {
+  const handleDeleteButtonClicked = useCallback(async () => {
     if (!dataset) {
       return;
     }
@@ -50,7 +50,7 @@ const DatasetSettingsDeleteTab = () => {
     queryClient.invalidateQueries({ queryKey: ["dataset", "search"] });
 
     history.push("/dashboard");
-  }
+  }, [dataset, history, queryClient]);
 
   return (
     <div>
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_metadata_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_metadata_tab.tsx
index 8cfc0bbd874..0746e9526ea 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_metadata_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_metadata_tab.tsx
@@ -1,6 +1,6 @@
-import { Col, DatePicker, Form, Input, Row } from "antd";
 import { SettingsCard, type SettingsCardProps } from "admin/account/helpers/settings_card";
 import { SettingsTitle } from "admin/account/helpers/settings_title";
+import { Col, DatePicker, Form, Input, Row } from "antd";
 
 export default function DatasetSettingsMetadataTab() {
   const metadataItems: SettingsCardProps[] = [
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
index 2f9c8200533..452c1b8f898 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_provider.tsx
@@ -16,7 +16,8 @@ import Toast from "libs/toast";
 import { jsonStringify } from "libs/utils";
 import _ from "lodash";
 import messages from "messages";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
 import type { APIDataSource, APIDataset, MutableAPIDataset } from "types/api_types";
 import { enforceValidatedDatasetViewConfiguration } from "types/schemas/dataset_view_configuration_defaults";
 import {
@@ -30,11 +31,10 @@ import {
   DatasetSettingsContext,
   type DatasetSettingsContextValue,
 } from "./dataset_settings_context";
-import { syncDataSourceFields } from "./dataset_settings_data_tab";
 import type { FormData } from "./dataset_settings_context";
+import { syncDataSourceFields } from "./dataset_settings_data_tab";
 import { hasFormError } from "./helper_components";
 import useBeforeUnload from "./useBeforeUnload_hook";
-import { useHistory } from "react-router-dom";
 
 type DatasetSettingsProviderProps = {
   children: React.ReactNode;
@@ -102,6 +102,7 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
       });
 
       form.setFieldsValue({
+        // @ts-ignore Missmatch between APIDataSource and MutableAPIDataset
         dataSource,
       });
 
@@ -112,6 +113,7 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
           !firstLayerTransformations ||
           firstLayerTransformations.length !== EXPECTED_TRANSFORMATION_LENGTH
         ) {
+          3;
           const nulledSetting = { rotationInDegrees: 0, isMirrored: false };
           initialDatasetRotationSettings = { x: nulledSetting, y: nulledSetting, z: nulledSetting };
         } else {
@@ -160,7 +162,7 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
       setIsLoading(false);
       form.validateFields();
     }
-  }, [datasetId]);
+  }, [datasetId, form.setFieldsValue, form.validateFields]);
 
   const getFormValidationSummary = useCallback((): Record<string, any> => {
     const err = form.getFieldsError();
@@ -277,6 +279,7 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
     isEditingMode,
     queryClient,
     onComplete,
+    form.getFieldsValue,
   ]);
 
   const handleValidationFailed = useCallback(() => {
@@ -295,14 +298,7 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
     syncDataSourceFields(form, activeDataSourceEditMode === "simple" ? "advanced" : "simple");
 
     const afterForceUpdateCallback = () => {
-      setTimeout(
-        () =>
-          form
-            .validateFields()
-            .then(submitForm)
-            .catch((errorInfo) => handleValidationFailed(errorInfo)),
-        0,
-      );
+      setTimeout(() => form.validateFields().then(submitForm).catch(handleValidationFailed), 0);
     };
 
     setActiveDataSourceEditMode((prev) => prev);
@@ -336,23 +332,20 @@ export const DatasetSettingsProvider: React.FC<DatasetSettingsProviderProps> = (
     });
   }, [fetchData]);
 
-  const contextValue: DatasetSettingsContextValue = useMemo(
-    () => ({
-      form,
-      isLoading,
-      dataset,
-      datasetId,
-      datasetDefaultConfiguration,
-      activeDataSourceEditMode,
-      isEditingMode,
-      handleSubmit,
-      handleCancel,
-      handleDataSourceEditModeChange,
-      onValuesChange,
-      getFormValidationSummary,
-    }),
-    [isEditingMode, isLoading, datasetDefaultConfiguration, dataset, activeDataSourceEditMode],
-  );
+  const contextValue: DatasetSettingsContextValue = {
+    form,
+    isLoading,
+    dataset,
+    datasetId,
+    datasetDefaultConfiguration,
+    activeDataSourceEditMode,
+    isEditingMode,
+    handleSubmit,
+    handleCancel,
+    handleDataSourceEditModeChange,
+    onValuesChange,
+    getFormValidationSummary,
+  };
 
   return (
     <DatasetSettingsContext.Provider value={contextValue}>
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
index 46923cf9f5e..21bfa6ea526 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
@@ -1,21 +1,21 @@
 import { RetweetOutlined } from "@ant-design/icons";
+import { useQuery } from "@tanstack/react-query";
+import { SettingsCard, type SettingsCardProps } from "admin/account/helpers/settings_card";
+import { SettingsTitle } from "admin/account/helpers/settings_title";
 import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
 import { getDatasetSharingToken, revokeDatasetSharingToken } from "admin/rest_api";
 import { Col, Collapse, Form, Row, Space, Switch, Tooltip, Typography } from "antd";
+import { useWatch } from "antd/es/form/Form";
 import { AsyncButton } from "components/async_clickables";
 import { PricingEnforcedBlur } from "components/pricing_enforcers";
 import DatasetAccessListView from "dashboard/advanced_dataset/dataset_access_list_view";
 import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
-import { useEffectOnlyOnce, useWkSelector } from "libs/react_hooks";
+import { useWkSelector } from "libs/react_hooks";
 import { isUserAdminOrDatasetManager, isUserAdminOrTeamManager } from "libs/utils";
 import window from "libs/window";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
-import { SettingsTitle } from "admin/account/helpers/settings_title";
-import { SettingsCard, type SettingsCardProps } from "admin/account/helpers/settings_card";
-import { useWatch } from "antd/es/form/Form";
-import { useQuery } from "@tanstack/react-query";
 
 export default function DatasetSettingsSharingTab() {
   const { form, datasetId, dataset } = useDatasetSettingsContext();
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
index 5e4ae02304c..cdad574641a 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
@@ -8,28 +8,28 @@ import {
   TeamOutlined,
 } from "@ant-design/icons";
 import { Alert, Breadcrumb, Button, Form, Layout, Menu, Tooltip } from "antd";
+import type { ItemType } from "antd/es/menu/interface";
 import { useDatasetSettingsContext } from "dashboard/dataset/dataset_settings_context";
 import DatasetSettingsDataTab from "dashboard/dataset/dataset_settings_data_tab";
 import DatasetSettingsDeleteTab from "dashboard/dataset/dataset_settings_delete_tab";
 import DatasetSettingsMetadataTab from "dashboard/dataset/dataset_settings_metadata_tab";
 import DatasetSettingsSharingTab from "dashboard/dataset/dataset_settings_sharing_tab";
-import DatasetSettingsViewConfigTab from "./dataset_settings_viewconfig_tab";
+import features from "features";
 import { useWkSelector } from "libs/react_hooks";
+import messages from "messages";
 import type React from "react";
 import { useCallback } from "react";
 import {
+  Redirect,
   Route,
+  type RouteComponentProps,
+  Switch,
   useHistory,
   useLocation,
-  Switch,
-  Redirect,
-  type RouteComponentProps,
 } from "react-router-dom";
 import { Unicode } from "viewer/constants";
-import messages from "messages";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
-import type { MenuItemGroupType } from "antd/es/menu/interface";
-import features from "features";
+import DatasetSettingsViewConfigTab from "./dataset_settings_viewconfig_tab";
 
 const { Sider, Content } = Layout;
 const FormItem = Form.Item;
@@ -43,17 +43,6 @@ const BREADCRUMB_LABELS = {
   delete: "Delete Dataset",
 };
 
-const FIXED_SIDER_STYLE: React.CSSProperties = {
-  overflow: "auto",
-  height: "100vh",
-  position: "sticky",
-  insetInlineStart: 0,
-  top: 0,
-  bottom: 0,
-  scrollbarWidth: "thin",
-  scrollbarGutter: "stable",
-};
-
 const DatasetSettingsView: React.FC = () => {
   const {
     form,
@@ -165,29 +154,29 @@ const DatasetSettingsView: React.FC = () => {
     </Tooltip>
   );
 
-  const menuItems: MenuItemGroupType[] = [
+  const menuItems: ItemType[] = [
     {
       label: titleString,
       type: "group",
       children: [
         {
           key: "data",
-          icon: <CodeSandboxOutlined />,
+          icon: formErrors.data ? errorIcon : <CodeSandboxOutlined />,
           label: "Data Source",
         },
         {
           key: "sharing",
-          icon: <TeamOutlined />,
+          icon: formErrors.sharing ? errorIcon : <TeamOutlined />,
           label: "Sharing & Permissions",
         },
         {
           key: "metadata",
-          icon: <FileTextOutlined />,
+          icon: formErrors.metadata ? errorIcon : <FileTextOutlined />,
           label: "Metadata",
         },
         {
           key: "defaultConfig",
-          icon: <SettingOutlined />,
+          icon: formErrors.defaultConfig ? errorIcon : <SettingOutlined />,
           label: "View Configuration",
         },
         isUserAdmin && features().allowDeleteDatasets
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
index a70ea5bba47..7fdf1f4a04e 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx
@@ -1,4 +1,6 @@
 import { InfoCircleOutlined } from "@ant-design/icons";
+import { SettingsCard, type SettingsCardProps } from "admin/account/helpers/settings_card";
+import { SettingsTitle } from "admin/account/helpers/settings_title";
 import { getAgglomeratesForDatasetLayer, getMappingsForDatasetLayer } from "admin/rest_api";
 import { Col, Form, Input, InputNumber, Row, Select, Switch, Table, Tooltip } from "antd";
 import { Slider } from "components/slider";
@@ -14,8 +16,6 @@ import type { DatasetConfiguration, DatasetLayerConfiguration } from "viewer/sto
 import ColorLayerOrderingTable from "./color_layer_ordering_component";
 import { useDatasetSettingsContext } from "./dataset_settings_context";
 import { jsonEditStyle } from "./helper_components";
-import { SettingsCard, type SettingsCardProps } from "admin/account/helpers/settings_card";
-import { SettingsTitle } from "admin/account/helpers/settings_title";
 
 const FormItem = Form.Item;
 
@@ -26,13 +26,14 @@ export default function DatasetSettingsViewConfigTab() {
 
   const { dataset } = useDatasetSettingsContext();
   const dataStoreURL = dataset?.dataStore.url;
-  const dataSourceId = dataset
+  const dataSourceId: APIDataSourceId | null = dataset
     ? {
         owningOrganization: dataset.owningOrganization,
         directoryName: dataset.directoryName,
       }
     : null;
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: validate on dataset change
   const validateDefaultMappings = useMemo(
     () => async (configStr: string, dataStoreURL: string, dataSourceId: APIDataSourceId) => {
       let config = {} as DatasetConfiguration["layers"];
@@ -195,7 +196,7 @@ export default function DatasetSettingsViewConfigTab() {
       ),
     },
     {
-      title: settings.interpolation,
+      title: settings.interpolation as string,
       tooltip: settingsTooltips.interpolation,
       content: (
         <Form.Item name={["defaultConfiguration", "interpolation"]} valuePropName="checked">
@@ -204,7 +205,7 @@ export default function DatasetSettingsViewConfigTab() {
       ),
     },
     {
-      title: settings.fourBit,
+      title: settings.fourBit as string,
       tooltip: settingsTooltips.fourBit,
       content: (
         <Form.Item name={["defaultConfiguration", "fourBit"]} valuePropName="checked">
@@ -213,7 +214,7 @@ export default function DatasetSettingsViewConfigTab() {
       ),
     },
     {
-      title: settings.renderMissingDataBlack,
+      title: settings.renderMissingDataBlack as string,
       tooltip: settingsTooltips.renderMissingDataBlack,
       content: (
         <Form.Item
@@ -225,7 +226,7 @@ export default function DatasetSettingsViewConfigTab() {
       ),
     },
     {
-      title: settings.segmentationPatternOpacity,
+      title: settings.segmentationPatternOpacity as string,
       tooltip: settingsTooltips.segmentationPatternOpacity,
       content: (
         <Row>
@@ -243,7 +244,7 @@ export default function DatasetSettingsViewConfigTab() {
       ),
     },
     {
-      title: settings.blendMode,
+      title: settings.blendMode as string,
       tooltip: settingsTooltips.blendMode,
       content: (
         <Form.Item name={["defaultConfiguration", "blendMode"]}>
@@ -255,7 +256,7 @@ export default function DatasetSettingsViewConfigTab() {
       ),
     },
     {
-      title: settings.loadingStrategy,
+      title: settings.loadingStrategy as string,
       tooltip: settingsTooltips.loadingStrategy,
       content: (
         <Form.Item name={["defaultConfiguration", "loadingStrategy"]}>
diff --git a/frontend/javascripts/dashboard/dataset/helper_components.tsx b/frontend/javascripts/dashboard/dataset/helper_components.tsx
index 53f4ac04462..a41eecca0cd 100644
--- a/frontend/javascripts/dashboard/dataset/helper_components.tsx
+++ b/frontend/javascripts/dashboard/dataset/helper_components.tsx
@@ -2,9 +2,9 @@ import { InfoCircleOutlined } from "@ant-design/icons";
 import { Alert, Form, Modal, Tooltip } from "antd";
 import type { FormItemProps, Rule } from "antd/lib/form";
 import type { NamePath } from "antd/lib/form/interface";
-import _ from "lodash";
+import { sum } from "lodash";
 import type { FieldError } from "rc-field-form/es/interface";
-import * as React from "react";
+import React from "react";
 
 const FormItem = Form.Item;
 
@@ -125,5 +125,5 @@ export const hasFormError = (formErrors: FieldError[], key: string): boolean =>
   const errorsForKey = formErrors.map((errorObj) =>
     errorObj.name[0] === key ? errorObj.errors.length : 0,
   );
-  return _.sum(errorsForKey) > 0;
+  return sum(errorsForKey) > 0;
 };
diff --git a/frontend/javascripts/router.tsx b/frontend/javascripts/router.tsx
index cbc920c33c1..3cb69beaefa 100644
--- a/frontend/javascripts/router.tsx
+++ b/frontend/javascripts/router.tsx
@@ -69,12 +69,12 @@ import AiModelListView from "admin/voxelytics/ai_model_list_view";
 import { CheckCertificateModal } from "components/check_certificate_modal";
 import ErrorBoundary from "components/error_boundary";
 import { CheckTermsOfServices } from "components/terms_of_services_check";
+import { DatasetSettingsProvider } from "dashboard/dataset/dataset_settings_provider";
 import loadable from "libs/lazy_loader";
 import type { EmptyObject } from "types/globals";
 import { getDatasetIdOrNameFromReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { Store } from "viewer/singletons";
 import { CommandPalette } from "viewer/view/components/command_palette";
-import { DatasetSettingsProvider } from "dashboard/dataset/dataset_settings_provider";
 
 const { Content } = Layout;