Support multiple segmentation layers

app/controllers/AnnotationController.scala

@@ -28,7 +28,7 @@ import scala.concurrent.ExecutionContext
 import scala.concurrent.duration._
 
 case class CreateExplorationalParameters(typ: String,
-                                         withFallback: Option[Boolean],
+                                         fallbackLayerName: Option[String],
                                          resolutionRestrictions: Option[ResolutionRestrictions])
 object CreateExplorationalParameters {
   implicit val jsonFormat: OFormat[CreateExplorationalParameters] = Json.format[CreateExplorationalParameters]
@@ -159,7 +159,7 @@ class AnnotationController @Inject()(
           request.identity,
           dataSet._id,
           tracingType,
-          request.body.withFallback.getOrElse(true),
+          request.body.fallbackLayerName,
           request.body.resolutionRestrictions.getOrElse(ResolutionRestrictions.empty)
         ) ?~> "annotation.create.failed"
         _ = analyticsService.track(CreateAnnotationEvent(request.identity: User, annotation: Annotation))

app/models/annotation/AnnotationService.scala

@@ -139,17 +139,18 @@ class AnnotationService @Inject()(
       dataSet: DataSet,
       dataSource: DataSource,
       tracingType: TracingType.Value,
-      withFallback: Boolean,
+      fallbackLayerNameOpt: Option[String],
       resolutionRestrictions: ResolutionRestrictions,
       organizationName: String,
       oldTracingId: Option[String] = None)(implicit ctx: DBAccessContext): Fox[(Option[String], Option[String])] = {
     def getFallbackLayer: Option[SegmentationLayer] =
-      if (withFallback) {
-        dataSource.dataLayers.flatMap {
+      // todo: probably should fail if the fallbackLayerName cannot be found
+      fallbackLayerNameOpt.map(fallbackLayerName =>
+        dataSource.dataLayers.filter(dl => dl.name == fallbackLayerName).flatMap {
           case layer: SegmentationLayer => Some(layer)
           case _                        => None
         }.headOption
-      } else None
+      ).getOrElse(None)
 
     tracingType match {
       case TracingType.skeleton =>
@@ -199,7 +200,7 @@ class AnnotationService @Inject()(
   def createExplorationalFor(user: User,
                              _dataSet: ObjectId,
                              tracingType: TracingType.Value,
-                             withFallback: Boolean,
+                             fallbackLayerName: Option[String],
                              resolutionRestrictions: ResolutionRestrictions)(implicit ctx: DBAccessContext,
                                                                              m: MessagesProvider): Fox[Annotation] =
     for {
@@ -210,7 +211,7 @@ class AnnotationService @Inject()(
       tracingIds <- createTracingsForExplorational(dataSet,
                                                    usableDataSource,
                                                    tracingType,
-                                                   withFallback,
+                                                   fallbackLayerName,
                                                    resolutionRestrictions,
                                                    organization.name)
       teamId <- selectSuitableTeam(user, dataSet) ?~> "annotation.create.forbidden"
@@ -235,7 +236,7 @@ class AnnotationService @Inject()(
         createTracingsForExplorational(dataSet,
                                        dataSource,
                                        TracingType.volume,
-                                       withFallback = true,
+                                       fallbackLayerNameOpt = None, // todo
                                        ResolutionRestrictions.empty,
                                        organizationName).flatMap {
           case (_, Some(volumeId)) => annotationDAO.updateVolumeTracingId(annotation._id, volumeId)
@@ -245,7 +246,7 @@ class AnnotationService @Inject()(
         createTracingsForExplorational(dataSet,
                                        dataSource,
                                        TracingType.skeleton,
-                                       withFallback = false,
+                                       fallbackLayerNameOpt = None, // In skeleton case, this is irrelevant.
                                        ResolutionRestrictions.empty,
                                        organizationName,
                                        annotation.volumeTracingId).flatMap {

frontend/javascripts/admin/admin_rest_api.js

@@ -675,14 +675,14 @@ export function getAnnotationInformation(
 export function createExplorational(
   datasetId: APIDatasetId,
   typ: TracingType,
-  withFallback: boolean,
+  fallbackLayerName: ?string,
   resolutionRestrictions: ?APIResolutionRestrictions,
   options?: RequestOptions = {},
 ): Promise<APIAnnotation> {
   const url = `/api/datasets/${datasetId.owningOrganization}/${datasetId.name}/createExplorational`;
   return Request.sendJSONReceiveJSON(
     url,
-    Object.assign({}, { data: { typ, withFallback, resolutionRestrictions } }, options),
+    Object.assign({}, { data: { typ, fallbackLayerName, resolutionRestrictions } }, options),
   );
 }
 

frontend/javascripts/dashboard/advanced_dataset/create_explorative_modal.js

@@ -1,5 +1,5 @@
 // @flow
-import { Modal, Radio, Button, Checkbox, Tooltip, Slider, Spin } from "antd";
+import { Modal, Radio, Button, Tooltip, Slider, Spin } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import React, { useState } from "react";
 import type { APIDatasetId } from "types/api_flow_types";
@@ -8,10 +8,10 @@ import { useFetch } from "libs/react_helpers";
 import { getDataset } from "admin/admin_rest_api";
 
 import {
-  getSegmentationLayer,
   doesSupportVolumeWithFallback,
   getDatasetResolutionInfo,
-  getResolutionInfoOfSegmentationLayer,
+  getSegmentationLayers,
+  getResolutionInfo,
 } from "oxalis/model/accessors/dataset_accessor";
 
 type Props = {
@@ -22,99 +22,80 @@ type Props = {
 const CreateExplorativeModal = ({ datasetId, onClose }: Props) => {
   const dataset = useFetch(() => getDataset(datasetId), null, [datasetId]);
   const [annotationType, setAnnotationType] = useState("hybrid");
-  const [userDefinedWithFallback, setUserDefinedWithFallback] = useState(true);
   const [userDefinedResolutionIndices, setUserDefinedResolutionIndices] = useState([0, 10000]);
+  const [selectedSegmentationLayerIndex, setSelectedSegmentationLayerIndex] = useState(null);
 
   let modalContent = <Spin />;
 
   if (dataset !== null) {
-    const segmentationLayer = getSegmentationLayer(dataset);
-
-    const isFallbackSegmentationAlwaysOff =
-      segmentationLayer == null ||
-      (!doesSupportVolumeWithFallback(dataset) && annotationType !== "skeleton");
-    const isFallbackSegmentationAlwaysOn =
-      !isFallbackSegmentationAlwaysOff && annotationType === "skeleton";
-
-    const isFallbackSegmentationOptional =
-      !isFallbackSegmentationAlwaysOff && !isFallbackSegmentationAlwaysOn;
-
-    const isFallbackSegmentationSelected =
-      isFallbackSegmentationAlwaysOn ||
-      (userDefinedWithFallback && !isFallbackSegmentationAlwaysOff);
-
-    const isFallbackSegmentationSelectedString = isFallbackSegmentationSelected ? "true" : "false";
-
-    const fallbackCheckbox = (
-      <Checkbox
-        onChange={e => setUserDefinedWithFallback(e.target.checked)}
-        checked={isFallbackSegmentationSelected}
-        disabled={!isFallbackSegmentationOptional}
-        style={{ marginBottom: 16 }}
-      >
-        With Existing Segmentation{" "}
-        <Tooltip
-          title="Base your volume annotation on an existing segmentation layer of this dataset. Note that skeleton-only annotations always show the existing segmentation by default."
-          placement="right"
-        >
-          <InfoCircleOutlined />
-        </Tooltip>
-      </Checkbox>
-    );
+    const segmentationLayers = getSegmentationLayers(dataset);
+    const selectedSegmentationLayer =
+      annotationType !== "skeleton" &&
+      segmentationLayers.length > 0 &&
+      selectedSegmentationLayerIndex != null
+        ? segmentationLayers[selectedSegmentationLayerIndex]
+        : null;
+
+    const fallbackLayerGetParameter =
+      selectedSegmentationLayer != null
+        ? `&fallbackLayerName=${selectedSegmentationLayer.name}`
+        : "";
 
     const datasetResolutionInfo = getDatasetResolutionInfo(dataset);
     let highestResolutionIndex = datasetResolutionInfo.getHighestResolutionIndex();
     let lowestResolutionIndex = datasetResolutionInfo.getClosestExistingIndex(0);
 
-    if (isFallbackSegmentationSelected && annotationType !== "skeleton") {
-      const datasetFallbackLayerResolutionInfo = getResolutionInfoOfSegmentationLayer(dataset);
+    if (selectedSegmentationLayer != null) {
+      const datasetFallbackLayerResolutionInfo = getResolutionInfo(
+        selectedSegmentationLayer.resolutions,
+      );
       highestResolutionIndex = datasetFallbackLayerResolutionInfo.getHighestResolutionIndex();
       lowestResolutionIndex = datasetFallbackLayerResolutionInfo.getClosestExistingIndex(0);
     }
 
     const highResolutionIndex = Math.min(highestResolutionIndex, userDefinedResolutionIndices[1]);
     const lowResolutionIndex = Math.max(lowestResolutionIndex, userDefinedResolutionIndices[0]);
 
-    const resolutionSlider = (
-      <React.Fragment>
-        <h5 style={{ marginBottom: 0 }}>
-          Volume Resolutions{" "}
-          <Tooltip
-            title="Select which of the dataset resolutions the volume data should be created at. Restricting the available resolutions can greatly improve the performance when annotating large structures, such as nuclei, since the volume data does not need to be stored in all quality levels. How to read: Resolution 1 is the most detailed, 4-4-2 is downsampled by factor 4 in x and y, and by factor 2 in z."
-            placement="right"
+    const resolutionSlider =
+      annotationType !== "skeleton" ? (
+        <React.Fragment>
+          <h5 style={{ marginBottom: 0 }}>
+            Restrict Volume Resolutions{" "}
+            <Tooltip
+              title="Select which of the dataset resolutions the volume data should be created at. Restricting the available resolutions can greatly improve the performance when annotating large structures, such as nuclei, since the volume data does not need to be stored in all quality levels. How to read: Resolution 1 is the most detailed, 4-4-2 is downsampled by factor 4 in x and y, and by factor 2 in z."
+              placement="right"
+            >
+              <InfoCircleOutlined />
+            </Tooltip>
+          </h5>
+          <div
+            style={{
+              marginBottom: 16,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              alignContent: "center",
+            }}
           >
-            <InfoCircleOutlined />
-          </Tooltip>
-        </h5>
-        <div
-          style={{
-            marginBottom: 16,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            alignContent: "center",
-          }}
-        >
-          <div style={{ width: "5em" }}>
-            {datasetResolutionInfo.getResolutionByIndexOrThrow(lowResolutionIndex).join("-")}
+            <div style={{ width: "5em" }}>
+              {datasetResolutionInfo.getResolutionByIndexOrThrow(lowResolutionIndex).join("-")}
+            </div>
+            <Slider
+              tooltipVisible={false}
+              onChange={value => setUserDefinedResolutionIndices(value)}
+              range
+              step={1}
+              min={lowestResolutionIndex}
+              max={highestResolutionIndex}
+              value={[lowResolutionIndex, highResolutionIndex]}
+              style={{ flexGrow: 1 }}
+            />
+            <div style={{ width: "6.5em", textAlign: "right" }}>
+              {datasetResolutionInfo.getResolutionByIndexOrThrow(highResolutionIndex).join("-")}
+            </div>
           </div>
-          <Slider
-            tooltipVisible={false}
-            onChange={value => setUserDefinedResolutionIndices(value)}
-            range
-            disabled={annotationType === "skeleton"}
-            step={1}
-            min={lowestResolutionIndex}
-            max={highestResolutionIndex}
-            value={[lowResolutionIndex, highResolutionIndex]}
-            style={{ flexGrow: 1 }}
-          />
-          <div style={{ width: "6.5em", textAlign: "right" }}>
-            {datasetResolutionInfo.getResolutionByIndexOrThrow(highResolutionIndex).join("-")}
-          </div>
-        </div>
-      </React.Fragment>
-    );
+        </React.Fragment>
+      ) : null;
 
     modalContent = (
       <React.Fragment>
@@ -125,17 +106,49 @@ const CreateExplorativeModal = ({ datasetId, onClose }: Props) => {
             <Radio value="volume">Volume only</Radio>
           </Radio.Group>
         </div>
-        {doesSupportVolumeWithFallback(dataset) ? fallbackCheckbox : null}
+
+        {annotationType !== "skeleton" && segmentationLayers.length > 0 ? (
+          <div style={{ marginBottom: 16 }}>
+            Base Volume Annotation On{" "}
+            <Tooltip
+              title="Base your volume annotation on an existing segmentation layer of this dataset or create a new (empty) layer for the annotation."
+              placement="right"
+            >
+              <InfoCircleOutlined />
+            </Tooltip>
+            <Radio.Group
+              onChange={e => {
+                const index = parseInt(e.target.value);
+                setSelectedSegmentationLayerIndex(index !== -1 ? index : null);
+              }}
+              value={selectedSegmentationLayerIndex != null ? selectedSegmentationLayerIndex : -1}
+            >
+              <Radio key={-1} value={-1}>
+                Create empty layer
+              </Radio>
+              {segmentationLayers.map((segmentationLayer, index) => (
+                <Radio
+                  key={segmentationLayer.name}
+                  value={index}
+                  disabled={!doesSupportVolumeWithFallback(dataset, segmentationLayer)}
+                >
+                  {segmentationLayer.name}
+                </Radio>
+              ))}
+            </Radio.Group>
+          </div>
+        ) : null}
+
         {lowestResolutionIndex < highestResolutionIndex ? resolutionSlider : null}
         <div style={{ textAlign: "right" }}>
           <Link
             to={`/datasets/${dataset.owningOrganization}/${
               dataset.name
-            }/createExplorative/${annotationType}/${isFallbackSegmentationSelectedString}?minRes=${Math.max(
+            }/createExplorative/${annotationType}/?minRes=${Math.max(
               ...datasetResolutionInfo.getResolutionByIndexOrThrow(lowResolutionIndex),
             )}&maxRes=${Math.max(
               ...datasetResolutionInfo.getResolutionByIndexOrThrow(highResolutionIndex),
-            )}`}
+            )}${fallbackLayerGetParameter}`}
             title="Create new annotation with selected properties"
           >
             <Button size="large" type="primary">

frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.js

@@ -16,10 +16,12 @@ import { Unicode } from "oxalis/constants";
 
 import type { APIMaybeUnimportedDataset, APIDatasetId } from "types/api_flow_types";
 import { clearCache } from "admin/admin_rest_api";
-import { doesSupportVolumeWithFallback } from "oxalis/model/accessors/dataset_accessor";
+import {
+  getFirstSegmentationLayer,
+  doesSupportVolumeWithFallback,
+} from "oxalis/model/accessors/dataset_accessor";
 import Toast from "libs/toast";
 import messages from "messages";
-
 import CreateExplorativeModal from "dashboard/advanced_dataset/create_explorative_modal";
 
 const disabledStyle = { pointerEvents: "none", color: "var(--ant-disabled)" };
@@ -34,7 +36,14 @@ function NewAnnotationLink({
   onShowCreateExplorativeModal,
   onCloseCreateExplorativeModal,
 }) {
-  const withFallback = doesSupportVolumeWithFallback(dataset) ? "true" : "false";
+  const firstSegmentationLayer = getFirstSegmentationLayer(dataset);
+  const supportsFallback = doesSupportVolumeWithFallback(dataset, firstSegmentationLayer)
+    ? "true"
+    : "false";
+  const fallbackLayerGetParameter =
+    firstSegmentationLayer != null && supportsFallback
+      ? `?fallbackLayerName=${firstSegmentationLayer.name}`
+      : "";
 
   return (
     <React.Fragment>
@@ -43,7 +52,7 @@ function NewAnnotationLink({
           <LinkWithDisabled
             to={`/datasets/${dataset.owningOrganization}/${
               dataset.name
-            }/createExplorative/hybrid/${withFallback}`}
+            }/createExplorative/hybrid${fallbackLayerGetParameter}`}
             style={{ display: "inline-block" }}
             title="New Annotation (Skeleton + Volume)"
             disabled={isReloading}

frontend/javascripts/features.js

@@ -19,6 +19,7 @@ export function getDemoDatasetUrl() {
     throw new Error("Features not yet loaded.");
   }
 
+  // todop: how to pass the fallback layer here?
   // Only create a tracing on the demo instance, as the user might not be logged in there
   // otherwise.
   const suffix = features.isDemoInstance ? "/createExplorative/hybrid/true" : "/view";

frontend/javascripts/libs/UpdatableTexture.js

@@ -55,7 +55,7 @@ UpdatableTexture.prototype.isUpdatableTexture = true;
 UpdatableTexture.prototype.setRenderer = function setRenderer(renderer) {
   this.renderer = renderer;
   this.gl = this.renderer.getContext();
-  this.utils = THREE.WebGLUtils(this.gl, this.renderer.extensions);
+  this.utils = THREE.WebGLUtils(this.gl, this.renderer.extensions, this.renderer.capabilities);
 };
 
 UpdatableTexture.prototype.setSize = function setSize(width, height) {
@@ -89,11 +89,10 @@ UpdatableTexture.prototype.isInitialized = function isInitialized() {
 };
 
 UpdatableTexture.prototype.update = function update(src, x, y, width, height) {
-  this.setSize(width, width);
   if (!this.isInitialized()) {
-    console.warn("Update called before texture was initialized. This update is discarded");
-    return;
+    this.renderer.initTexture(this);
   }
+  this.setSize(width, width);
 
   const activeTexture = this.gl.getParameter(this.gl.TEXTURE_BINDING_2D);
   const textureProperties = this.renderer.properties.get(this);