Revert "Revert "Add Recommended Configuration to Task Types (#3466)" (#3502)"

This reverts commit 246fbae.

Author: daniel-wer

CHANGELOG.md

@@ -11,7 +11,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 
 ### Added
 
--
+- Added the possibility to specify a recommended user configuration in a task type. The recommended configuration will be shown to users when they trace a task with a different task type and the configuration can be accepted or declined. [#3466](https://github.com/scalableminds/webknossos/pull/3466)
 
 ### Changed
 

MIGRATIONS.md

@@ -8,7 +8,7 @@ User-facing changes are documented in the [changelog](CHANGELOG.md).
 -
 
 ### Postgres Evolutions:
--
+- [036-add-lastTaskTypeId-to-user.sql](conf/evolutions/036-add-lastTaskTypeId-to-user.sql)
 
 
 ## [18.12.0](https://github.com/scalableminds/webknossos/releases/tag/18.12.0) - 2018-11-26

app/assets/javascripts/admin/admin_rest_api.js

@@ -142,9 +142,9 @@ export function getUser(userId: string): Promise<APIUser> {
   return Request.receiveJSON(`/api/users/${userId}`);
 }
 
-export function updateUser(newUser: APIUser): Promise<APIUser> {
+export function updateUser(newUser: $Shape<APIUser>): Promise<APIUser> {
   return Request.sendJSONReceiveJSON(`/api/users/${newUser.id}`, {
-    method: "PUT",
+    method: "PATCH",
     data: newUser,
   });
 }

app/assets/javascripts/admin/api_flow_types.js

@@ -137,6 +137,7 @@ export type APIUser = APIUserBase & {
   +isActive: boolean,
   +isEditable: boolean,
   +lastActivity: number,
+  +lastTaskTypeId: ?string,
   +organization: string,
 };
 
@@ -190,6 +191,7 @@ export type APITaskType = {
   +teamId: string,
   +teamName: string,
   +settings: APISettings,
+  +recommendedConfiguration: ?string,
 };
 
 export type TaskStatus = { +open: number, +active: number, +finished: number };

app/assets/javascripts/admin/tasktype/recommended_configuration_view.js

@@ -0,0 +1,101 @@
+// @flow
+import { Checkbox, Col, Collapse, Form, Icon, Input, Row, Tooltip } from "antd";
+import * as React from "react";
+
+import type { DatasetConfiguration, UserConfiguration } from "oxalis/store";
+import { jsonEditStyle } from "dashboard/dataset/helper_components";
+import { jsonStringify } from "libs/utils";
+import { validateUserSettingsJSON } from "dashboard/dataset/validation";
+
+const FormItem = Form.Item;
+const { Panel } = Collapse;
+
+export const DEFAULT_RECOMMENDED_CONFIGURATION: $Shape<{|
+  ...UserConfiguration,
+  ...DatasetConfiguration,
+|}> = {
+  clippingDistance: 500,
+  clippingDistanceArbitrary: 60,
+  displayCrosshair: true,
+  displayScalebars: false,
+  dynamicSpaceDirection: true,
+  keyboardDelay: 0,
+  moveValue: 500,
+  moveValue3d: 600,
+  mouseRotateValue: 0.001,
+  newNodeNewTree: false,
+  highlightCommentedNodes: false,
+  overrideNodeRadius: true,
+  particleSize: 5,
+  rotateValue: 0.01,
+  sphericalCapRadius: 500,
+  tdViewDisplayPlanes: false,
+  fourBit: false,
+  interpolation: true,
+  quality: 0,
+  segmentationOpacity: 0,
+  highlightHoveredCellId: false,
+  zoom: 0.8,
+  renderMissingDataBlack: false,
+};
+
+const errorIcon = (
+  <Tooltip title="The recommended user settings JSON has errors.">
+    <Icon type="exclamation-circle" style={{ color: "#f5222d", marginLeft: 4 }} />
+  </Tooltip>
+);
+
+export default function RecommendedConfigurationView({
+  form,
+  enabled,
+  onChangeEnabled,
+}: {
+  form: Object,
+  enabled: boolean,
+  onChangeEnabled: boolean => void,
+}) {
+  return (
+    <Collapse
+      onChange={openedPanels => onChangeEnabled(openedPanels.length === 1)}
+      activeKey={enabled ? "config" : null}
+    >
+      <Panel
+        key="config"
+        header={
+          <React.Fragment>
+            <Checkbox checked={enabled} style={{ marginRight: 10 }} /> Add Recommended User Settings
+            {enabled && form.getFieldError("recommendedConfiguration") && errorIcon}
+          </React.Fragment>
+        }
+        showArrow={false}
+      >
+        <Row gutter={32}>
+          <Col span={18}>
+            <FormItem>
+              The recommended configuration will be displayed to users when starting to trace a task
+              with this task type. The user is able to accept or decline this recommendation.
+              <br />
+              {form.getFieldDecorator("recommendedConfiguration", {
+                rules: [
+                  {
+                    validator: validateUserSettingsJSON,
+                  },
+                ],
+              })(
+                <Input.TextArea
+                  spellCheck={false}
+                  autosize={{ minRows: 20 }}
+                  style={jsonEditStyle}
+                />,
+              )}
+            </FormItem>
+          </Col>
+          <Col span={6}>
+            Valid settings and their default values: <br />
+            <pre>{jsonStringify(DEFAULT_RECOMMENDED_CONFIGURATION)}</pre>
+          </Col>
+        </Row>
+      </Panel>
+    </Collapse>
+  );
+}

app/assets/javascripts/admin/tasktype/task_type_create_view.js

@@ -11,10 +11,14 @@ import {
   updateTaskType,
   getTaskType,
 } from "admin/admin_rest_api";
+import { jsonStringify } from "libs/utils";
+import RecommendedConfigurationView, {
+  DEFAULT_RECOMMENDED_CONFIGURATION,
+} from "admin/tasktype/recommended_configuration_view";
 
 const FormItem = Form.Item;
-const Option = Select.Option;
-const TextArea = Input.TextArea;
+const { Option } = Select;
+const { TextArea } = Input;
 
 type Props = {
   taskTypeId: ?string,
@@ -24,11 +28,13 @@ type Props = {
 
 type State = {
   teams: Array<APITeam>,
+  useRecommendedConfiguration: boolean,
 };
 
 class TaskTypeCreateView extends React.PureComponent<Props, State> {
   state = {
     teams: [],
+    useRecommendedConfiguration: false,
   };
 
   componentDidMount() {
@@ -43,12 +49,22 @@ class TaskTypeCreateView extends React.PureComponent<Props, State> {
         branchPointsAllowed: true,
         preferredMode: null,
       },
+      recommendedConfiguration: jsonStringify(DEFAULT_RECOMMENDED_CONFIGURATION),
     };
     const taskType = this.props.taskTypeId ? await getTaskType(this.props.taskTypeId) : null;
     // Use merge which is deep _.extend
-    // eslint-disable-next-line no-unused-vars
-    const { recommendedConfiguration, ...formValues } = _.merge({}, defaultValues, taskType);
+    const formValues = _.merge({}, defaultValues, taskType);
+    if (formValues.recommendedConfiguration == null) {
+      // A recommended configuration of null overrides the default configuration when using _.merge
+      // If the task type has no recommended configuration, suggest the default one
+      formValues.recommendedConfiguration = defaultValues.recommendedConfiguration;
+    }
     this.props.form.setFieldsValue(formValues);
+
+    if (taskType != null && taskType.recommendedConfiguration != null) {
+      // Only "activate" the recommended configuration checkbox if the existing task type contained one
+      this.setState({ useRecommendedConfiguration: true });
+    }
   }
 
   async fetchData() {
@@ -57,6 +73,9 @@ class TaskTypeCreateView extends React.PureComponent<Props, State> {
 
   handleSubmit = e => {
     e.preventDefault();
+    if (!this.state.useRecommendedConfiguration) {
+      this.props.form.setFieldsValue({ recommendedConfiguration: null });
+    }
     this.props.form.validateFields(async (err, formValues) => {
       if (!err) {
         if (this.props.taskTypeId) {
@@ -69,6 +88,10 @@ class TaskTypeCreateView extends React.PureComponent<Props, State> {
     });
   };
 
+  onChangeUseRecommendedConfiguration = (useRecommendedConfiguration: boolean) => {
+    this.setState({ useRecommendedConfiguration });
+  };
+
   render() {
     const { getFieldDecorator } = this.props.form;
     const titlePrefix = this.props.taskTypeId ? "Update " : "Create";
@@ -170,6 +193,14 @@ class TaskTypeCreateView extends React.PureComponent<Props, State> {
               )}
             </FormItem>
 
+            <FormItem>
+              <RecommendedConfigurationView
+                form={this.props.form}
+                enabled={this.state.useRecommendedConfiguration}
+                onChangeEnabled={this.onChangeUseRecommendedConfiguration}
+              />
+            </FormItem>
+
             <FormItem>
               <Button type="primary" htmlType="submit">
                 {titlePrefix} Task Type

app/assets/javascripts/dashboard/dataset/dataset_import_view.js

@@ -24,6 +24,7 @@ import {
   updateDatasetTeams,
 } from "admin/admin_rest_api";
 import { handleGenericError } from "libs/error_handling";
+import { jsonStringify } from "libs/utils";
 import Toast from "libs/toast";
 import messages from "messages";
 
@@ -35,8 +36,6 @@ import SimpleAdvancedDataForm from "./simple_advanced_data_form";
 const { TabPane } = Tabs;
 const FormItem = Form.Item;
 
-const toJSON = json => JSON.stringify(json, null, "  ");
-
 type Props = {
   form: Object,
   datasetId: APIDatasetId,
@@ -97,7 +96,7 @@ class DatasetImportView extends React.PureComponent<Props, State> {
         throw new Error("No datasource received from server.");
       }
       this.props.form.setFieldsValue({
-        dataSourceJson: toJSON(dataSource),
+        dataSourceJson: jsonStringify(dataSource),
         dataset: {
           displayName: dataset.displayName || undefined,
           isPublic: dataset.isPublic || false,
@@ -325,7 +324,7 @@ class DatasetImportView extends React.PureComponent<Props, State> {
       // _.merge does a deep merge which mutates newDataSource
       _.merge(newDataSource, form.getFieldValue("dataSource"));
       form.setFieldsValue({
-        dataSourceJson: toJSON(newDataSource),
+        dataSourceJson: jsonStringify(newDataSource),
       });
     } else {
       // Copy from advanced to simple: update form values

app/assets/javascripts/dashboard/dataset/validation.js

@@ -3,9 +3,11 @@
 import jsonschema from "jsonschema";
 
 import DatasourceSchema from "libs/datasource.schema.json";
+import UserSettingsSchema from "libs/user_settings.schema.json";
 
 const validator = new jsonschema.Validator();
 validator.addSchema(DatasourceSchema, "/");
+validator.addSchema(UserSettingsSchema, "/");
 
 const validateWithSchema = (type: string) => (rule: Object, value: string, callback: Function) => {
   try {
@@ -29,6 +31,7 @@ const validateWithSchema = (type: string) => (rule: Object, value: string, callb
 
 export const validateDatasourceJSON = validateWithSchema("types::DatasourceConfiguration");
 export const validateLayerConfigurationJSON = validateWithSchema("types::LayerUserConfiguration");
+export const validateUserSettingsJSON = validateWithSchema("types::UserSettings");
 
 export const isValidJSON = (json: string) => {
   try {

app/assets/javascripts/libs/render_independently.js

@@ -6,18 +6,25 @@ import { document } from "libs/window";
 
 type DestroyFunction = () => void;
 
-export default function renderIndependently(getComponent: DestroyFunction => React$Element<*>) {
-  const div = document.createElement("div");
-  if (!document.body) {
-    return;
-  }
-  document.body.appendChild(div);
-  function destroy() {
-    const unmountResult = ReactDOM.unmountComponentAtNode(div);
-    if (unmountResult && div.parentNode) {
-      div.parentNode.removeChild(div);
+// The returned promise gets resolved once the element is destroyed.
+export default function renderIndependently(
+  getComponent: DestroyFunction => React$Element<*>,
+): Promise<void> {
+  return new Promise(resolve => {
+    const div = document.createElement("div");
+    if (!document.body) {
+      resolve();
+      return;
+    }
+    document.body.appendChild(div);
+    function destroy() {
+      const unmountResult = ReactDOM.unmountComponentAtNode(div);
+      if (unmountResult && div.parentNode) {
+        div.parentNode.removeChild(div);
+      }
+      resolve();
     }
-  }
 
-  ReactDOM.render(getComponent(destroy), div);
+    ReactDOM.render(getComponent(destroy), div);
+  });
 }

app/assets/javascripts/libs/user_settings.schema.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "http://json-schema.org/draft-06/schema#",
+  "definitions": {
+    "types::UserSettings": {
+      "type": ["object", "null"],
+      "properties": {
+        "clippingDistance": { "type": "number", "minimum": 1, "maximum": 12000 },
+        "clippingDistanceArbitrary": { "type": "number", "minimum": 1, "maximum": 127 },
+        "crosshairSize": { "type": "number", "minimum": 0.05, "maximum": 0.5 },
+        "displayCrosshair": { "type": "boolean" },
+        "displayScalebars": { "type": "boolean" },
+        "dynamicSpaceDirection": { "type": "boolean" },
+        "keyboardDelay": { "type": "number", "minimum": 0, "maximum": 500 },
+        "mouseRotateValue": { "type": "number", "minimum": 0.0001, "maximum": 0.02 },
+        "moveValue": { "type": "number", "minimum": 30, "maximum": 14000 },
+        "moveValue3d": { "type": "number", "minimum": 30, "maximum": 1500 },
+        "newNodeNewTree": { "type": "boolean" },
+        "highlightCommentedNodes": { "type": "boolean" },
+        "overrideNodeRadius": { "type": "boolean" },
+        "particleSize": { "type": "number", "minimum": 1, "maximum": 20 },
+        "radius": { "type": "number", "minimum": 1, "maximum": 5000 },
+        "rotateValue": { "type": "number", "minimum": 0.001, "maximum": 0.08 },
+        "sortCommentsAsc": { "type": "boolean" },
+        "sortTreesByName": { "type": "boolean" },
+        "sphericalCapRadius": { "type": "number", "minimum": 50, "maximum": 500 },
+        "tdViewDisplayPlanes": { "type": "boolean" },
+        "hideTreeRemovalWarning": { "type": "boolean" },
+        "fourBit": { "type": "boolean" },
+        "interpolation": { "type": "boolean" },
+        "quality": { "type": "number", "enum": [0, 1, 2] },
+        "segmentationOpacity": { "type": "number", "minimum": 0, "maximum": 100 },
+        "highlightHoveredCellId": { "type": "boolean" },
+        "zoom": { "type": "number", "minimum": 0.001 },
+        "renderMissingDataBlack": { "type": "boolean" }
+      },
+      "additionalProperties": false
+    }
+  }
+}