Mapping in default view config (#7858)

* allow viewing a mapping

* WIP: enable setting default active mappings in default view configuration

* add default active mapping to default view configuration
- add config settings to dataset settings default view config tab
- auto load initial default mapping

* fix bottom margin of layer settings
- was broken in view mode with multiple segmentation layers; the "Save View Config..." Button had no spacing to towards

* fix having the mapping settings enabled for layers with default mapping

* WIP: move default mapping store proeprty to dataset layer config
- undo moving mapping selection to a shared component

* moved default active mapping from separate select to view config layer config
- Also added validation check whether the mapping exists in the dataset view config settings

* allow saving no default active mapping from view mode & model init to new dataset config version

* rename defaultMapping to mapping

* cache available mappings fetched from backend when checking config in dataset settings

* remove logging statements

* clean up

* add changelog entry

* apply pr feedback

CHANGELOG.unreleased.md

@@ -12,6 +12,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Added
 - Added the option for the owner to lock explorative annotations. Locked annotations cannot be modified by any user. An annotation can be locked in the annotations table and when viewing the annotation via the navbar dropdown menu. [#7801](https://github.com/scalableminds/webknossos/pull/7801)
+- Added the option to set a default mapping for a dataset in the dataset view configuration. The default mapping is loaded when the dataset is opened and the user / url does not configure something else. [#7858](https://github.com/scalableminds/webknossos/pull/7858)
 - Uploading an annotation into a dataset that it was not created for now also works if the dataset is in a different organization. [#7816](https://github.com/scalableminds/webknossos/pull/7816)
 - When downloading + reuploading an annotation that is based on a segmentation layer with active mapping, that mapping is now still be selected after the reupload. [#7822](https://github.com/scalableminds/webknossos/pull/7822)
 - In the Voxelytics workflow list, the name of the WEBKNOSSOS user who started the job is displayed. [#7794](https://github.com/scalableminds/webknossos/pull/7795)

frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx

@@ -890,7 +890,10 @@ class DatasetSettingsView extends React.PureComponent<PropsWithFormAndRouter, St
         forceRender: true,
         children: (
           <Hideable hidden={this.state.activeTabKey !== "defaultConfig"}>
-            <DatasetSettingsViewConfigTab />
+            <DatasetSettingsViewConfigTab
+              datasetId={this.props.datasetId}
+              dataStoreURL={this.state.dataset?.dataStore.url}
+            />
           </Hideable>
         ),
       },

frontend/javascripts/dashboard/dataset/dataset_settings_viewconfig_tab.tsx

@@ -14,24 +14,88 @@ import {
   Slider,
   Divider,
 } from "antd";
-import * as React from "react";
+import React, { useMemo, useState } from "react";
 import { Vector3Input } from "libs/vector_input";
 import { validateLayerViewConfigurationObjectJSON, syncValidator } from "types/validation";
 import { getDefaultLayerViewConfiguration } from "types/schemas/dataset_view_configuration.schema";
-import {
+import messages, {
   RecommendedConfiguration,
   layerViewConfigurations,
   settings,
   settingsTooltips,
 } from "messages";
-import type { DatasetLayerConfiguration } from "oxalis/store";
+import type { DatasetConfiguration, DatasetLayerConfiguration } from "oxalis/store";
 import { FormItemWithInfo, jsonEditStyle } from "./helper_components";
 import { BLEND_MODES } from "oxalis/constants";
 import ColorLayerOrderingTable from "./color_layer_ordering_component";
+import { APIDatasetId } from "types/api_flow_types";
+import { getAgglomeratesForDatasetLayer, getMappingsForDatasetLayer } from "admin/admin_rest_api";
 
 const FormItem = Form.Item;
 
-export default function DatasetSettingsViewConfigTab() {
+export default function DatasetSettingsViewConfigTab(props: {
+  datasetId: APIDatasetId;
+  dataStoreURL: string | undefined;
+}) {
+  const { datasetId, dataStoreURL } = props;
+  const [availableMappingsPerLayerCache, setAvailableMappingsPerLayer] = useState<
+    Record<string, [string[], string[]]>
+  >({});
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Update is not necessary when availableMappingsPerLayer[layerName] changes.
+  const validateDefaultMappings = useMemo(
+    () => async (configStr: string, dataStoreURL: string, datasetId: APIDatasetId) => {
+      let config = {} as DatasetConfiguration["layers"];
+      try {
+        config = JSON.parse(configStr);
+      } catch (e: any) {
+        return Promise.reject(new Error("Invalid JSON format for : " + e.message));
+      }
+      const layerNamesWithDefaultMappings = Object.keys(config).filter(
+        (layerName) => config[layerName].mapping != null,
+      );
+
+      const maybeMappingRequests = layerNamesWithDefaultMappings.map(async (layerName) => {
+        if (layerName in availableMappingsPerLayerCache) {
+          return availableMappingsPerLayerCache[layerName];
+        }
+        try {
+          const jsonAndAgglomerateMappings = await Promise.all([
+            getMappingsForDatasetLayer(dataStoreURL, datasetId, layerName),
+            getAgglomeratesForDatasetLayer(dataStoreURL, datasetId, layerName),
+          ]);
+          setAvailableMappingsPerLayer((prev) => ({
+            ...prev,
+            [layerName]: jsonAndAgglomerateMappings,
+          }));
+          return jsonAndAgglomerateMappings;
+        } catch (e: any) {
+          console.error(e);
+          throw new Error(messages["mapping.loading_failed"](layerName));
+        }
+      });
+      const mappings = await Promise.all(maybeMappingRequests);
+      const errors = layerNamesWithDefaultMappings
+        .map((layerName, index) => {
+          const [mappingsForLayer, agglomeratesForLayer] = mappings[index];
+          const mappingType = config[layerName]?.mapping?.type;
+          const mappingName = config[layerName]?.mapping?.name;
+          const doesMappingExist =
+            mappingType === "HDF5"
+              ? agglomeratesForLayer.some((agglomerate) => agglomerate === mappingName)
+              : mappingsForLayer.some((mapping) => mapping === mappingName);
+          return doesMappingExist
+            ? null
+            : `The mapping "${mappingName}" of type "${mappingType}" does not exist for layer ${layerName}.`;
+        })
+        .filter((error) => error != null);
+      if (errors.length > 0) {
+        throw new Error("The following mappings are invalid: " + errors.join("\n"));
+      }
+    },
+    [availableMappingsPerLayerCache],
+  );
+
   const columns = [
     {
       title: "Name",
@@ -50,23 +114,48 @@ export default function DatasetSettingsViewConfigTab() {
       dataIndex: "comment",
     },
   ];
-  const comments: Partial<Record<keyof DatasetLayerConfiguration, string>> = {
-    alpha: "20 for segmentation layer",
-    min: "Only for color layers",
-    max: "Only for color layers",
-    intensityRange: "Only for color layers",
+  const comments: Partial<
+    Record<keyof DatasetLayerConfiguration, { shortComment: string; tooltip: string }>
+  > = {
+    alpha: { shortComment: "20 for segmentation layer", tooltip: "The default alpha value." },
+    min: {
+      shortComment: "Only for color layers",
+      tooltip: "The minimum possible color range value adjustable with the histogram slider.",
+    },
+    max: {
+      shortComment: "Only for color layers",
+      tooltip: "The maximum possible color range value adjustable with the histogram slider.",
+    },
+    intensityRange: {
+      shortComment: "Only for color layers",
+      tooltip: "The color value range between which color values are interpolated and shown.",
+    },
+    mapping: {
+      shortComment: "Active Mapping",
+      tooltip:
+        "The mapping whose type and name is active by default. This field is an object with the keys 'type' and 'name' like {name: 'agglomerate_65', type: 'HDF5'}.",
+    },
   };
   const layerViewConfigurationEntries = _.map(
     { ...getDefaultLayerViewConfiguration(), min: 0, max: 255, intensityRange: [0, 255] },
     (defaultValue: any, key: string) => {
       // @ts-ignore Typescript doesn't infer that key will be of type keyof DatasetLayerConfiguration
       const layerViewConfigurationKey: keyof DatasetLayerConfiguration = key;
       const name = layerViewConfigurations[layerViewConfigurationKey];
+      const comment = comments[layerViewConfigurationKey];
+      const commentContent =
+        comment != null ? (
+          <Tooltip title={comment.tooltip}>
+            {comment.shortComment} <InfoCircleOutlined />
+          </Tooltip>
+        ) : (
+          ""
+        );
       return {
         name,
         key,
         value: defaultValue == null ? "not set" : defaultValue.toString(),
-        comment: comments[layerViewConfigurationKey] || "",
+        comment: commentContent,
       };
     },
   );
@@ -92,6 +181,7 @@ export default function DatasetSettingsViewConfigTab() {
       </FormItem>
     </Col>
   ));
+
   return (
     <div>
       <Alert
@@ -212,7 +302,13 @@ export default function DatasetSettingsViewConfigTab() {
             info="Use the following JSON to define layer-specific properties, such as color, alpha and intensityRange."
             rules={[
               {
-                validator: validateLayerViewConfigurationObjectJSON,
+                validator: (_rule, config: string) =>
+                  Promise.all([
+                    validateLayerViewConfigurationObjectJSON(_rule, config),
+                    dataStoreURL
+                      ? validateDefaultMappings(config, dataStoreURL, datasetId)
+                      : Promise.resolve(),
+                  ]),
               },
             ]}
           >

frontend/javascripts/messages.tsx

@@ -93,6 +93,7 @@ export const layerViewConfigurations: Partial<Record<keyof DatasetLayerConfigura
   isInverted: "Inverted Layer",
   isInEditMode: "Configuration Mode",
   gammaCorrectionValue: "Gamma Correction",
+  mapping: "Active Mapping",
 };
 export const layerViewConfigurationTooltips: Partial<
   Record<keyof DatasetLayerConfiguration, string>
@@ -262,6 +263,8 @@ instead. Only enable this option if you understand its effect. All layers will n
     "The active volume annotation layer has an active mapping. By mutating the layer, the mapping will be permanently locked and can no longer be changed or disabled. This can only be undone by restoring an older version of this annotation. Are you sure you want to continue?",
   "tracing.locked_mapping_confirmed": (mappingName: string) =>
     `The mapping ${mappingName} is now locked for this annotation and can no longer be changed or disabled.`,
+  "mapping.loading_failed": (layerName: string) =>
+    `Loading the available mappings for layer ${layerName} failed.`,
   "layouting.missing_custom_layout_info":
     "The annotation views are separated into four classes. Each of them has their own layouts. If you can't find your layout please open the annotation in the correct view mode or just add it here manually.",
   "datastore.unknown_type": "Unknown datastore type:",

frontend/javascripts/oxalis/model_initialization.ts

@@ -57,6 +57,7 @@ import {
   setViewModeAction,
   setMappingAction,
   updateLayerSettingAction,
+  setMappingEnabledAction,
 } from "oxalis/model/actions/settings_actions";
 import {
   initializeEditableMappingAction,
@@ -620,7 +621,24 @@ function determineDefaultState(
   }
 
   const stateByLayer = urlStateByLayer ?? {};
+  // Add the default mapping to the state for each layer that does not have a mapping set in its URL settings.
+  for (const layerName in datasetConfiguration.layers) {
+    if (!(layerName in stateByLayer)) {
+      stateByLayer[layerName] = {};
+    }
+    const { mapping } = datasetConfiguration.layers[layerName];
+    if (stateByLayer[layerName].mappingInfo == null && mapping != null) {
+      stateByLayer[layerName].mappingInfo = {
+        mappingName: mapping.name,
+        mappingType: mapping.type,
+      };
+    }
+  }
 
+  // Overwriting the mapping to load for each volume layer in case
+  // - the volume tracing has a not locked mapping set and the url does not.
+  // - the volume tracing has a locked mapping set.
+  // - the volume tracing has locked that no tracing should be loaded.
   const volumeTracings = tracings.filter(
     (tracing) => tracing.typ === "Volume",
   ) as ServerVolumeTracing[];
@@ -730,6 +748,7 @@ async function applyLayerState(stateByLayer: UrlStateByLayer) {
           showLoadingIndicator: true,
         }),
       );
+      Store.dispatch(setMappingEnabledAction(effectiveLayerName, true));
 
       if (agglomerateIdsToImport != null) {
         const { tracing } = Store.getState();

frontend/javascripts/oxalis/store.ts

@@ -295,6 +295,7 @@ export type DatasetLayerConfiguration = {
   readonly isInverted: boolean;
   readonly isInEditMode: boolean;
   readonly gammaCorrectionValue: number;
+  readonly mapping?: { name: string; type: MappingType } | null | undefined;
 };
 export type LoadingStrategy = "BEST_QUALITY_FIRST" | "PROGRESSIVE_QUALITY";
 

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

@@ -88,7 +88,7 @@ import {
 } from "oxalis/model/actions/settings_actions";
 import { userSettings } from "types/schemas/user_settings.schema";
 import type { Vector3, ControlMode } from "oxalis/constants";
-import Constants, { ControlModeEnum } from "oxalis/constants";
+import Constants, { ControlModeEnum, MappingStatusEnum } from "oxalis/constants";
 import EditableTextLabel from "oxalis/view/components/editable_text_label";
 import LinkButton from "components/link_button";
 import { Model } from "oxalis/singletons";
@@ -923,11 +923,13 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     layerName,
     layerConfiguration,
     isColorLayer,
+    isLastLayer,
     hasLessThanTwoColorLayers = true,
   }: {
     layerName: string;
     layerConfiguration: DatasetLayerConfiguration | null | undefined;
     isColorLayer: boolean;
+    isLastLayer: boolean;
     hasLessThanTwoColorLayers?: boolean;
   }) => {
     // Ensure that every layer needs a layer configuration and that color layers have a color layer.
@@ -936,8 +938,10 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     }
     const elementClass = getElementClass(this.props.dataset, layerName);
     const { isDisabled, isInEditMode } = layerConfiguration;
+    const lastLayerMarginBottom = isLastLayer ? { marginBottom: 30 } : {};
+    const betweenLayersMarginBottom = isLastLayer ? {} : { marginBottom: 30 };
     return (
-      <div key={layerName}>
+      <div key={layerName} style={lastLayerMarginBottom}>
         {this.getLayerSettingsHeader(
           isDisabled,
           isColorLayer,
@@ -950,7 +954,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
         {isDisabled ? null : (
           <div
             style={{
-              marginBottom: 30,
+              ...betweenLayersMarginBottom,
               marginLeft: 10,
             }}
           >
@@ -1314,8 +1318,8 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
           <br />
           This will overwrite the current default view configuration.
           <br />
-          This includes all color and segmentation layer settings, as well as these additional
-          settings:
+          This includes all color and segmentation layer settings, currently active mappings (even
+          those of disabled layers), as well as these additional settings:
           <br />
           <br />
           {dataSource.map((field, index) => {
@@ -1338,14 +1342,42 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
       ),
       onOk: async () => {
         try {
-          const { flycam } = Store.getState();
+          const { flycam, temporaryConfiguration } = Store.getState();
           const position = V3.floor(getPosition(flycam));
           const zoom = flycam.zoomStep;
+          const { activeMappingByLayer } = temporaryConfiguration;
           const completeDatasetConfiguration = Object.assign({}, datasetConfiguration, {
             position,
             zoom,
           });
-          await updateDatasetDefaultConfiguration(dataset, completeDatasetConfiguration);
+          const updatedLayers = {
+            ...completeDatasetConfiguration.layers,
+          } as DatasetConfiguration["layers"];
+          Object.keys(activeMappingByLayer).forEach((layerName) => {
+            const mappingInfo = activeMappingByLayer[layerName];
+            if (
+              mappingInfo.mappingStatus === MappingStatusEnum.ENABLED &&
+              mappingInfo.mappingName != null
+            ) {
+              updatedLayers[layerName] = {
+                ...updatedLayers[layerName],
+                mapping: {
+                  name: mappingInfo.mappingName,
+                  type: mappingInfo.mappingType,
+                },
+              };
+            } else {
+              updatedLayers[layerName] = {
+                ...updatedLayers[layerName],
+                mapping: null,
+              };
+            }
+          });
+          const updatedConfiguration = {
+            ...completeDatasetConfiguration,
+            layers: updatedLayers,
+          };
+          await updateDatasetDefaultConfiguration(dataset, updatedConfiguration);
           Toast.success("Successfully saved the current view configuration as default.");
         } catch (error) {
           Toast.error(
@@ -1390,16 +1422,18 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
           layerConfiguration={layers[layerName]}
           isColorLayer
           index={index}
+          isLastLayer={index === colorLayerOrder.length - 1}
           disabled={hasLessThanTwoColorLayers}
           hasLessThanTwoColorLayers={hasLessThanTwoColorLayers}
         />
       );
     });
-    const segmentationLayerSettings = segmentationLayerNames.map((layerName) => {
+    const segmentationLayerSettings = segmentationLayerNames.map((layerName, index) => {
       return (
         <LayerSettings
           key={layerName}
           layerName={layerName}
+          isLastLayer={index === segmentationLayerNames.length - 1}
           layerConfiguration={layers[layerName]}
           isColorLayer={false}
         />