fix shader compilation error and invisible color layers in certain ci…

…rcumstances (#4556) * fix shader compilation error and invisible color layers in certain circumstances * update changelog * Apply suggestions from code review Co-Authored-By: Daniel <[email protected]> * Merge branch 'master' into fix-invisible-layers
scalableminds · Apr 21, 2020 · ccfd33b · ccfd33b
1 parent b230f23
commit ccfd33b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - The datastore checks if a organization folder can be created before creating a new organization. [#4501](https://github.com/scalableminds/webknossos/pull/4501)
 - Fixed a bug where under certain circumstances groups in the tree tab were not sorted by name. [#4542](https://github.com/scalableminds/webknossos/pull/4542)
 - Fixed that `segmentationOpacity` could not be set anymore as part of the recommended settings for a task type. [#4545](https://github.com/scalableminds/webknossos/pull/4545)
+- Fixed a rendering error which could make some layers disappear in certain circumstances. [#4556](https://github.com/scalableminds/webknossos/pull/4556)
 
 ### Removed
 

diff --git a/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.js b/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.js
@@ -85,14 +85,14 @@ class PlaneMaterialFactory {
   attributes: Object;
   shaderId: number;
   storePropertyUnsubscribers: Array<() => void> = [];
-  leastRecentlyVisibleLayers: Array<string>;
+  leastRecentlyVisibleColorLayers: Array<string>;
   oldShaderCode: ?string;
 
   constructor(planeID: OrthoView, isOrthogonal: boolean, shaderId: number) {
     this.planeID = planeID;
     this.isOrthogonal = isOrthogonal;
     this.shaderId = shaderId;
-    this.leastRecentlyVisibleLayers = [];
+    this.leastRecentlyVisibleColorLayers = [];
   }
 
   setup() {
@@ -414,19 +414,20 @@ class PlaneMaterialFactory {
             const settings = layerSettings[dataLayer.name];
             if (settings != null) {
               const isLayerEnabled = !settings.isDisabled;
+              const isSegmentationLayer = segmentationLayerName === dataLayer.name;
               if (
+                !isSegmentationLayer &&
                 oldVisibilityPerLayer[dataLayer.name] != null &&
                 oldVisibilityPerLayer[dataLayer.name] !== isLayerEnabled
               ) {
                 if (settings.isDisabled) {
-                  this.onDisableLayer(dataLayer.name);
+                  this.onDisableColorLayer(dataLayer.name);
                 } else {
-                  this.onEnableLayer(dataLayer.name);
+                  this.onEnableColorLayer(dataLayer.name);
                 }
               }
               oldVisibilityPerLayer[dataLayer.name] = isLayerEnabled;
               const name = sanitizeName(dataLayer.name);
-              const isSegmentationLayer = segmentationLayerName === dataLayer.name;
               this.updateUniformsForLayer(settings, name, elementClass, isSegmentationLayer);
             }
           }
@@ -605,32 +606,39 @@ class PlaneMaterialFactory {
       onlyColorLayers: true,
     }).map(layer => layer.name);
 
-    // In case, this.leastRecentlyVisibleLayers does not contain all disabled layers
+    // In case, this.leastRecentlyVisibleColorLayers does not contain all disabled layers
     // because they were already disabled on page load), append the disabled layers
     // which are not already in that array.
     // Note that the order of this array is important (earlier elements are more "recently used")
     // which is why it is important how this operation is done.
-    this.leastRecentlyVisibleLayers = [
-      ...this.leastRecentlyVisibleLayers,
-      ..._.without(disabledLayerNames, ...this.leastRecentlyVisibleLayers),
+    this.leastRecentlyVisibleColorLayers = [
+      ...this.leastRecentlyVisibleColorLayers,
+      ..._.without(disabledLayerNames, ...this.leastRecentlyVisibleColorLayers),
     ];
 
-    return enabledLayerNames
-      .concat(this.leastRecentlyVisibleLayers)
+    const names = enabledLayerNames
+      .concat(this.leastRecentlyVisibleColorLayers)
       .slice(0, maximumLayerCountToRender)
-      .sort()
-      .map(sanitizeName);
+      .sort();
+
+    return names.map(sanitizeName);
   }
 
-  onDisableLayer = layerName => {
-    this.leastRecentlyVisibleLayers = _.without(this.leastRecentlyVisibleLayers, layerName);
-    this.leastRecentlyVisibleLayers = [layerName, ...this.leastRecentlyVisibleLayers];
+  onDisableColorLayer = layerName => {
+    this.leastRecentlyVisibleColorLayers = _.without(
+      this.leastRecentlyVisibleColorLayers,
+      layerName,
+    );
+    this.leastRecentlyVisibleColorLayers = [layerName, ...this.leastRecentlyVisibleColorLayers];
 
     this.recomputeFragmentShader();
   };
 
-  onEnableLayer = layerName => {
-    this.leastRecentlyVisibleLayers = _.without(this.leastRecentlyVisibleLayers, layerName);
+  onEnableColorLayer = layerName => {
+    this.leastRecentlyVisibleColorLayers = _.without(
+      this.leastRecentlyVisibleColorLayers,
+      layerName,
+    );
     this.recomputeFragmentShader();
   };
 

diff --git a/frontend/javascripts/oxalis/model/accessors/dataset_accessor.js b/frontend/javascripts/oxalis/model/accessors/dataset_accessor.js
@@ -327,7 +327,7 @@ export function getEnabledLayers(
     if (settings == null) {
       return false;
     }
-    return settings.isDisabled === options.invert;
+    return settings.isDisabled === Boolean(options.invert);
   });
 }
 

diff --git a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
@@ -224,7 +224,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
           <span style={{ fontWeight: 700 }}>
             {!isColorLayer && isVolumeTracing ? "Volume Layer" : layerName}
           </span>
-          <Tag style={{ cursor: "default", marginLeft: 8 }}>{elementClass} Layer</Tag>
+          <Tag style={{ cursor: "default", marginLeft: 8 }}>{elementClass}</Tag>
           {this.getFindDataButton(layerName, isDisabled, isColorLayer)}
           {this.getReloadDataButton(layerName)}
         </Col>