From ec65edebc5da451c98a29c2cc61047a3534924df Mon Sep 17 00:00:00 2001
From: Charlie <charliemeister@proton.me>
Date: Mon, 15 May 2023 15:04:03 +0200
Subject: [PATCH 1/7] add button and store var in userconfig

---
 frontend/javascripts/oxalis/default_state.ts  |  1 +
 frontend/javascripts/oxalis/store.ts          |  1 +
 .../oxalis/view/action-bar/toolbar_view.tsx   | 43 ++++++++++++++-----
 .../types/schemas/user_settings.schema.ts     |  3 ++
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/frontend/javascripts/oxalis/default_state.ts b/frontend/javascripts/oxalis/default_state.ts
index 75749e0591..6216910c98 100644
--- a/frontend/javascripts/oxalis/default_state.ts
+++ b/frontend/javascripts/oxalis/default_state.ts
@@ -50,6 +50,7 @@ const defaultState: OxalisState = {
   datasetConfiguration: defaultDatasetViewConfigurationWithoutNull,
   userConfiguration: {
     autoSaveLayouts: true,
+    autoRenderMeshInProofreading: false,
     brushSize: 50,
     clippingDistance: 50,
     clippingDistanceArbitrary: 64,
diff --git a/frontend/javascripts/oxalis/store.ts b/frontend/javascripts/oxalis/store.ts
index 75aa63fd29..857d8ac880 100644
--- a/frontend/javascripts/oxalis/store.ts
+++ b/frontend/javascripts/oxalis/store.ts
@@ -311,6 +311,7 @@ export type QuickSelectConfig = {
 
 export type UserConfiguration = {
   readonly autoSaveLayouts: boolean;
+  readonly autoRenderMeshInProofreading: boolean;
   readonly brushSize: number;
   readonly clippingDistance: number;
   readonly clippingDistanceArbitrary: number;
diff --git a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
index 9eb8a98855..88e92b1f60 100644
--- a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
@@ -1,4 +1,14 @@
-import { Radio, Tooltip, Badge, Space, Popover, RadioChangeEvent, Dropdown, MenuProps } from "antd";
+import {
+  Radio,
+  Tooltip,
+  Badge,
+  Space,
+  Popover,
+  RadioChangeEvent,
+  Dropdown,
+  MenuProps,
+  Switch,
+} from "antd";
 import { ClearOutlined, DownOutlined, ExportOutlined, SettingOutlined } from "@ant-design/icons";
 import { useSelector, useDispatch } from "react-redux";
 import React, { useEffect, useCallback, useState } from "react";
@@ -115,6 +125,10 @@ const handleUpdateBrushSize = (value: number) => {
   Store.dispatch(updateUserSettingAction("brushSize", value));
 };
 
+const handleToggleAutomaticReload = (value: boolean) => {
+  Store.dispatch(updateUserSettingAction("autoRenderMeshInProofreading", value));
+};
+
 const handleSetTool = (event: RadioChangeEvent) => {
   const value = event.target.value as AnnotationTool;
   Store.dispatch(setToolAction(value));
@@ -911,7 +925,9 @@ function ToolSpecificSettings({
       adaptedActiveTool === AnnotationToolEnum.ERASE_BRUSH);
   const dispatch = useDispatch();
   const handleClearProofreading = () => dispatch(clearProofreadingByProducts());
-
+  const reloadMeshes = useSelector(
+    (state: OxalisState) => state.userConfiguration.autoRenderMeshInProofreading,
+  );
   return (
     <>
       {showCreateTreeButton ? (
@@ -967,14 +983,21 @@ function ToolSpecificSettings({
       {adaptedActiveTool === AnnotationToolEnum.FILL_CELL ? <FillModeSwitch /> : null}
 
       {adaptedActiveTool === AnnotationToolEnum.PROOFREAD ? (
-        <ButtonComponent
-          title="Clear auxiliary skeletons and meshes that were loaded while proofreading segments. Use this if you are done with correcting mergers or splits in a segment pair."
-          onClick={handleClearProofreading}
-          className="narrow"
-          style={{ marginLeft: 12 }}
-        >
-          <ClearOutlined />
-        </ButtonComponent>
+        <>
+          <ButtonComponent
+            title="Clear auxiliary skeletons and meshes that were loaded while proofreading segments. Use this if you are done with correcting mergers or splits in a segment pair."
+            onClick={handleClearProofreading}
+            className="narrow"
+            style={{ marginInline: 12 }}
+          >
+            <ClearOutlined />
+          </ButtonComponent>
+          <Switch
+            title="Enable/Disable automatic reloading of meshes"
+            checked={reloadMeshes}
+            onChange={() => handleToggleAutomaticReload(!reloadMeshes)}
+          />
+        </>
       ) : null}
     </>
   );
diff --git a/frontend/javascripts/types/schemas/user_settings.schema.ts b/frontend/javascripts/types/schemas/user_settings.schema.ts
index 8e9e53b5ba..5258e7ef28 100644
--- a/frontend/javascripts/types/schemas/user_settings.schema.ts
+++ b/frontend/javascripts/types/schemas/user_settings.schema.ts
@@ -122,6 +122,9 @@ export const userSettings = {
   autoSaveLayouts: {
     type: "boolean",
   },
+  autoRenderMeshInProofreading: {
+    type: "boolean",
+  },
   gpuMemoryFactor: {
     type: "number",
   },

From 0241fa0636cd8453f225748ba529564181fdf7d5 Mon Sep 17 00:00:00 2001
From: Charlie <charliemeister@proton.me>
Date: Mon, 15 May 2023 15:30:48 +0200
Subject: [PATCH 2/7] return if should not reload

---
 frontend/javascripts/oxalis/model/sagas/proofread_saga.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/javascripts/oxalis/model/sagas/proofread_saga.ts b/frontend/javascripts/oxalis/model/sagas/proofread_saga.ts
index 6ede2efa3f..6a69db6517 100644
--- a/frontend/javascripts/oxalis/model/sagas/proofread_saga.ts
+++ b/frontend/javascripts/oxalis/model/sagas/proofread_saga.ts
@@ -89,6 +89,8 @@ function proofreadUsingMeshes(): boolean {
 let coarselyLoadedSegmentIds: number[] = [];
 
 function* loadCoarseMesh(layerName: string, segmentId: number, position: Vector3): Saga<void> {
+  if ((yield* select((state) => state.userConfiguration.autoRenderMeshInProofreading)) === false)
+    return;
   const currentMeshFile = yield* select(
     (state) => state.localSegmentationData[layerName].currentMeshFile,
   );

From e48337c6cdc6eb2d33a90894b9c9bc3e4a99064f Mon Sep 17 00:00:00 2001
From: Charlie <charliemeister@proton.me>
Date: Mon, 15 May 2023 15:54:31 +0200
Subject: [PATCH 3/7] adjust var names

---
 .../oxalis/view/action-bar/toolbar_view.tsx            | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
index 88e92b1f60..decbbf455b 100644
--- a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
@@ -125,7 +125,7 @@ const handleUpdateBrushSize = (value: number) => {
   Store.dispatch(updateUserSettingAction("brushSize", value));
 };
 
-const handleToggleAutomaticReload = (value: boolean) => {
+const handleToggleAutomaticMeshRendering = (value: boolean) => {
   Store.dispatch(updateUserSettingAction("autoRenderMeshInProofreading", value));
 };
 
@@ -925,7 +925,7 @@ function ToolSpecificSettings({
       adaptedActiveTool === AnnotationToolEnum.ERASE_BRUSH);
   const dispatch = useDispatch();
   const handleClearProofreading = () => dispatch(clearProofreadingByProducts());
-  const reloadMeshes = useSelector(
+  const autoRenderMeshes = useSelector(
     (state: OxalisState) => state.userConfiguration.autoRenderMeshInProofreading,
   );
   return (
@@ -993,9 +993,9 @@ function ToolSpecificSettings({
             <ClearOutlined />
           </ButtonComponent>
           <Switch
-            title="Enable/Disable automatic reloading of meshes"
-            checked={reloadMeshes}
-            onChange={() => handleToggleAutomaticReload(!reloadMeshes)}
+            title={`${autoRenderMeshes ? "Disable" : "Enable"} automatic loading of meshes`}
+            checked={autoRenderMeshes}
+            onChange={() => handleToggleAutomaticMeshRendering(!autoRenderMeshes)}
           />
         </>
       ) : null}

From a4fc670ec7009e234f2a8c18ec38e21c67f826d4 Mon Sep 17 00:00:00 2001
From: Charlie <charliemeister@proton.me>
Date: Mon, 15 May 2023 16:05:19 +0200
Subject: [PATCH 4/7] add changelog

---
 CHANGELOG.unreleased.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index cf861cf41c..68821d99cb 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -17,6 +17,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Teams can be edited more straight-forwardly in a popup in the team edit page. [#7043](https://github.com/scalableminds/webknossos/pull/7043)
 - Annotations with Editable Mappings (a.k.a Supervoxel Proofreading) can now be merged. [#7026](https://github.com/scalableminds/webknossos/pull/7026)
 - The file size and inodes of artifacts are now aggregated and shown in the Voxelytics workflow list. [#7071](https://github.com/scalableminds/webknossos/pull/7071)
+- It is possible to disable the automatic loading of meshes during proofreading. [##7076](https://github.com/scalableminds/webknossos/pull/7076)
 
 ### Changed
 - Loading of precomputed meshes got significantly faster (especially when using a mesh file for an oversegmentation with an applied agglomerate mapping). [#7001](https://github.com/scalableminds/webknossos/pull/7001)

From 92e9ff3e29bc3aab44f9fd6e12ba7826885ece00 Mon Sep 17 00:00:00 2001
From: Charlie <charliemeister@proton.me>
Date: Mon, 15 May 2023 16:30:08 +0200
Subject: [PATCH 5/7] refactor toolbar_view

---
 .../oxalis/view/action-bar/toolbar_view.tsx   | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
index decbbf455b..d6ff6d18ad 100644
--- a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
@@ -923,11 +923,6 @@ function ToolSpecificSettings({
     showCreateCellButton &&
     (adaptedActiveTool === AnnotationToolEnum.BRUSH ||
       adaptedActiveTool === AnnotationToolEnum.ERASE_BRUSH);
-  const dispatch = useDispatch();
-  const handleClearProofreading = () => dispatch(clearProofreadingByProducts());
-  const autoRenderMeshes = useSelector(
-    (state: OxalisState) => state.userConfiguration.autoRenderMeshInProofreading,
-  );
   return (
     <>
       {showCreateTreeButton ? (
@@ -982,23 +977,7 @@ function ToolSpecificSettings({
 
       {adaptedActiveTool === AnnotationToolEnum.FILL_CELL ? <FillModeSwitch /> : null}
 
-      {adaptedActiveTool === AnnotationToolEnum.PROOFREAD ? (
-        <>
-          <ButtonComponent
-            title="Clear auxiliary skeletons and meshes that were loaded while proofreading segments. Use this if you are done with correcting mergers or splits in a segment pair."
-            onClick={handleClearProofreading}
-            className="narrow"
-            style={{ marginInline: 12 }}
-          >
-            <ClearOutlined />
-          </ButtonComponent>
-          <Switch
-            title={`${autoRenderMeshes ? "Disable" : "Enable"} automatic loading of meshes`}
-            checked={autoRenderMeshes}
-            onChange={() => handleToggleAutomaticMeshRendering(!autoRenderMeshes)}
-          />
-        </>
-      ) : null}
+      {adaptedActiveTool === AnnotationToolEnum.PROOFREAD ? <ProofReadingComponents /> : null}
     </>
   );
 }
@@ -1062,3 +1041,28 @@ function FillModeSwitch() {
     </Radio.Group>
   );
 }
+
+function ProofReadingComponents() {
+  const dispatch = useDispatch();
+  const handleClearProofreading = () => dispatch(clearProofreadingByProducts());
+  const autoRenderMeshes = useSelector(
+    (state: OxalisState) => state.userConfiguration.autoRenderMeshInProofreading,
+  );
+  return (
+    <>
+      <ButtonComponent
+        title="Clear auxiliary skeletons and meshes that were loaded while proofreading segments. Use this if you are done with correcting mergers or splits in a segment pair."
+        onClick={handleClearProofreading}
+        className="narrow"
+        style={{ marginInline: 12 }}
+      >
+        <ClearOutlined />
+      </ButtonComponent>
+      <Switch
+        title={`${autoRenderMeshes ? "Disable" : "Enable"} automatic loading of meshes`}
+        checked={autoRenderMeshes}
+        onChange={() => handleToggleAutomaticMeshRendering(!autoRenderMeshes)}
+      />
+    </>
+  );
+}

From 0c927d399d420c625edce99a175bce55695a9e1b Mon Sep 17 00:00:00 2001
From: Charlie <charliemeister@proton.me>
Date: Tue, 16 May 2023 11:24:32 +0200
Subject: [PATCH 6/7] make switch button

---
 frontend/javascripts/oxalis/default_state.ts  |  2 +-
 .../oxalis/view/action-bar/toolbar_view.tsx   | 75 ++++++++++---------
 2 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/frontend/javascripts/oxalis/default_state.ts b/frontend/javascripts/oxalis/default_state.ts
index 6216910c98..f8a4a45ebf 100644
--- a/frontend/javascripts/oxalis/default_state.ts
+++ b/frontend/javascripts/oxalis/default_state.ts
@@ -50,7 +50,7 @@ const defaultState: OxalisState = {
   datasetConfiguration: defaultDatasetViewConfigurationWithoutNull,
   userConfiguration: {
     autoSaveLayouts: true,
-    autoRenderMeshInProofreading: false,
+    autoRenderMeshInProofreading: true,
     brushSize: 50,
     clippingDistance: 50,
     clippingDistanceArbitrary: 64,
diff --git a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
index d6ff6d18ad..9342818ea1 100644
--- a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
@@ -1,14 +1,4 @@
-import {
-  Radio,
-  Tooltip,
-  Badge,
-  Space,
-  Popover,
-  RadioChangeEvent,
-  Dropdown,
-  MenuProps,
-  Switch,
-} from "antd";
+import { Radio, Tooltip, Badge, Space, Popover, RadioChangeEvent, Dropdown, MenuProps } from "antd";
 import { ClearOutlined, DownOutlined, ExportOutlined, SettingOutlined } from "@ant-design/icons";
 import { useSelector, useDispatch } from "react-redux";
 import React, { useEffect, useCallback, useState } from "react";
@@ -69,10 +59,16 @@ import { hasAgglomerateMapping } from "oxalis/controller/combinations/segmentati
 import { QuickSelectControls } from "./quick_select_settings";
 import { MenuInfo } from "rc-menu/lib/interface";
 
-const narrowButtonStyle = {
+const NARROW_BUTTON_STYLE = {
   paddingLeft: 10,
   paddingRight: 8,
 };
+// The z-index is needed so that the blue border of an active button does override the border color of the neighboring non active button.
+const ACTIVE_BUTTON_STYLE = {
+  ...NARROW_BUTTON_STYLE,
+  borderColor: "var(--ant-primary)",
+  zIndex: 1,
+};
 const imgStyleForSpaceyIcons = {
   width: 19,
   height: 19,
@@ -248,14 +244,14 @@ function OverwriteModeSwitch({
     >
       <RadioButtonWithTooltip
         title="Overwrite everything. This setting can be toggled by holding CTRL."
-        style={narrowButtonStyle}
+        style={NARROW_BUTTON_STYLE}
         value={OverwriteModeEnum.OVERWRITE_ALL}
       >
         <img src="/assets/images/overwrite-all.svg" alt="Overwrite All Icon" />
       </RadioButtonWithTooltip>
       <RadioButtonWithTooltip
         title="Only overwrite empty areas. In case of erasing, only the current segment ID is overwritten. This setting can be toggled by holding CTRL."
-        style={narrowButtonStyle}
+        style={NARROW_BUTTON_STYLE}
         value={OverwriteModeEnum.OVERWRITE_EMPTY}
       >
         <img src="/assets/images/overwrite-empty.svg" alt="Overwrite Empty Icon" />
@@ -357,11 +353,15 @@ function AdditionalSkeletonModesButtons() {
   const toggleMergerMode = () => dispatch(setMergerModeEnabledAction(!isMergerModeEnabled));
 
   // The z-index is needed so that the blue border of an active button does override the border color of the neighboring non active button.
-  const activeButtonStyle = { ...narrowButtonStyle, borderColor: "var(--ant-primary)", zIndex: 1 };
+  const activeButtonStyle = {
+    ...NARROW_BUTTON_STYLE,
+    borderColor: "var(--ant-primary)",
+    zIndex: 1,
+  };
   const newNodeNewTreeModeButtonStyle = isNewNodeNewTreeModeOn
     ? activeButtonStyle
-    : narrowButtonStyle;
-  const mergerModeButtonStyle = isMergerModeEnabled ? activeButtonStyle : narrowButtonStyle;
+    : NARROW_BUTTON_STYLE;
+  const mergerModeButtonStyle = isMergerModeEnabled ? activeButtonStyle : NARROW_BUTTON_STYLE;
   return (
     <React.Fragment>
       <ButtonComponent
@@ -392,7 +392,7 @@ function AdditionalSkeletonModesButtons() {
       </ButtonComponent>
       {features().jobsEnabled && isMergerModeEnabled && (
         <ButtonComponent
-          style={narrowButtonStyle}
+          style={NARROW_BUTTON_STYLE}
           onClick={() => setShowMaterializeVolumeAnnotationModal(true)}
           title="Materialize this merger mode annotation into a new dataset."
         >
@@ -510,7 +510,7 @@ function CreateTreeButton() {
     >
       <ButtonComponent
         onClick={handleCreateTree}
-        style={{ ...narrowButtonStyle, paddingRight: 5 }}
+        style={{ ...NARROW_BUTTON_STYLE, paddingRight: 5 }}
         title={`Create a new Tree (C) – ${activeTreeHint}`}
       >
         <i
@@ -681,7 +681,7 @@ export default function ToolbarView() {
           title={moveToolDescription}
           disabledTitle=""
           disabled={false}
-          style={narrowButtonStyle}
+          style={NARROW_BUTTON_STYLE}
           value={AnnotationToolEnum.MOVE}
         >
           <i
@@ -697,7 +697,7 @@ export default function ToolbarView() {
             title={skeletonToolDescription}
             disabledTitle=""
             disabled={disabledInfosForTools[AnnotationToolEnum.SKELETON].isDisabled}
-            style={narrowButtonStyle}
+            style={NARROW_BUTTON_STYLE}
             value={AnnotationToolEnum.SKELETON}
           >
             {/*
@@ -726,7 +726,7 @@ export default function ToolbarView() {
               title="Brush – Draw over the voxels you would like to label. Adjust the brush size with Shift + Mousewheel."
               disabledTitle={disabledInfosForTools[AnnotationToolEnum.BRUSH].explanation}
               disabled={disabledInfosForTools[AnnotationToolEnum.BRUSH].isDisabled}
-              style={narrowButtonStyle}
+              style={NARROW_BUTTON_STYLE}
               value={AnnotationToolEnum.BRUSH}
             >
               <i
@@ -743,7 +743,7 @@ export default function ToolbarView() {
               disabledTitle={disabledInfosForTools[AnnotationToolEnum.ERASE_BRUSH].explanation}
               disabled={disabledInfosForTools[AnnotationToolEnum.ERASE_BRUSH].isDisabled}
               style={{
-                ...narrowButtonStyle,
+                ...NARROW_BUTTON_STYLE,
                 marginLeft: showEraseBrushTool ? 0 : -38,
                 zIndex: showEraseBrushTool ? "initial" : -10,
                 transition: "margin 0.3s",
@@ -767,7 +767,7 @@ export default function ToolbarView() {
               title="Trace – Draw outlines around the voxels you would like to label."
               disabledTitle={disabledInfosForTools[AnnotationToolEnum.TRACE].explanation}
               disabled={disabledInfosForTools[AnnotationToolEnum.TRACE].isDisabled}
-              style={narrowButtonStyle}
+              style={NARROW_BUTTON_STYLE}
               value={AnnotationToolEnum.TRACE}
             >
               <img
@@ -785,7 +785,7 @@ export default function ToolbarView() {
               disabledTitle={disabledInfosForTools[AnnotationToolEnum.ERASE_TRACE].explanation}
               disabled={disabledInfosForTools[AnnotationToolEnum.ERASE_TRACE].isDisabled}
               style={{
-                ...narrowButtonStyle,
+                ...NARROW_BUTTON_STYLE,
                 marginLeft: showEraseTraceTool ? 0 : -38,
                 zIndex: showEraseTraceTool ? "initial" : -10,
                 transition: "margin 0.3s",
@@ -809,7 +809,7 @@ export default function ToolbarView() {
               title="Fill Tool – Flood-fill the clicked region."
               disabledTitle={disabledInfosForTools[AnnotationToolEnum.FILL_CELL].explanation}
               disabled={disabledInfosForTools[AnnotationToolEnum.FILL_CELL].isDisabled}
-              style={narrowButtonStyle}
+              style={NARROW_BUTTON_STYLE}
               value={AnnotationToolEnum.FILL_CELL}
             >
               <i
@@ -827,7 +827,7 @@ export default function ToolbarView() {
               title="Segment Picker – Click on a voxel to make its segment id the active segment id."
               disabledTitle={disabledInfosForTools[AnnotationToolEnum.PICK_CELL].explanation}
               disabled={disabledInfosForTools[AnnotationToolEnum.PICK_CELL].isDisabled}
-              style={narrowButtonStyle}
+              style={NARROW_BUTTON_STYLE}
               value={AnnotationToolEnum.PICK_CELL}
             >
               <i
@@ -843,7 +843,7 @@ export default function ToolbarView() {
           title="Quick Select Tool - Draw a rectangle around a segment to automatically detect it"
           disabledTitle={disabledInfosForTools[AnnotationToolEnum.QUICK_SELECT].explanation}
           disabled={disabledInfosForTools[AnnotationToolEnum.QUICK_SELECT].isDisabled}
-          style={narrowButtonStyle}
+          style={NARROW_BUTTON_STYLE}
           value={AnnotationToolEnum.QUICK_SELECT}
         >
           <img
@@ -861,7 +861,7 @@ export default function ToolbarView() {
           title="Bounding Box Tool - Create, resize and modify bounding boxes."
           disabledTitle={disabledInfosForTools[AnnotationToolEnum.BOUNDING_BOX].explanation}
           disabled={disabledInfosForTools[AnnotationToolEnum.BOUNDING_BOX].isDisabled}
-          style={narrowButtonStyle}
+          style={NARROW_BUTTON_STYLE}
           value={AnnotationToolEnum.BOUNDING_BOX}
         >
           <img
@@ -879,7 +879,7 @@ export default function ToolbarView() {
             title="Proofreading Tool - Modify an agglomerated segmentation. Other segmentation modifications, like brushing, are not allowed if this tool is used."
             disabledTitle={disabledInfosForTools[AnnotationToolEnum.PROOFREAD].explanation}
             disabled={disabledInfosForTools[AnnotationToolEnum.PROOFREAD].isDisabled}
-            style={narrowButtonStyle}
+            style={NARROW_BUTTON_STYLE}
             value={AnnotationToolEnum.PROOFREAD}
           >
             <i
@@ -1026,14 +1026,14 @@ function FillModeSwitch() {
     >
       <RadioButtonWithTooltip
         title="Only perform the Fill operation in the current plane."
-        style={narrowButtonStyle}
+        style={NARROW_BUTTON_STYLE}
         value={FillModeEnum._2D}
       >
         2D
       </RadioButtonWithTooltip>
       <RadioButtonWithTooltip
         title="Perform the Fill operation in 3D."
-        style={narrowButtonStyle}
+        style={NARROW_BUTTON_STYLE}
         value={FillModeEnum._3D}
       >
         3D
@@ -1048,6 +1048,7 @@ function ProofReadingComponents() {
   const autoRenderMeshes = useSelector(
     (state: OxalisState) => state.userConfiguration.autoRenderMeshInProofreading,
   );
+  const buttonStyle = autoRenderMeshes ? ACTIVE_BUTTON_STYLE : NARROW_BUTTON_STYLE;
   return (
     <>
       <ButtonComponent
@@ -1058,11 +1059,13 @@ function ProofReadingComponents() {
       >
         <ClearOutlined />
       </ButtonComponent>
-      <Switch
+      <ButtonComponent
         title={`${autoRenderMeshes ? "Disable" : "Enable"} automatic loading of meshes`}
-        checked={autoRenderMeshes}
-        onChange={() => handleToggleAutomaticMeshRendering(!autoRenderMeshes)}
-      />
+        style={{ ...buttonStyle }}
+        onClick={() => handleToggleAutomaticMeshRendering(!autoRenderMeshes)}
+      >
+        <i className="fas fa-dice-d20" />
+      </ButtonComponent>
     </>
   );
 }

From 5b89c727ac957d487550cf53263c2d7df816aeaa Mon Sep 17 00:00:00 2001
From: Charlie <charliemeister@proton.me>
Date: Tue, 16 May 2023 12:16:36 +0200
Subject: [PATCH 7/7] address review

---
 frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
index 9342818ea1..8b2b0427f6 100644
--- a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
@@ -1060,8 +1060,9 @@ function ProofReadingComponents() {
         <ClearOutlined />
       </ButtonComponent>
       <ButtonComponent
+        className="without-icon-margin"
         title={`${autoRenderMeshes ? "Disable" : "Enable"} automatic loading of meshes`}
-        style={{ ...buttonStyle }}
+        style={{ ...buttonStyle, opacity: autoRenderMeshes ? 1 : 0.5 }}
         onClick={() => handleToggleAutomaticMeshRendering(!autoRenderMeshes)}
       >
         <i className="fas fa-dice-d20" />