Add possibility to edit min and max of intensity range (#4630)

* added possibility to edit min and max of intensity range * Merge branch 'master' of github.com:scalableminds/webknossos into add-min-max-editing * add changelog entry * Merge branch 'master' into add-min-max-editing * do not display scientific notation and fix input parsing * do not let active region get out off histogram range * Merge branch 'master' into add-min-max-editing * debounce update of min and max of possible intensity range * fix linting and do not show edit button for layers without a histogram * apply feedback * Merge branch 'master' into add-min-max-editing * Merge branch 'master' into add-min-max-editing * Merge branch 'master' into add-min-max-editing
scalableminds · Jul 8, 2020 · 8897c5e · 8897c5e
1 parent 3def8de
commit 8897c5e
Show file tree

Hide file tree

Showing 8 changed files with 223 additions and 29 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -12,6 +12,8 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Added
 
+- Added the possibility to adjust the minimum and maximum value of the histogram for a layer. This option can be opened in the top right corner of the histogram. [#4630](https://github.com/scalableminds/webknossos/pull/4630)  
+
 - Added a warning to the segmentation tab when viewing `uint64` bit segmentation data. [#4598](https://github.com/scalableminds/webknossos/pull/4598)
 - Added the possibility to have multiple user-defined bounding boxes in an annotation. Task bounding boxes are automatically converted to such user bounding boxes upon “copy to my account” / reupload as explorational annotation. [#4536](https://github.com/scalableminds/webknossos/pull/4536)
 - Added additional information to each task in CSV download. [#4647](https://github.com/scalableminds/webknossos/pull/4647)

diff --git a/frontend/javascripts/oxalis/model/reducers/settings_reducer.js b/frontend/javascripts/oxalis/model/reducers/settings_reducer.js
@@ -98,6 +98,7 @@ function SettingsReducer(state: OxalisState, action: Action): OxalisState {
               intensityRange,
               isDisabled: false,
               isInverted: false,
+              isInEditMode: false,
             },
             initialLayerSettings[layer.name],
           );

diff --git a/frontend/javascripts/oxalis/model/sagas/load_histogram_data_saga.js b/frontend/javascripts/oxalis/model/sagas/load_histogram_data_saga.js
@@ -54,6 +54,14 @@ export default function* loadHistogramData(): Saga<void> {
       newIntensityRange = [minimumInHistogramData, maximumInHistogramData];
     }
     yield* put(updateLayerSettingAction(layerName, "intensityRange", newIntensityRange));
+    // Here we also set the minium and maximum values for the intensity range that the user can enter.
+    // If values already exist, we skip this step.
+    if (layerConfigurations[layerName] == null || layerConfigurations[layerName].min == null) {
+      yield* put(updateLayerSettingAction(layerName, "min", minimumInHistogramData));
+    }
+    if (layerConfigurations[layerName] == null || layerConfigurations[layerName].max == null) {
+      yield* put(updateLayerSettingAction(layerName, "max", maximumInHistogramData));
+    }
   }
   yield* put(setHistogramDataAction(histograms));
 }
diff --git a/frontend/javascripts/oxalis/store.js b/frontend/javascripts/oxalis/store.js
@@ -251,8 +251,11 @@ export type DatasetLayerConfiguration = {|
   +contrast: number,
   +alpha: number,
   +intensityRange: Vector2,
+  +min?: number,
+  +max?: number,
   +isDisabled: boolean,
   +isInverted: boolean,
+  +isInEditMode: boolean,
 |};
 
 export type LoadingStrategy = "BEST_QUALITY_FIRST" | "PROGRESSIVE_QUALITY";

diff --git a/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js b/frontend/javascripts/oxalis/view/settings/dataset_settings_view.js
@@ -136,6 +136,27 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
     );
   };
 
+  getEditMinMaxButton = (layerName: string, isInEditMode: boolean) => {
+    const tooltipText = isInEditMode
+      ? "Stop editing the possible range of the histogram."
+      : "Manually set the possible range of the histogram.";
+    return (
+      <Tooltip title={tooltipText}>
+        <Icon
+          type="edit"
+          onClick={() => this.props.onChangeLayer(layerName, "isInEditMode", !isInEditMode)}
+          style={{
+            position: "absolute",
+            top: 4,
+            right: 30,
+            cursor: "pointer",
+            color: isInEditMode ? "rgb(24, 144, 255)" : null,
+          }}
+        />
+      </Tooltip>
+    );
+  };
+
   setVisibilityForAllLayers = (isVisible: boolean) => {
     const { layers } = this.props.datasetConfiguration;
     Object.keys(layers).forEach(otherLayerName =>
@@ -165,9 +186,8 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
   );
 
   getHistogram = (layerName: string, layer: DatasetLayerConfiguration) => {
-    const { intensityRange } = layer;
+    const { intensityRange, min, max, isInEditMode } = layer;
     const defaultIntensityRange = getDefaultIntensityRangeOfLayer(this.props.dataset, layerName);
-    const highestRangeValue = defaultIntensityRange[1];
     let histograms = [];
     if (this.props.histogramData && this.props.histogramData[layerName]) {
       histograms = this.props.histogramData[layerName];
@@ -176,8 +196,8 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
         {
           numberOfElements: 0,
           elementCounts: [],
-          min: 0,
-          max: highestRangeValue,
+          min: defaultIntensityRange[0],
+          max: defaultIntensityRange[1],
         },
       ];
     }
@@ -186,14 +206,19 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
         data={histograms}
         intensityRangeMin={intensityRange[0]}
         intensityRangeMax={intensityRange[1]}
+        min={min}
+        max={max}
+        isInEditMode={isInEditMode}
         layerName={layerName}
+        defaultMinMax={defaultIntensityRange}
       />
     );
   };
 
   getLayerSettingsHeader = (
     isDisabled: boolean,
     isColorLayer: boolean,
+    isInEditMode: boolean,
     layerName: string,
     elementClass: string,
   ) => {
@@ -216,6 +241,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
         setSingleLayerVisibility(true);
       }
     };
+    const hasHistogram = this.props.histogramData[layerName] != null;
 
     return (
       <Row style={{ marginBottom: isDisabled ? 0 : 16 }}>
@@ -225,6 +251,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
             {!isColorLayer && isVolumeTracing ? "Volume Layer" : layerName}
           </span>
           <Tag style={{ cursor: "default", marginLeft: 8 }}>{elementClass}</Tag>
+          {hasHistogram ? this.getEditMinMaxButton(layerName, isInEditMode) : null}
           {this.getFindDataButton(layerName, isDisabled, isColorLayer)}
           {this.getReloadDataButton(layerName)}
         </Col>
@@ -242,11 +269,17 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps> {
       return null;
     }
     const elementClass = getElementClass(this.props.dataset, layerName);
-    const { isDisabled } = layerConfiguration;
+    const { isDisabled, isInEditMode } = layerConfiguration;
 
     return (
       <div key={layerName}>
-        {this.getLayerSettingsHeader(isDisabled, isColorLayer, layerName, elementClass)}
+        {this.getLayerSettingsHeader(
+          isDisabled,
+          isColorLayer,
+          isInEditMode,
+          layerName,
+          elementClass,
+        )}
         {isDisabled ? null : (
           <React.Fragment>
             {isHistogramSupported(elementClass) && layerName != null && isColorLayer