Enable maximized gl components

frontend/javascripts/oxalis/view/layouting/default_layout_configs.js

@@ -22,7 +22,7 @@ export const show3DViewportInArbitrary = false;
 const LayoutSettings = {
   showPopoutIcon: false,
   showCloseIcon: false,
-  showMaximiseIcon: false,
+  showMaximiseIcon: true,
 };
 
 // While the first parameter to `Pane` is the title of the pane, the second one is an id

frontend/javascripts/oxalis/view/layouting/golden_layout_adapter.js

@@ -70,6 +70,7 @@ const updateSizeForGl = gl => {
 export class GoldenLayoutAdapter extends React.PureComponent<Props<*>, *> {
   gl: GoldenLayout;
   unbindListeners: Array<() => void>;
+  maximizedItem: null;
 
   componentDidMount() {
     this.setupLayout();
@@ -102,6 +103,32 @@ export class GoldenLayoutAdapter extends React.PureComponent<Props<*>, *> {
     const { onLayoutChange } = this.props;
     if (onLayoutChange != null && this.gl.isInitialised) {
       onLayoutChange(this.gl.toConfig(), this.props.activeLayoutName);
+      // Only when the maximized item changed, adjust css classes to not show hidden gl items.
+      if (this.maximizedItem !== !this.gl._maximisedItem) {
+        // Gl needs a forced update when returning from maximized viewing
+        // mode to render stacked components correctly.
+        const needsUpdatedSize = this.gl._maximisedItem === null && this.maximizedItem != null;
+        this.maximizedItem = this.gl._maximisedItem;
+        const allGlHeaderElemets = document.getElementsByClassName("lm_item");
+        for (const element of allGlHeaderElemets) {
+          if (this.maximizedItem) {
+            // Show only the maximized item and do not hide the gl root component.
+            if (
+              !element.classList.contains("lm_maximised") &&
+              !element.classList.contains("lm_root")
+            ) {
+              element.classList.add("hidden-gl-item");
+            }
+          } else {
+            // If there is no maximized component, remove the css class to show everything as usual.
+            element.classList.remove("hidden-gl-item");
+          }
+        }
+        // Force gl to update again when returning from maximized viewing mode.
+        if (needsUpdatedSize) {
+          updateSizeForGl(this.gl);
+        }
+      }
     }
   }
 

frontend/stylesheets/goldenlayout_overwrites.less

@@ -86,3 +86,13 @@
     border-bottom: 1px solid #1890ff;
   }
 }
+
+// Used to hide the header and content of a gl item when another component is maximized.
+.hidden-gl-item {
+  .lm_header {
+    display: none;
+  }
+  .lm_items .lm_item_container .lm_content {
+    display: none;
+  }
+}