Sorting mappings in UI

CHANGELOG.md

@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - webKnossos now comes with a list of sample datasets that can be automatically downloaded and imported from the menu. [#3725](https://github.com/scalableminds/webknossos/pull/3725)
 - Added a shortcut (Q) and button in the actions dropdown to screenshot the tracing views. The screenshots will contain everything that is visible in the tracing views, so feel free to disable the crosshairs in the settings or toggle the tree visibility using the (1) and (2) shortcuts before triggering the screenshot. [#3834](https://github.com/scalableminds/webknossos/pull/3834)
 - The dataset settings within the tracing view allow to select between different loading strategies now ("best quality first" and "progressive quality"). Additionally, the rendering can use different magnifications as a fallback (instead of only one magnification). [#3801](https://github.com/scalableminds/webknossos/pull/3801)
+- The mapping selection dropbown is now sorted alphabetically. [#3864](https://github.com/scalableminds/webknossos/pull/3864)
 
 ### Changed
 - Tweaked the highlighting of the active node. The inner node looks exactly as a non-active node and is not round, anymore. An active node is circled by a "halo". In arbitrary mode, the halo is hidden and the active node is round. [#3868](https://github.com/scalableminds/webknossos/pull/3868)

frontend/javascripts/oxalis/view/right-menu/mapping_info_view.js

@@ -23,6 +23,7 @@ import { setMappingEnabledAction } from "oxalis/model/actions/settings_actions";
 import Cube from "oxalis/model/bucket_data_handling/data_cube";
 import Model from "oxalis/model";
 import message from "messages";
+import * as Utils from "libs/utils";
 
 const { Option } = Select;
 
@@ -234,7 +235,6 @@ class MappingInfoView extends React.Component<Props, State> {
     if (!hasSegmentation()) {
       return "No segmentation available";
     }
-
     const availableMappings =
       this.props.segmentationLayer != null && this.props.segmentationLayer.mappings != null
         ? this.props.segmentationLayer.mappings
@@ -279,11 +279,14 @@ class MappingInfoView extends React.Component<Props, State> {
               onChange={this.handleChangeMapping}
               notFoundContent="No mappings found."
             >
-              {availableMappings.map(mapping => (
-                <Option key={mapping} value={mapping}>
-                  {mapping}
-                </Option>
-              ))}
+              {availableMappings
+                .slice()
+                .sort(Utils.localeCompareBy(([]: Array<string>), mapping => mapping))
+                .map(mapping => (
+                  <Option key={mapping} value={mapping}>
+                    {mapping}
+                  </Option>
+                ))}
             </Select>
           ) : null}
         </div>