Add toggle color layer visibility button

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,