Add toggle color layer visibility button

CHANGELOG.md

@@ -21,6 +21,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - The HTML template now includes SEO tags for demo instances and hides internal instances from search engines.
 - A maximize-button was added to the viewports in the annotation view. Maximization can also be toggled with the `.` shortcut. [#3876](https://github.com/scalableminds/webknossos/pull/3876)
 - [webknossos-connect](https://github.com/scalableminds/webknossos-connect) now starts with webKnossos on local and development instances by default. [#3913](https://github.com/scalableminds/webknossos/pull/3913)
+- Added a button for each color layer that toggles its visibility. [#3943](https://github.com/scalableminds/webknossos/pull/3943)
 
 ### Changed
 - Improved the flight mode performance for tracings with very large trees (>80.000 nodes). [#3880](https://github.com/scalableminds/webknossos/pull/3880)

docs/tracing_ui.md

@@ -275,7 +275,9 @@ For multi-layer datasets, each layer can be adjusted separately.
 #### Colors
 - `Brightness`: Increase / Decrease the brightness of the data layer.
 - `Contrast`: Increase / Decrease the contrast of the data layer.
+- `Opacity`: Increase / Decrease the opacityof 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 toggle its visibility.
 
 #### 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/dashboard/dataset/dataset_import_view.js

@@ -116,6 +116,7 @@ class DatasetImportView extends React.PureComponent<Props, State> {
         brightness: 0,
         contrast: 1,
         color: [255, 255, 255],
+        isVisible: true,
       };
       const datasetDefaultConfiguration = (await getDatasetDefaultConfiguration(
         this.props.datasetId,

frontend/javascripts/libs/datasource.schema.json

@@ -68,7 +68,21 @@
           "properties": {
             "name": { "type": "string" },
             "category": { "enum": ["color", "segmentation"] },
-            "elementClass": { "enum": ["uint8", "uint16", "uint24", "uint32", "uint64", "float,", "double", "int8", "int16", "int32", "int64"] }
+            "elementClass": {
+              "enum": [
+                "uint8",
+                "uint16",
+                "uint24",
+                "uint32",
+                "uint64",
+                "float,",
+                "double",
+                "int8",
+                "int16",
+                "int32",
+                "int64"
+              ]
+            }
           },
           "required": ["name", "category", "elementClass"]
         },
@@ -128,9 +142,10 @@
         "properties": {
           "brightness": { "type": "number" },
           "contrast": { "type": "number" },
-          "color": { "$ref": "#/definitions/types::Vector3" }
+          "color": { "$ref": "#/definitions/types::Vector3" },
+          "isVisible": { "type": "boolean" }
         },
-        "required": ["brightness", "contrast", "color"]
+        "required": ["brightness", "contrast", "color", "isVisible"]
       }
     }
   }

frontend/javascripts/libs/datasource.types.js

@@ -72,5 +72,6 @@ export type LayerUserConfiguration = {
     brightness: number,
     contrast: number,
     color: Vector3,
+    isVisible: boolean,
   },
 };

frontend/javascripts/oxalis/geometries/materials/plane_material_factory.js

@@ -503,7 +503,7 @@ class PlaneMaterialFactory {
   updateUniformsForLayer(settings: DatasetLayerConfiguration, name: string): void {
     this.uniforms[`${name}_brightness`].value = settings.brightness / 255;
     this.uniforms[`${name}_contrast`].value = settings.contrast;
-    this.uniforms[`${name}_alpha`].value = settings.alpha / 100;
+    this.uniforms[`${name}_alpha`].value = settings.isVisible ? settings.alpha / 100 : 0;
 
     if (settings.color != null) {
       const color = this.convertColor(settings.color);

frontend/javascripts/oxalis/model/reducers/settings_reducer.js

@@ -98,6 +98,7 @@ function SettingsReducer(state: OxalisState, action: Action): OxalisState {
               contrast: 1,
               color: [255, 255, 255],
               alpha: 100,
+              isVisible: true,
             },
             initialLayerSettings[layer.name],
           );

frontend/javascripts/oxalis/store.js

@@ -213,6 +213,7 @@ export type DatasetLayerConfiguration = {|
   +brightness: number,
   +contrast: number,
   +alpha: number,
+  +isVisible: boolean,
 |};
 
 export type LoadingStrategy = "BEST_QUALITY_FIRST" | "PROGRESSIVE_QUALITY";

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

@@ -39,8 +39,8 @@ import constants, {
 } from "oxalis/constants";
 import messages, { settings } from "messages";
 
-const Panel = Collapse.Panel;
-const Option = Select.Option;
+const { Panel } = Collapse;
+const { Option } = Select;
 
 type DatasetSettingsProps = {|
   datasetConfiguration: DatasetConfiguration,
@@ -65,7 +65,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
     isLastLayer: boolean,
   ) => {
     const isRGB = isRgb(this.props.dataset, layerName);
-    const { brightness, contrast, alpha, color } = layer;
+    const { brightness, contrast, alpha, color, isVisible } = layer;
     return (
       <div key={layerName}>
         <Row>
@@ -74,6 +74,23 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
             <Tag style={{ cursor: "default", marginLeft: 8 }} color={isRGB && "#1890ff"}>
               {isRGB ? "24-bit" : "8-bit"} Layer
             </Tag>
+            {alpha > 0 && isVisible ? (
+              <Tooltip title="Make this color layer invisible.">
+                <Icon
+                  type="eye"
+                  onClick={() => this.props.onChangeLayer(layerName, "isVisible", false)}
+                  style={{ marginTop: 4, marginLeft: 8, cursor: "pointer" }}
+                />
+              </Tooltip>
+            ) : (
+              <Tooltip title="Make this color layer visible.">
+                <Icon
+                  type="eye-o"
+                  onClick={() => this.props.onChangeLayer(layerName, "isVisible", true)}
+                  style={{ marginTop: 4, marginLeft: 8, cursor: "pointer" }}
+                />
+              </Tooltip>
+            )}
             <Tooltip title="If you are having trouble finding your data, webKnossos can try to find a position which contains data.">
               <Icon
                 type="scan"

frontend/javascripts/test/puppeteer/dataset_rendering.screenshot.js

@@ -86,7 +86,9 @@ const datasetConfigOverrides: { [key: string]: DatasetConfiguration } = {
   ROI2017_wkw_fallback: {
     fourBit: false,
     interpolation: true,
-    layers: { color: { color: [255, 255, 255], contrast: 1, brightness: 0, alpha: 100 } },
+    layers: {
+      color: { color: [255, 255, 255], contrast: 1, brightness: 0, alpha: 100, isVisible: true },
+    },
     quality: 0,
     segmentationOpacity: 0,
     highlightHoveredCellId: true,