From 5ce963d9f99d86061604ef4f7dcd9a3f13199d32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?=
 <michael.buessemeyer@student.hpi.de>
Date: Wed, 14 Aug 2019 15:07:24 +0200
Subject: [PATCH 1/7] merged ui of color and segmentation layers

---
 frontend/javascripts/messages.js              |   2 +-
 .../view/settings/dataset_settings_view.js    | 209 ++++++++++--------
 2 files changed, 120 insertions(+), 91 deletions(-)

diff --git a/frontend/javascripts/messages.js b/frontend/javascripts/messages.js
index 90039a2bcf9..4c7ebae0771 100644
--- a/frontend/javascripts/messages.js
+++ b/frontend/javascripts/messages.js
@@ -17,7 +17,7 @@ export const settings = {
   fourBit: "4 Bit",
   interpolation: "Interpolation",
   quality: "Quality",
-  segmentationOpacity: "Segmentation Opacity",
+  segmentationOpacity: "Opacity",
   highlightHoveredCellId: "Highlight Hovered Cells",
   zoom: "Zoom",
   renderMissingDataBlack: "Render Missing Data Black",
diff --git a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
index 1d4ad221d6f..c53992f4002 100644
--- a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
+++ b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
@@ -126,79 +126,135 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     });
   };
 
