Enable maximized gl components (#3876)

* sorting mappings

* Update CHANGELOG.md

* changed to slice function to create the copy of the array

* enabled maximized gl components and fixed rendering but not overlapping

* not displaying underlying items anymore when maximized

* not useing force update to rerender anymore

* removed useless stuff in rendering method

* better comments and corrected spelling

* moved css class definition to gl overwrite less file

* fixed bug that caused permanent update of gl

* fixed and added comments

* applied pr feedback

* update changelog

CHANGELOG.md

@@ -17,6 +17,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - The dataset settings within the tracing view allow to select between different loading strategies now ("best quality first" and "progressive quality"). Additionally, the rendering can use different magnifications as a fallback (instead of only one magnification). [#3801](https://github.com/scalableminds/webknossos/pull/3801)
 - The mapping selection dropbown is now sorted alphabetically. [#3864](https://github.com/scalableminds/webknossos/pull/3864)
 - 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. [#3876](https://github.com/scalableminds/webknossos/pull/3876)
 
 ### Changed
 - Improved the flight mode performance for tracings with very large trees (>80.000 nodes). [#3880](https://github.com/scalableminds/webknossos/pull/3880)

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

@@ -23,7 +23,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;
+  }
+}