Multiple custom layouts for tracing views

CHANGELOG.md

@@ -12,6 +12,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 ### Added
 
 - Added support for duplicate dataset names for different organizations [#3137](https://github.com/scalableminds/webknossos/pull/3137)
+- A User can now have multiple layouts for tracing views. [#3299](https://github.com/scalableminds/webknossos/pull/3299)
 
 ### Changed
 

app/assets/javascripts/oxalis/model/actions/ui_actions.js

@@ -11,7 +11,15 @@ type SetVersionRestoreVisibilityAction = {
   active: boolean,
 };
 
-export type UiAction = SetDropzoneModalVisibilityAction | SetVersionRestoreVisibilityAction;
+type SetStoredLayoutsAction = {
+  type: "SET_STORED_LAYOUTS",
+  storedLayouts: Object,
+};
+
+export type UiAction =
+  | SetDropzoneModalVisibilityAction
+  | SetVersionRestoreVisibilityAction
+  | SetStoredLayoutsAction;
 
 export const setDropzoneModalVisibilityAction = (
   visible: boolean,
@@ -26,3 +34,8 @@ export const setVersionRestoreVisibilityAction = (
   type: "SET_VERSION_RESTORE_VISIBILITY",
   active,
 });
+
+export const setStoredLayoutsAction = (storedLayouts: Object): SetStoredLayoutsAction => ({
+  type: "SET_STORED_LAYOUTS",
+  storedLayouts,
+});

app/assets/javascripts/oxalis/model/reducers/ui_reducer.js

@@ -22,6 +22,14 @@ function UiReducer(state: OxalisState, action: Action): OxalisState {
       });
     }
 
+    case "SET_STORED_LAYOUTS": {
+      return update(state, {
+        uiInformation: {
+          storedLayouts: { $set: action.storedLayouts },
+        },
+      });
+    }
+
     default:
       return state;
   }

app/assets/javascripts/oxalis/store.js

@@ -49,6 +49,7 @@ import type {
   APIDataset,
   APIDataLayer,
 } from "admin/api_flow_types";