-  getColorSettings = (
-    [layerName, layer]: [string, DatasetLayerConfiguration],
-    layerIndex: number,
-    isLastLayer: boolean,
-  ) => {
-    const elementClass = getElementClass(this.props.dataset, layerName);
-    const { alpha, color, intensityRange, isDisabled } = layer;
+  getEnableDisableLayerSwitch = (
+    isDisabled: boolean,
+    onChange: (boolean, SyntheticMouseEvent<>) => void,
+  ) => (
+    <Tooltip title={isDisabled ? "Enable" : "Disable"} placement="top">
+      {/* This div is necessary for the tooltip to be displayed */}
+      <div style={{ display: "inline-block", marginRight: 8 }}>
+        <Switch size="small" onChange={onChange} checked={!isDisabled} />
+      </div>
+    </Tooltip>
+  );
+
+  getHistogram = (layerName: string, layer: DatasetLayerConfiguration) => {
+    const { intensityRange } = layer;
     let histograms = [
       { numberOfElements: 256, elementCounts: new Array(256).fill(0), min: 0, max: 255 },
     ];
     if (this.state.histograms && this.state.histograms[layerName]) {
       histograms = this.state.histograms[layerName];
     }
+    return (
+      <Histogram
+        data={histograms}
+        min={intensityRange[0]}
+        max={intensityRange[1]}
+        layerName={layerName}
+      />
+    );
+  };
+
+  getLayerSettingsHeader = (
+    isDisabled: boolean,
+    isColorLayer: boolean,
+    layerName: string,
+    elementClass: string,
+  ) => (
+    <Row>
+      <Col span={24}>
+        {/* TODO Maybe use the new antd icons instead of the switch when upgrading antd. */
+        this.getEnableDisableLayerSwitch(
+          isDisabled,
+          isColorLayer
+            ? (val, event) => {
+                if (!event.ctrlKey) {
+                  this.props.onChangeLayer(layerName, "isDisabled", !val);
+                  return;
+                }
+                // If ctrl is pressed, toggle between "all layers visible" and
+                // "only selected layer visible".
+                // Phillip fragen wie das gehandhabt werden soll
+                if (this.isLayerExclusivelyVisible(layerName)) {
+                  this.setVisibilityForAllLayers(true);
+                } else {
+                  this.setVisibilityForAllLayers(false);
+                  this.props.onChangeLayer(layerName, "isDisabled", false);
+                }
+              }
+            : () => console.log("segmentation visibitly toggled"),
+        )}
+        <span style={{ fontWeight: 700 }}>{layerName}</span>
+        <Tag style={{ cursor: "default", marginLeft: 8 }}>{elementClass} Layer</Tag>
+        {this.getFindDataButton(layerName, isDisabled)}
+      </Col>
+    </Row>
+  );
+
+  getLayerSettings = (
+    layerName?: string,
+    layer?: DatasetLayerConfiguration,
+    isColorLayer: boolean = true,
+  ) => {
+    // Ensure that a color layer needs a layer and a layer name
+    if (isColorLayer && (!layerName || !layer)) {
+      return null;
+    }
+    if (!isColorLayer && !layerName) {
+      layerName = "segmentation";
+    }
+    let elementClass = isColorLayer ? "color" : "segmentation";
+    if (layerName) {
+      elementClass = getElementClass(this.props.dataset, layerName);
+    }
+    const isDisabled = isColorLayer ? layer.isDisabled : false;
 
     return (
       <div key={layerName}>
-        <Row>
-          <Col span={24}>
-            {/* TODO Maybe use the new antd icons instead of the switch when upgrading antd. */}
-            <Tooltip title={isDisabled ? "Enable" : "Disable"} placement="top">
-              {/* This div is necessary for the tooltip to be displayed */}
-              <div style={{ display: "inline-block", marginRight: 8 }}>
-                <Switch
-                  size="small"
-                  onChange={(val, event) => {
-                    if (!event.ctrlKey) {
-                      this.props.onChangeLayer(layerName, "isDisabled", !val);
-                      return;
-                    }
-                    // If ctrl is pressed, toggle between "all layers visible" and
-                    // "only selected layer visible".
-                    if (this.isLayerExclusivelyVisible(layerName)) {
-                      this.setVisibilityForAllLayers(true);
-                    } else {
-                      this.setVisibilityForAllLayers(false);
-                      this.props.onChangeLayer(layerName, "isDisabled", false);
-                    }
-                  }}
-                  checked={!isDisabled}
-                />
-              </div>
-            </Tooltip>
-            <span style={{ fontWeight: 700 }}>{layerName}</span>
-            <Tag style={{ cursor: "default", marginLeft: 8 }}>{elementClass} Layer</Tag>
-            {this.getFindDataButton(layerName, isDisabled)}
-          </Col>
-        </Row>
+        {this.getLayerSettingsHeader(isDisabled, isColorLayer, layerName, elementClass)}
         {isDisabled ? null : (
           <React.Fragment>
-            {isHistogramSupported(elementClass) ? (
-              <Histogram
-                data={histograms}
-                min={intensityRange[0]}
-                max={intensityRange[1]}
-                layerName={layerName}
-              />
-            ) : null}
+            {isHistogramSupported(elementClass) ? this.getHistogram(layerName, layer) : null}
             <NumberSliderSetting
               label="Opacity"
               min={0}
               max={100}
-              value={alpha}
-              onChange={_.partial(this.props.onChangeLayer, layerName, "alpha")}
-            />
-            <ColorSetting
-              label="Color"
-              value={Utils.rgbToHex(color)}
-              onChange={_.partial(this.props.onChangeLayer, layerName, "color")}
-              className="ant-btn"
+              value={
+                isColorLayer && layer != null
+                  ? layer.alpha
+                  : this.props.datasetConfiguration.segmentationOpacity
+              }
+              onChange={
+                isColorLayer && layerName != null
+                  ? _.partial(this.props.onChangeLayer, layerName, "alpha")
+                  : _.partial(this.props.onChange, "segmentationOpacity")
+              }
             />
+            {isColorLayer && layer != null ? (
+              <ColorSetting
+                label="Color"
+                value={Utils.rgbToHex(layer.color)}
+                onChange={_.partial(this.props.onChangeLayer, layerName, "color")}
+                className="ant-btn"
+              />
+            ) : (
+              <SwitchSetting
+                label={settings.highlightHoveredCellId}
+                value={this.props.datasetConfiguration.highlightHoveredCellId}
+                onChange={_.partial(this.props.onChange, "highlightHoveredCellId")}
+              />
+            )}
+            {(!isColorLayer && this.props.controlMode === ControlModeEnum.VIEW) ||
+            window.allowIsosurfaces ? (
+              <SwitchSetting
+                label="Render Isosurfaces (Beta)"
+                value={this.props.datasetConfiguration.renderIsosurfaces}
+                onChange={_.partial(this.props.onChange, "renderIsosurfaces")}
+              />
+            ) : null}
           </React.Fragment>
         )}
-        {!isLastLayer && <Divider />}
       </div>
     );
   };
@@ -240,55 +296,28 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
   getSegmentationPanel() {
     const segmentation = Model.getSegmentationLayer();
     const segmentationLayerName = segmentation != null ? segmentation.name : null;
-    return (
-      <Panel header="Segmentation" key="2">
-        {segmentationLayerName ? (
-          <div style={{ overflow: "auto" }}>
-            {this.getFindDataButton(segmentationLayerName, false)}
-          </div>
-        ) : null}
-        <NumberSliderSetting
-          label={settings.segmentationOpacity}
-          min={0}
-          max={100}
-          value={this.props.datasetConfiguration.segmentationOpacity}
-          onChange={_.partial(this.props.onChange, "segmentationOpacity")}
-        />
-        <SwitchSetting
-          label={settings.highlightHoveredCellId}
-          value={this.props.datasetConfiguration.highlightHoveredCellId}
-          onChange={_.partial(this.props.onChange, "highlightHoveredCellId")}
-        />
-
-        {this.props.controlMode === ControlModeEnum.VIEW || window.allowIsosurfaces ? (
-          <SwitchSetting
-            label="Render Isosurfaces (Beta)"
-            value={this.props.datasetConfiguration.renderIsosurfaces}
-            onChange={_.partial(this.props.onChange, "renderIsosurfaces")}
-          />
-        ) : null}
-      </Panel>
-    );
+    return this.getLayerSettings(segmentationLayerName, null, false);
   }
 
   renderPanelHeader = (hasInvisibleLayers: boolean) =>
     hasInvisibleLayers ? (
       <span>
-        Color Layers
+        Layers
         <Tooltip title="Not all layers are currently visible.">
           <Icon type="exclamation-circle-o" style={{ marginLeft: 16, color: "coral" }} />
         </Tooltip>
       </span>
     ) : (
-      "Color Layers"
+      "Layers"
     );
 
   render() {
     const { layers } = this.props.datasetConfiguration;
-    const colorSettings = Object.entries(layers).map((entry, index) =>
+    const colorSettings = Object.entries(layers).map(entry => {
       // $FlowFixMe Object.entries returns mixed for Flow
-      this.getColorSettings(entry, index, index === _.size(layers) - 1),
-    );
+      const [layerName, layer] = entry;
+      return this.getLayerSettings(layerName, layer, true);
+    });
     const hasInvisibleLayers =
       Object.keys(layers).find(
         layerName => layers[layerName].isDisabled || layers[layerName].alpha === 0,
@@ -298,8 +327,8 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
       <Collapse bordered={false} defaultActiveKey={["1", "2", "3", "4"]}>
         <Panel header={this.renderPanelHeader(hasInvisibleLayers)} key="1">
           {colorSettings}
+          {this.props.hasSegmentation ? this.getSegmentationPanel() : null}
         </Panel>
-        {this.props.hasSegmentation ? this.getSegmentationPanel() : null}
         <Panel header="Data Rendering" key="3">
           <DropdownSetting
             label={

From 4c1900743f7dd4fce104ded9a4de12ed0fbc2304 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?=
 <michael.buessemeyer@student.hpi.de>
Date: Wed, 14 Aug 2019 17:08:30 +0200
Subject: [PATCH 2/7] fix flow and added visibiltiy toggling of segmentation
 layer

---
 frontend/javascripts/messages.js              |  1 -
 .../oxalis/controller/scene_controller.js     | 11 +++
 frontend/javascripts/oxalis/default_state.js  |  1 +
 .../materials/plane_material_factory.js       |  6 ++
 .../javascripts/oxalis/geometries/plane.js    |  4 +
 frontend/javascripts/oxalis/store.js          |  1 +
 .../view/settings/dataset_settings_view.js    | 93 +++++++++++--------
 7 files changed, 75 insertions(+), 42 deletions(-)

diff --git a/frontend/javascripts/messages.js b/frontend/javascripts/messages.js
index 4c7ebae0771..93f5d141829 100644
--- a/frontend/javascripts/messages.js
+++ b/frontend/javascripts/messages.js
@@ -17,7 +17,6 @@ export const settings = {
   fourBit: "4 Bit",
   interpolation: "Interpolation",
   quality: "Quality",
-  segmentationOpacity: "Opacity",
   highlightHoveredCellId: "Highlight Hovered Cells",
   zoom: "Zoom",
   renderMissingDataBlack: "Render Missing Data Black",
diff --git a/frontend/javascripts/oxalis/controller/scene_controller.js b/frontend/javascripts/oxalis/controller/scene_controller.js
index ff3436178ec..005be0ff310 100644
--- a/frontend/javascripts/oxalis/controller/scene_controller.js
+++ b/frontend/javascripts/oxalis/controller/scene_controller.js
@@ -413,6 +413,12 @@ class SceneController {
     }
   }
 
+  setSegmentationVisibility(isVisible: boolean): void {
+    for (const plane of _.values(this.planes)) {
+      plane.setSegmentationVisibility(isVisible);
+    }
+  }
+
   setIsMappingEnabled(isMappingEnabled: boolean): void {
     for (const plane of _.values(this.planes)) {
       plane.setIsMappingEnabled(isMappingEnabled);
@@ -457,6 +463,11 @@ class SceneController {
       segmentationOpacity => this.setSegmentationAlpha(segmentationOpacity),
     );
 
+    listenToStoreProperty(
+      storeState => storeState.datasetConfiguration.isSegmentationDisabled,
+      isSegmentationDisabled => this.setSegmentationVisibility(!isSegmentationDisabled),
+    );
+
     listenToStoreProperty(
       storeState => storeState.datasetConfiguration.interpolation,
       interpolation => this.setInterpolation(interpolation),
diff --git a/frontend/javascripts/oxalis/default_state.js b/frontend/javascripts/oxalis/default_state.js
index 3c1ca319679..eff0f1b8eb2 100644
--- a/frontend/javascripts/oxalis/default_state.js
+++ b/frontend/javascripts/oxalis/default_state.js
@@ -39,6 +39,7 @@ const defaultState: OxalisState = {
     interpolation: false,
     layers: {},
     quality: 0,
+    isSegmentationDisabled: true,
     loadingStrategy: "PROGRESSIVE_QUALITY",
     segmentationOpacity: 20,
     highlightHoveredCellId: true,
diff --git a/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.js b/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.js
index c33d6164f50..49fdfafe709 100644
--- a/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.js
+++ b/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.js
@@ -300,6 +300,12 @@ class PlaneMaterialFactory {
       this.uniforms.alpha.value = alpha / 100;
     };
 
+    this.material.setSegmentationVisibility = isVisible => {
+      this.uniforms.alpha.value = isVisible
+        ? Store.getState().datasetConfiguration.segmentationOpacity / 100
+        : 0;
+    };
+
     this.material.setUseBilinearFiltering = isEnabled => {
       this.uniforms.useBilinearFiltering.value = isEnabled;
     };
diff --git a/frontend/javascripts/oxalis/geometries/plane.js b/frontend/javascripts/oxalis/geometries/plane.js
index fb2e9cbd6db..4e8b40afd12 100644
--- a/frontend/javascripts/oxalis/geometries/plane.js
+++ b/frontend/javascripts/oxalis/geometries/plane.js
@@ -169,6 +169,10 @@ class Plane {
     this.plane.material.setSegmentationAlpha(alpha);
   }
 
+  setSegmentationVisibility(isVisible: boolean): void {
+    this.plane.material.setSegmentationVisibility(isVisible);
+  }
+
   getMeshes = () => [this.plane, this.TDViewBorders, this.crosshair[0], this.crosshair[1]];
 
   setLinearInterpolationEnabled = (enabled: boolean) => {
diff --git a/frontend/javascripts/oxalis/store.js b/frontend/javascripts/oxalis/store.js
index 5ff68bd3ff4..19522e2b59d 100644
--- a/frontend/javascripts/oxalis/store.js
+++ b/frontend/javascripts/oxalis/store.js
@@ -227,6 +227,7 @@ export type DatasetConfiguration = {|
   },
   +quality: 0 | 1 | 2,
   +segmentationOpacity: number,
+  +isSegmentationDisabled: boolean,
   +highlightHoveredCellId: boolean,
   +renderIsosurfaces: boolean,
   +position?: Vector3,
diff --git a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
index c53992f4002..295655cf657 100644
--- a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
+++ b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
@@ -3,7 +3,7 @@
  * @flow
  */
 
-import { Col, Collapse, Divider, Icon, Row, Select, Switch, Tag, Tooltip } from "antd";
+import { Col, Collapse, Icon, Row, Select, Switch, Tag, Tooltip } from "antd";
 import type { Dispatch } from "redux";
 import { connect } from "react-redux";
 import * as React from "react";
@@ -159,42 +159,49 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
   getLayerSettingsHeader = (
     isDisabled: boolean,
     isColorLayer: boolean,
-    layerName: string,
+    layerName: ?string,
     elementClass: string,
-  ) => (
-    <Row>
-      <Col span={24}>
-        {/* TODO Maybe use the new antd icons instead of the switch when upgrading antd. */
-        this.getEnableDisableLayerSwitch(
-          isDisabled,
-          isColorLayer
-            ? (val, event) => {
-                if (!event.ctrlKey) {
-                  this.props.onChangeLayer(layerName, "isDisabled", !val);
-                  return;
-                }
-                // If ctrl is pressed, toggle between "all layers visible" and
-                // "only selected layer visible".
-                // Phillip fragen wie das gehandhabt werden soll
-                if (this.isLayerExclusivelyVisible(layerName)) {
-                  this.setVisibilityForAllLayers(true);
-                } else {
-                  this.setVisibilityForAllLayers(false);
-                  this.props.onChangeLayer(layerName, "isDisabled", false);
-                }
-              }
-            : () => console.log("segmentation visibitly toggled"),
-        )}
-        <span style={{ fontWeight: 700 }}>{layerName}</span>
-        <Tag style={{ cursor: "default", marginLeft: 8 }}>{elementClass} Layer</Tag>
-        {this.getFindDataButton(layerName, isDisabled)}
-      </Col>
-    </Row>
-  );
+  ) => {
+    let onChange = () => {};
+    if (isColorLayer && layerName != null) {
+      const layerNameFixed: string = layerName;
+      onChange = (value, event) => {
+        if (!event.ctrlKey) {
+          this.props.onChangeLayer(layerNameFixed, "isDisabled", !value);
+          return;
+        }
+        // If ctrl is pressed, toggle between "all layers visible" and
+        // "only selected layer visible".
+        // Phillip fragen wie das gehandhabt werden soll
+        if (this.isLayerExclusivelyVisible(layerNameFixed)) {
+          this.setVisibilityForAllLayers(true);
+        } else {
+          this.setVisibilityForAllLayers(false);
+          this.props.onChangeLayer(layerNameFixed, "isDisabled", false);
+        }
+      };
+    } else if (!isColorLayer) {
+      onChange = value => {
+        console.log("received value from segemntation visibility switch", !value);
+        this.props.onChange("isSegmentationDisabled", !value);
+      };
+    }
+    return (
+      <Row>
+        <Col span={24}>
+          {/* TODO Maybe use the new antd icons instead of the switch when upgrading antd. */
+          this.getEnableDisableLayerSwitch(isDisabled, onChange)}
+          <span style={{ fontWeight: 700 }}>{layerName}</span>
+          <Tag style={{ cursor: "default", marginLeft: 8 }}>{elementClass} Layer</Tag>
+          {layerName != null ? this.getFindDataButton(layerName, isDisabled) : null}
+        </Col>
+      </Row>
+    );
+  };
 
   getLayerSettings = (
-    layerName?: string,
-    layer?: DatasetLayerConfiguration,
+    layerName: ?string,
+    layer: ?DatasetLayerConfiguration,
     isColorLayer: boolean = true,
   ) => {
     // Ensure that a color layer needs a layer and a layer name
@@ -204,18 +211,23 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     if (!isColorLayer && !layerName) {
       layerName = "segmentation";
     }
-    let elementClass = isColorLayer ? "color" : "segmentation";
-    if (layerName) {
+    let elementClass = "uint8";
+    if (layerName != null) {
       elementClass = getElementClass(this.props.dataset, layerName);
     }
-    const isDisabled = isColorLayer ? layer.isDisabled : false;
+    const isDisabled =
+      isColorLayer && layer != null
+        ? layer.isDisabled
+        : this.props.datasetConfiguration.isSegmentationDisabled;
 
     return (
       <div key={layerName}>
         {this.getLayerSettingsHeader(isDisabled, isColorLayer, layerName, elementClass)}
         {isDisabled ? null : (
           <React.Fragment>
-            {isHistogramSupported(elementClass) ? this.getHistogram(layerName, layer) : null}
+            {isHistogramSupported(elementClass) && layerName != null && layer != null
+              ? this.getHistogram(layerName, layer)
+              : null}
             <NumberSliderSetting
               label="Opacity"
               min={0}
@@ -314,15 +326,14 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
   render() {
     const { layers } = this.props.datasetConfiguration;
     const colorSettings = Object.entries(layers).map(entry => {
-      // $FlowFixMe Object.entries returns mixed for Flow
       const [layerName, layer] = entry;
+      // $FlowFixMe Object.entries returns mixed for Flow
       return this.getLayerSettings(layerName, layer, true);
     });
     const hasInvisibleLayers =
       Object.keys(layers).find(
         layerName => layers[layerName].isDisabled || layers[layerName].alpha === 0,
-      ) != null;
-
+      ) != null || this.props.datasetConfiguration.isSegmentationDisabled;
     return (
       <Collapse bordered={false} defaultActiveKey={["1", "2", "3", "4"]}>
         <Panel header={this.renderPanelHeader(hasInvisibleLayers)} key="1">

From 0b16ef4bb7f30541c34e531edfeb25ddf8a57699 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?=
 <michael.buessemeyer@student.hpi.de>
Date: Wed, 14 Aug 2019 17:12:10 +0200
Subject: [PATCH 3/7] fixed rendering test

---
 .../javascripts/test/puppeteer/dataset_rendering.screenshot.js   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/javascripts/test/puppeteer/dataset_rendering.screenshot.js b/frontend/javascripts/test/puppeteer/dataset_rendering.screenshot.js
index 294ffd8d6f4..39478068af0 100644
--- a/frontend/javascripts/test/puppeteer/dataset_rendering.screenshot.js
+++ b/frontend/javascripts/test/puppeteer/dataset_rendering.screenshot.js
@@ -103,6 +103,7 @@ const datasetConfigOverrides: { [key: string]: DatasetConfiguration } = {
     },
     quality: 0,
     segmentationOpacity: 0,
+    isSegmentationDisabled: false,
     highlightHoveredCellId: true,
     renderIsosurfaces: false,
     renderMissingDataBlack: false,

From bb16c96ebcbfb4eba247accb83acf0f4e0513a3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?=
 <michael.buessemeyer@student.hpi.de>
Date: Wed, 14 Aug 2019 17:40:34 +0200
Subject: [PATCH 4/7] added changelog entry

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc77bc17402..0e8db8d7bd4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,10 +12,12 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 ### Added
 - Indicating active nml downloads with a loading icon. [#4228](https://github.com/scalableminds/webknossos/pull/4228)
 - Added possibility for users to see their own time statistics. [#4220](https://github.com/scalableminds/webknossos/pull/4220)
+- The segmentation layer can now be turned invisible and also supports the find data feature. [#4232](https://github.com/scalableminds/webknossos/pull/4232)
 
 ### Changed
 - Each of the  columns of the dataset table and explorative annotations table in the dashboard now have an individual fixed width, so the tables become scrollable on smaller screens. [#4207](https://github.com/scalableminds/webknossos/pull/4207)
 - When uploading a zipped annotation (such as volume / hybrid / collection), the zip name is used for the resulting explorative annotation, rather than the name of the contained NML file. [#4222](https://github.com/scalableminds/webknossos/pull/4222)
+- Color and segmentation layer are not longer treated separately in the dataset settings in tracing/view mode.  [#4232](https://github.com/scalableminds/webknossos/pull/4232)
 
 ### Fixed
 - Data for disabled or invisible layers will no longer be downloaded, saving bandwidth and speeding up webKnossos in general. [#4202](https://github.com/scalableminds/webknossos/pull/4202)

From 53a4f2b2b39725a2486f66c7e7fadbb6f10b8c82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?=
 <michael.buessemeyer@student.hpi.de>
Date: Thu, 15 Aug 2019 14:11:27 +0200
Subject: [PATCH 5/7] small fixes

---
 frontend/javascripts/oxalis/default_state.js                  | 2 +-
 .../javascripts/oxalis/view/settings/dataset_settings_view.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/javascripts/oxalis/default_state.js b/frontend/javascripts/oxalis/default_state.js
index eff0f1b8eb2..60b96942e72 100644
--- a/frontend/javascripts/oxalis/default_state.js
+++ b/frontend/javascripts/oxalis/default_state.js
@@ -39,7 +39,7 @@ const defaultState: OxalisState = {
     interpolation: false,
     layers: {},
     quality: 0,
-    isSegmentationDisabled: true,
+    isSegmentationDisabled: false,
     loadingStrategy: "PROGRESSIVE_QUALITY",
     segmentationOpacity: 20,
     highlightHoveredCellId: true,
diff --git a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
index 295655cf657..59a6b36f8a4 100644
--- a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
+++ b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
@@ -257,8 +257,8 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
                 onChange={_.partial(this.props.onChange, "highlightHoveredCellId")}
               />
             )}
-            {(!isColorLayer && this.props.controlMode === ControlModeEnum.VIEW) ||
-            window.allowIsosurfaces ? (
+            {!isColorLayer && (this.props.controlMode === ControlModeEnum.VIEW ||
+            window.allowIsosurfaces) ? (
               <SwitchSetting
                 label="Render Isosurfaces (Beta)"
                 value={this.props.datasetConfiguration.renderIsosurfaces}

From 8b3470fe03df10847f5a6e47bd78a2652260b413 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?=
 <michael.buessemeyer@student.hpi.de>
Date: Thu, 15 Aug 2019 14:42:31 +0200
Subject: [PATCH 6/7] made code pretty

---
 .../javascripts/oxalis/view/settings/dataset_settings_view.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
index 59a6b36f8a4..872897c08a3 100644
--- a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
+++ b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
@@ -257,8 +257,8 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
                 onChange={_.partial(this.props.onChange, "highlightHoveredCellId")}
               />
             )}
-            {!isColorLayer && (this.props.controlMode === ControlModeEnum.VIEW ||
-            window.allowIsosurfaces) ? (
+            {!isColorLayer &&
+            (this.props.controlMode === ControlModeEnum.VIEW || window.allowIsosurfaces) ? (
               <SwitchSetting
                 label="Render Isosurfaces (Beta)"
                 value={this.props.datasetConfiguration.renderIsosurfaces}

From 9c5a7ef2d48a4e1438a9df41794ff966d2ac5f2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20B=C3=BC=C3=9Femeyer?=
 <michael.buessemeyer@student.hpi.de>
Date: Tue, 20 Aug 2019 16:47:01 +0200
Subject: [PATCH 7/7] applied feedback

---
 .../view/settings/dataset_settings_view.js    | 84 ++++++++++---------
 1 file changed, 43 insertions(+), 41 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
index 872897c08a3..b3581f9905d 100644
--- a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
+++ b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
@@ -116,14 +116,23 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     Object.keys(layers).forEach(otherLayerName =>
       this.props.onChangeLayer(otherLayerName, "isDisabled", !isVisible),
     );
+    this.props.onChange("isSegmentationDisabled", !isVisible);
   };
 
   isLayerExclusivelyVisible = (layerName: string): boolean => {
     const { layers } = this.props.datasetConfiguration;
-    return Object.keys(layers).every(otherLayerName => {
+    const isOnlyGivenLayerVisible = Object.keys(layers).every(otherLayerName => {
       const { isDisabled } = layers[otherLayerName];
       return layerName === otherLayerName ? !isDisabled : isDisabled;
     });
+    const { isSegmentationDisabled } = this.props.datasetConfiguration;
+    const segmentation = Model.getSegmentationLayer();
+    const segmentationLayerName = segmentation != null ? segmentation.name : null;
+    if (layerName === segmentationLayerName) {
+      return isOnlyGivenLayerVisible && !isSegmentationDisabled;
+    } else {
+      return isOnlyGivenLayerVisible && isSegmentationDisabled;
+    }
   };
 
   getEnableDisableLayerSwitch = (
@@ -159,62 +168,52 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
   getLayerSettingsHeader = (
     isDisabled: boolean,
     isColorLayer: boolean,
-    layerName: ?string,
+    layerName: string,
     elementClass: string,
   ) => {
-    let onChange = () => {};
-    if (isColorLayer && layerName != null) {
-      const layerNameFixed: string = layerName;
-      onChange = (value, event) => {
-        if (!event.ctrlKey) {
-          this.props.onChangeLayer(layerNameFixed, "isDisabled", !value);
-          return;
-        }
-        // If ctrl is pressed, toggle between "all layers visible" and
-        // "only selected layer visible".
-        // Phillip fragen wie das gehandhabt werden soll
-        if (this.isLayerExclusivelyVisible(layerNameFixed)) {
-          this.setVisibilityForAllLayers(true);
-        } else {
-          this.setVisibilityForAllLayers(false);
-          this.props.onChangeLayer(layerNameFixed, "isDisabled", false);
-        }
-      };
-    } else if (!isColorLayer) {
-      onChange = value => {
-        console.log("received value from segemntation visibility switch", !value);
-        this.props.onChange("isSegmentationDisabled", !value);
-      };
-    }
+    const setSingleLayerVisibility = (isVisible: boolean) => {
+      if (isColorLayer) {
+        this.props.onChangeLayer(layerName, "isDisabled", !isVisible);
+      } else {
+        this.props.onChange("isSegmentationDisabled", !isVisible);
+      }
+    };
+    const onChange = (value, event) => {
+      if (!event.ctrlKey) {
+        setSingleLayerVisibility(value);
+        return;
+      }
+      // If ctrl is pressed, toggle between "all layers visible" and
+      // "only selected layer visible".
+      if (this.isLayerExclusivelyVisible(layerName)) {
+        this.setVisibilityForAllLayers(true);
+      } else {
+        this.setVisibilityForAllLayers(false);
+        setSingleLayerVisibility(true);
+      }
+    };
     return (
-      <Row>
+      <Row style={{ marginTop: isDisabled ? 0 : 16 }}>
         <Col span={24}>
-          {/* TODO Maybe use the new antd icons instead of the switch when upgrading antd. */
-          this.getEnableDisableLayerSwitch(isDisabled, onChange)}
+          {this.getEnableDisableLayerSwitch(isDisabled, onChange)}
           <span style={{ fontWeight: 700 }}>{layerName}</span>
           <Tag style={{ cursor: "default", marginLeft: 8 }}>{elementClass} Layer</Tag>
-          {layerName != null ? this.getFindDataButton(layerName, isDisabled) : null}
+          {this.getFindDataButton(layerName, isDisabled)}
         </Col>
       </Row>
     );
   };
 
   getLayerSettings = (
-    layerName: ?string,
+    layerName: string,
     layer: ?DatasetLayerConfiguration,
     isColorLayer: boolean = true,
   ) => {
-    // Ensure that a color layer needs a layer and a layer name
-    if (isColorLayer && (!layerName || !layer)) {
+    // Ensure that a color layer needs a layer.
+    if (isColorLayer && !layer) {
       return null;
     }
-    if (!isColorLayer && !layerName) {
-      layerName = "segmentation";
-    }
-    let elementClass = "uint8";
-    if (layerName != null) {
-      elementClass = getElementClass(this.props.dataset, layerName);
-    }
+    const elementClass = getElementClass(this.props.dataset, layerName);
     const isDisabled =
       isColorLayer && layer != null
         ? layer.isDisabled
@@ -238,7 +237,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
                   : this.props.datasetConfiguration.segmentationOpacity
               }
               onChange={
-                isColorLayer && layerName != null
+                isColorLayer
                   ? _.partial(this.props.onChangeLayer, layerName, "alpha")
                   : _.partial(this.props.onChange, "segmentationOpacity")
               }
@@ -308,6 +307,9 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
   getSegmentationPanel() {
     const segmentation = Model.getSegmentationLayer();
     const segmentationLayerName = segmentation != null ? segmentation.name : null;
+    if (!segmentationLayerName) {
+      return null;
+    }
     return this.getLayerSettings(segmentationLayerName, null, false);
   }