Transparent datasource properties suggestions

frontend/javascripts/admin/api_flow_types.js

@@ -152,6 +152,7 @@ export type APISampleDataset = {
 
 export type APIDataSourceWithMessages = {
   +dataSource?: APIDataSource,
+  +previousDataSource?: APIDataSource,
   +messages: Array<APIMessage>,
 };
 

frontend/javascripts/dashboard/dataset/dataset_import_view.js

@@ -1,18 +1,14 @@
 // @flow
 
-import { Button, Spin, Icon, Alert, Form, Card, Tabs, Tooltip } from "antd";
+import { Button, Spin, Icon, Alert, Form, Card, Tabs, Tooltip, Modal, Input } from "antd";
 import * as React from "react";
 import _ from "lodash";
 import moment from "moment";
 
-import type {
-  APIDataset,
-  APIMessage,
-  APIDataSourceWithMessages,
-  APIDatasetId,
-} from "admin/api_flow_types";
+import type { APIDataSource, APIDataset, APIDatasetId, APIMessage } from "admin/api_flow_types";
 import type { DatasetConfiguration } from "oxalis/store";
 import { datasetCache } from "dashboard/dataset_view";
+import { diffObjects, jsonStringify } from "libs/utils";
 import {
   getDataset,
   updateDataset,
@@ -24,19 +20,20 @@ import {
   updateDatasetTeams,
 } from "admin/admin_rest_api";
 import { handleGenericError } from "libs/error_handling";
-import { jsonStringify } from "libs/utils";
+import { trackAction } from "oxalis/model/helpers/analytics";
 import Toast from "libs/toast";
 import messages from "messages";
-import { trackAction } from "oxalis/model/helpers/analytics";
 
-import { Hideable, confirmAsync, hasFormError } from "./helper_components";
+import { Hideable, confirmAsync, hasFormError, jsonEditStyle } from "./helper_components";
 import DefaultConfigComponent from "./default_config_component";
 import ImportGeneralComponent from "./import_general_component";
 import SimpleAdvancedDataForm from "./simple_advanced_data_form";
 
 const { TabPane } = Tabs;
 const FormItem = Form.Item;
 
+const notImportedYetStatus = "Not imported yet.";
+
 type Props = {
   form: Object,
   datasetId: APIDatasetId,
@@ -54,10 +51,12 @@ type State = {
   isLoading: boolean,
   activeDataSourceEditMode: "simple" | "advanced",
   activeTabKey: TabKey,
+  previousDataSource: ?APIDataSource,
+  differenceBetweenDatasources: ?Object,
 };
 
 export type FormData = {
-  dataSource: APIDataSourceWithMessages,
+  dataSource: APIDataSource,
   dataSourceJson: string,
   dataset: APIDataset,
   defaultConfiguration: DatasetConfiguration,
@@ -76,6 +75,8 @@ class DatasetImportView extends React.PureComponent<Props, State> {
     messages: [],
     activeDataSourceEditMode: "simple",
     activeTabKey: "data",
+    differenceBetweenDatasources: null,
+    previousDataSource: null,
   };
 
   componentDidMount() {
@@ -87,11 +88,22 @@ class DatasetImportView extends React.PureComponent<Props, State> {
       this.setState({ isLoading: true });
       const dataset = await getDataset(this.props.datasetId);
       let dataSource;
+      let previousDataSource;
       let dataSourceMessages = [];
       if (dataset.isForeign) {
         dataSource = await readDatasetDatasource(dataset);
       } else {
-        ({ dataSource, messages: dataSourceMessages } = await getDatasetDatasource(dataset));
+        ({
+          dataSource,
+          messages: dataSourceMessages,
+          previousDataSource,
+        } = await getDatasetDatasource(dataset));
+
+        this.setState({ previousDataSource });
+        if (previousDataSource != null && dataSource != null) {
+          const diff = diffObjects(dataSource, previousDataSource);
+          this.setState({ differenceBetweenDatasources: diff });
+        }
       }
       if (dataSource == null) {
         throw new Error("No datasource received from server.");
@@ -148,6 +160,69 @@ class DatasetImportView extends React.PureComponent<Props, State> {
     }
   }
 
+  getDatasourceDiffAlert() {
+    if (
+      this.state.previousDataSource == null ||
+      this.state.previousDataSource.status === notImportedYetStatus ||
+      _.size(this.state.differenceBetweenDatasources) === 0
+    ) {
+      return null;
+    }
+
+    function showJSONModal(title, object) {
+      Modal.info({
+        title,
+        width: 800,
+        content: (
+          <Input.TextArea rows={20} style={jsonEditStyle}>
+            {JSON.stringify(object, null, 2)}
+          </Input.TextArea>
+        ),
+      });
+    }
+
+    return (
+      <div>
+        <Alert
+          message={
+            <div>
+              A datasource-properties.json file was found for this dataset. However, additional
+              information about the dataset could be inferred. Please review the following
+              properties and click &ldquo;Save&rdquo; to accept the suggestions. The original
+              datasource-properties.json file can be seen{" "}
+              <a
+                href="#"
+                onClick={() =>
+                  showJSONModal(
+                    "Original datasource-properties.json",
+                    this.state.previousDataSource,
+                  )
+                }
+              >
+                here
+              </a>
+              . The JSON-encoded difference can be inspected{" "}
+              <a
+                href="#"
+                onClick={() =>
+                  showJSONModal(
+                    "Difference to new datasource-properties.json",
+                    this.state.differenceBetweenDatasources,
+                  )
+                }
+              >
+                here
+              </a>
+              .
+            </div>
+          }
+          type="info"
+          showIcon
+        />
+      </div>
+    );
+  }
+
   getFormValidationSummary = (): Object => {
     const err = this.props.form.getFieldsError();
     const { dataset } = this.state;
@@ -242,6 +317,7 @@ class DatasetImportView extends React.PureComponent<Props, State> {
         !this.state.dataset.dataStore.isConnector
       ) {
         await updateDatasetDatasource(this.props.datasetId.name, dataset.dataStore.url, dataSource);
+        this.setState({ previousDataSource: null, differenceBetweenDatasources: null });
       }
 
       const verb = this.props.isEditingMode ? "updated" : "imported";
@@ -260,8 +336,8 @@ class DatasetImportView extends React.PureComponent<Props, State> {
     const { status } = this.state.dataset.dataSource;
     if (status != null) {
       messageElements.push(
-        // "Not imported yet." is only used, when the dataSource.json is missing.
-        status === "Not imported yet." ? (
+        // This status is only used, when the dataSource.json is missing.
+        status === notImportedYetStatus ? (
           <Alert
             key="datasourceStatus"
             message={<span>{messages["dataset.missing_datasource_json"]}</span>}
@@ -405,6 +481,7 @@ class DatasetImportView extends React.PureComponent<Props, State> {
                         this.props.form.validateFields();
                         this.setState({ activeDataSourceEditMode: activeEditMode });
                       }}
+                      additionalAlert={this.getDatasourceDiffAlert()}
                     />
                   </Hideable>
                 </TabPane>

frontend/javascripts/dashboard/dataset/simple_advanced_data_form.js

@@ -20,11 +20,13 @@ export default function SimpleAdvancedDataForm({
   form,
   activeDataSourceEditMode,
   onChange,
+  additionalAlert,
 }: {
   isReadOnlyDataset: boolean,
   form: Object,
   activeDataSourceEditMode: "simple" | "advanced",
   onChange: ("simple" | "advanced") => void,
+  additionalAlert: ?React.Node,
 }) {
   const { getFieldDecorator } = form;
   const dataSource =
@@ -64,14 +66,9 @@ export default function SimpleAdvancedDataForm({
           type="warning"
           showIcon
         />
-      ) : (
-        <Alert
-          message="Please review the following properties. If you want to adjust the configuration described by
-            &ldquo;datasource-properties.json&rdquo;, please enable the &ldquo;Advanced&rdquo; mode in the top-right corner."
-          type="info"
-          showIcon
-        />
-      )}
+      ) : null}
+
+      {additionalAlert}
 
       <Hideable hidden={activeDataSourceEditMode !== "simple"}>
         <RetryingErrorBoundary>

frontend/javascripts/libs/utils.js

@@ -674,3 +674,25 @@ export function disableViewportMetatag() {
   }
   viewport.setAttribute("content", "");
 }
+
+/**
+ * Deep diff between two object, using lodash
+ * @param  {Object} object Object compared
+ * @param  {Object} base   Object to compare with
+ * @return {Object}        Return a new object who represent the diff
+ *
+ * Source: https://gist.github.com/Yimiprod/7ee176597fef230d1451#gistcomment-2699388
+ */
+export function diffObjects(object: Object, base: Object): Object {
+  function changes(_object, _base) {
+    let arrayIndexCounter = 0;
+    return _.transform(_object, (result, value, key) => {
+      if (!_.isEqual(value, _base[key])) {
+        const resultKey = _.isArray(_base) ? arrayIndexCounter++ : key;
+        result[resultKey] =
+          _.isObject(value) && _.isObject(_base[key]) ? changes(value, _base[key]) : value;
+      }
+    });
+  }
+  return changes(object, base);
+}

webknossos-datastore/app/com/scalableminds/webknossos/datastore/controllers/DataSourceController.scala

@@ -140,6 +140,7 @@ class DataSourceController @Inject()(
           Ok(
             Json.obj(
               "dataSource" -> dataSource,
+              "previousDataSource" -> previousDataSource,
               "messages" -> messages.map(m => Json.obj(m._1 -> m._2))
             ))
         }