Allow to make a layer exclusively visible by pressing ctrl when chang…

…ing visibility (#4061)

* allow to make a layer exclusively visible by pressing ctrl when changing the visibility (fixes #3896)

* change ctrl toggle behavior to match gimps behavior

* update changelog and docs

CHANGELOG.md

@@ -12,6 +12,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 ### Added
 - BossDB datasets can now be added to webKnossos using the webknossos-connect service. [#4036](https://github.com/scalableminds/webknossos/pull/4036)
 - Added an auto-brush feature for selected datasets. [#4053](https://github.com/scalableminds/webknossos/pull/4053)
+- When holding CTRL while toggling the visibility of a layer, that layer will be made exclusively visible. This change makes it easier to quickly compare different data layers against each other. [#4061](https://github.com/scalableminds/webknossos/pull/4061)
 
 ### Changed
 - The NML parser now rounds floating point values in node coordinates. [#4045](https://github.com/scalableminds/webknossos/pull/4045)

docs/tracing_ui.md

@@ -86,7 +86,7 @@ For multi-layer datasets, each layer can be adjusted separately.
 - `Contrast`: Increase / Decrease the contrast of the data layer.
 - `Opacity`: Increase / Decrease the opacity of the data layer.
 - `Color`: Every data layer can be colored to make them easily identifiable. By default, all layers have a white overlay, showing the true, raw black & white data.
-- `Visibility`: Use the eye icon on the right side of the name of the data layer to enable/disable this layer.
+- `Visibility`: Use the eye icon on the right side of the name of the data layer to enable/disable this layer. If you hold CTRL while toggling the visibility of a layer, that layer will be made exclusively visible.
 
 #### Segmentation
 - `Segmentation Opacity`: Increases / Decreases the opacity of the segmentation layer. A low value will make the segmentation almost transparent letting you see the underlying data layers more clearly. A high value will make the segmentation opaque which is useful for adjusting and reviewing the exact fit of the segmentation layer. Only possible if your dataset has a segmentation layer.

frontend/javascripts/oxalis/view/settings/dataset_settings_view.js

@@ -79,6 +79,21 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
     </Tooltip>
   );
 
+  setVisibilityForAllLayers = (isVisible: boolean) => {
+    const { layers } = this.props.datasetConfiguration;
+    Object.keys(layers).forEach(otherLayerName =>
+      this.props.onChangeLayer(otherLayerName, "isDisabled", !isVisible),
+    );
+  };
+
+  isLayerExclusivelyVisible = (layerName: string): boolean => {
+    const { layers } = this.props.datasetConfiguration;
+    return Object.keys(layers).every(otherLayerName => {
+      const { isDisabled } = layers[otherLayerName];
+      return layerName === otherLayerName ? !isDisabled : isDisabled;
+    });
+  };
+
   getColorSettings = (
     [layerName, layer]: [string, DatasetLayerConfiguration],
     layerIndex: number,
@@ -96,7 +111,20 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
               <div style={{ display: "inline-block", marginRight: 8 }}>
                 <Switch
                   size="small"
-                  onChange={val => this.props.onChangeLayer(layerName, "isDisabled", !val)}
+                  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>