Fix histogram scale

CHANGELOG.unreleased.md

@@ -22,6 +22,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - New volume/hybrid annotations are now automatically multi-resolution volume annotations. [#4755](https://github.com/scalableminds/webknossos/pull/4755)
 - Improved performance of volume annotations (brush and trace tool). [#4848](https://github.com/scalableminds/webknossos/pull/4848)
 - Re-enabled continuous brush strokes. This feature ensures that even fast brush strokes are continuous and don't have "holes". [#4924](https://github.com/scalableminds/webknossos/pull/4924)
+- The Historgram now has a correct linear scale. [#4926](https://github.com/scalableminds/webknossos/pull/4926)
 
 ### Fixed
 - Fixed the disappearing of dataset settings after switching between view mode and annotation mode. [#4845](https://github.com/scalableminds/webknossos/pull/4845)

frontend/javascripts/oxalis/view/settings/dataset_settings_view.js

@@ -111,7 +111,7 @@ function DownsampleVolumeModal({ visible, hideDownsampleVolumeModal, magsToDowns
         {magsToDownsample.map(mag => mag.join("-")).join(", ")}.
       </p>
 
-      <p>
+      <div>
         The cause for the missing resolutions can be one of the following:
         <ul>
           <li>
@@ -121,13 +121,13 @@ function DownsampleVolumeModal({ visible, hideDownsampleVolumeModal, magsToDowns
           <li>The annotation was created in a task that was restricted to certain resolutions.</li>
           <li>The dataset was mutated to have more resolutions.</li>
         </ul>
-      </p>
+      </div>
 
       <p style={{ fontWeight: "bold" }}>
         Note that this action might take a few minutes. Afterwards, the annotation is reloaded.
         Also, the version history of the volume data will be reset.
       </p>
-      <div style={{ display: "flex", "justify-content": "center", marginTop: 12 }}>
+      <div style={{ display: "flex", justifyContent: "center", marginTop: 12 }}>
         <AsyncButton onClick={handleTriggerDownsampling} type="primary">
           Downsample
         </AsyncButton>
@@ -585,7 +585,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
       return [];
     }
     const segmentationLayer = Model.getSegmentationLayer();
-    const fallbackLayerInfo = segmentationLayer.fallbackLayerInfo;
+    const { fallbackLayerInfo } = segmentationLayer;
     const volumeTargetResolutions =
       fallbackLayerInfo != null
         ? fallbackLayerInfo.resolutions

frontend/javascripts/oxalis/view/settings/histogram_view.js

@@ -133,15 +133,11 @@ class Histogram extends React.PureComponent<HistogramProps, HistogramState> {
     const histogramLength = histogramMax - histogramMin;
     const fullLength = maxRange - minRange;
     const xOffset = histogramMin - minRange;
-    this.drawYAxis(ctx);
     ctx.fillStyle = `rgba(${color.join(",")}, 0.1)`;
     ctx.strokeStyle = `rgba(${color.join(",")})`;
-    // Here we normalize all values to the interval of 0 - 9 and then add 1
-    // to gain an interval reaching from 1 - 10, since values between 0 and 1 would be negative, otherwise.
-    const downscalingFactor = 9 / maxValue;
-    const downscaledData = elementCounts.map(
-      value => Math.log10(downscalingFactor * value + 1) * canvasHeight,
-    );
+    ctx.beginPath();
+    // Scale data to the height of the histogram canvas.
+    const downscaledData = elementCounts.map(value => (value / maxValue) * canvasHeight);
     const activeRegion = new Path2D();
     ctx.moveTo(0, 0);
     activeRegion.moveTo(((intensityRangeMin - minRange) / fullLength) * canvasWidth, 0);
@@ -164,22 +160,6 @@ class Histogram extends React.PureComponent<HistogramProps, HistogramState> {
     ctx.fill(activeRegion);
   };
 
-  drawYAxis = (ctx: CanvasRenderingContext2D) => {
-    // Maximum value of the y axis is always 10. Therefore the axis is independent from any data.
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(0, canvasHeight);
-    const numberOfScaleLines = 5;
-    const lineWidth = 8;
-    const intervalSize = 2;
-    for (let interval = 1; interval <= numberOfScaleLines; interval++) {
-      // We use canvasHeight - 1 because else half of the top line would be cut off.
-      const lineHeight = Math.round(Math.log10(intervalSize * interval) * (canvasHeight - 1));
-      ctx.moveTo(0, lineHeight);
-      ctx.lineTo(lineWidth, lineHeight);
-    }
-  };
-
   onThresholdChange = ([firstVal, secVal]: [number, number]) => {
     const { layerName } = this.props;
     if (firstVal < secVal) {