+import { defaultLayoutSchema } from "oxalis/view/layouting/default_layout_configs";
 
 export type CommentType = {|
   +content: string,
@@ -345,6 +346,7 @@ export type ViewModeData = {
 type UiInformation = {
   +showDropzoneModal: boolean,
   +showVersionRestore: boolean,
+  +storedLayouts: Object,
 };
 
 export type OxalisState = {|
@@ -527,6 +529,7 @@ export const defaultState: OxalisState = {
   uiInformation: {
     showDropzoneModal: false,
     showVersionRestore: false,
+    storedLayouts: defaultLayoutSchema,
   },
 };
 

app/assets/javascripts/oxalis/view/action-bar/add_new_layout_modal.js

@@ -0,0 +1,45 @@
+// @flow
+
+import * as React from "react";
+import { Input, Modal } from "antd";
+
+type Props = {
+  addLayout: string => void,
+  visible: boolean,
+  onCancel: () => void,
+};
+
+type State = {
+  value: string,
+};
+
+class AddNewLayoutModal extends React.PureComponent<Props, State> {
+  state = {
+    value: "",
+  };
+
+  render() {
+    return (
+      <Modal
+        title="Add a new layout"
+        visible={this.props.visible}
+        onOk={() => {
+          const value = this.state.value;
+          this.setState({ value: "" });
+          this.props.addLayout(value);
+        }}
+        onCancel={this.props.onCancel}
+      >
+        <Input
+          placeholder="Layout Name"
+          value={this.state.value}
+          onChange={evt => {
+            this.setState({ value: evt.target.value });
+          }}
+        />
+      </Modal>
+    );
+  }
+}
+
+export default AddNewLayoutModal;

app/assets/javascripts/oxalis/view/action-bar/tracing_actions_view.js

@@ -3,7 +3,7 @@ import React, { PureComponent } from "react";
 import Model from "oxalis/model";
 import Store from "oxalis/store";
 import { connect } from "react-redux";
-import { Upload, Button, Dropdown, Menu, Icon, Modal } from "antd";
+import { Upload, Button, Dropdown, Menu, Icon, Modal, Tooltip } from "antd";
 import Constants from "oxalis/constants";
 import MergeModalView from "oxalis/view/action-bar/merge_modal_view";
 import ShareModalView from "oxalis/view/action-bar/share_modal_view";
@@ -18,11 +18,10 @@ import { copyAnnotationToUserAccount, finishAnnotation } from "admin/admin_rest_
 import { location } from "libs/window";
 import type { OxalisState, RestrictionsAndSettings, Task } from "oxalis/store";
 import type { APIUser, APITracingType } from "admin/api_flow_types";
-import { layoutEmitter } from "oxalis/view/layouting/layout_persistence";
-import { updateUserSettingAction } from "oxalis/model/actions/settings_actions";
 import SceneController from "oxalis/controller/scene_controller";
 import { readFileAsArrayBuffer } from "libs/read_file";
 import { AsyncButton } from "components/async_clickables";
+import { mapLayoutKeysToLanguage } from "oxalis/view/layouting/default_layout_configs";
 
 type StateProps = {
   tracingType: APITracingType,
@@ -32,27 +31,109 @@ type StateProps = {
   activeUser: ?APIUser,
 };
 
+type Props = StateProps & {
+  storedLayoutNamesForView: Array<string>,
+  layoutKey: string,
+  activeLayout: string,
+  onResetLayout: () => void,
+  onSelectLayout: string => void,
+  onDeleteLayout: string => void,
+  addNewLayout: () => void,
+};
+
 type State = {
   isShareModalOpen: boolean,
   isMergeModalOpen: boolean,
   isUserScriptsModalOpen: boolean,
 };
 
-export const resetLayoutItem = (
-  <Menu.Item key="reset-layout">
-    <div
-      onClick={() => {
-        Store.dispatch(updateUserSettingAction("layoutScaleValue", 1));
-        layoutEmitter.emit("resetLayout");
-      }}
+type ResetLayoutItemProps = {
+  storedLayoutNamesForView: Array<string>,
+  layoutKey: string,
+  activeLayout: string,
+  onResetLayout: () => void,
+  onSelectLayout: string => void,
+  onDeleteLayout: string => void,
+  addNewLayout: () => void,
+};
+
+export const ResetLayoutItem = (props: ResetLayoutItemProps) => {
+  const {
+    storedLayoutNamesForView,
+    layoutKey,
+    activeLayout,
+    onResetLayout,
+    onSelectLayout,
+    onDeleteLayout,
+    addNewLayout,
+    ...others
+  } = props;
+  const layoutMissingHelpTitle = (
+    <React.Fragment>
+      <h5 style={{ color: "#fff" }}>Where is my layout?</h5>
+      <p>
+        {`The tracing views are seperated into four classes. Each of them has their own layouts. If you
+        can't find your layout please open the tracing in the correct view mode or just add it here manually.`}
+      </p>
+    </React.Fragment>
+  );
+  const customLayoutsItems = storedLayoutNamesForView.map(layout => {
+    const isSelectedLayout = layout === activeLayout;
+    return (
+      <Menu.Item key={layout} className={isSelectedLayout ? "selected-layout-item" : null}>
+        <span
+          onClick={() => onSelectLayout(layout)}
+          style={{ minWidth: "100%", minHeight: "auto", display: "inline-block" }}
+        >
+          <div className="inline-with-margin" style={{ marginRight: 16 }}>
+            {layout}
+            {isSelectedLayout ? (
+              <Icon type="check" className="sub-menu-item-icon" theme="outlined" />
+            ) : (
+              <Tooltip placement="top" title="Remove this layout">
+                <Icon
+                  type="delete"
+                  className="clickable-icon sub-menu-item-icon"
+                  onClick={() => onDeleteLayout(layout)}
+                />
+              </Tooltip>
+            )}
+          </div>
+        </span>
+      </Menu.Item>
+    );
+  });
+  return (
+    <Menu.SubMenu
+      {...others}
+      title={
+        <React.Fragment>
+          <Icon type="laptop" /> Layout
+          <Tooltip placement="top" title={layoutMissingHelpTitle}>
+            <Icon
+              type="info-circle-o"
+              style={{ color: "gray", marginRight: 36 }}
+              className="sub-menu-item-icon"
+            />
+          </Tooltip>
+        </React.Fragment>
+      }
     >
-      <Icon type="laptop" />
-      Reset Layout
-    </div>
-  </Menu.Item>
-);
+      <Menu.Item>
+        <div onClick={onResetLayout}>Reset Layout</div>
+      </Menu.Item>
+      <Menu.Item>
+        <div onClick={addNewLayout}>Add a new Layout</div>
+      </Menu.Item>
+      <Menu.Divider />
+      <Menu.ItemGroup title={`Layouts for ${mapLayoutKeysToLanguage[layoutKey]}`}>
+        {customLayoutsItems}
+      </Menu.ItemGroup>
+    </Menu.SubMenu>
+  );
+};
 
-class TracingActionsView extends PureComponent<StateProps, State> {
+class TracingActionsView extends PureComponent<Props, State> {
   state = {
     isShareModalOpen: false,
     isMergeModalOpen: false,
@@ -266,7 +347,18 @@ class TracingActionsView extends PureComponent<StateProps, State> {
       );
     }
 
-    elements.push(resetLayoutItem);
+    elements.push(
+      <ResetLayoutItem
+        storedLayoutNamesForView={this.props.storedLayoutNamesForView}
+        layoutKey={this.props.layoutKey}
+        activeLayout={this.props.activeLayout}
+        onResetLayout={this.props.onResetLayout}
+        onSelectLayout={this.props.onSelectLayout}
+        onDeleteLayout={this.props.onDeleteLayout}
+        addNewLayout={this.props.addNewLayout}
+        key="layout"
+      />,
+    );
 
     const onStlUpload = async info => {
       const buffer = await readFileAsArrayBuffer(info.file);