Show measurement tool in read-only mode

CHANGELOG.unreleased.md

@@ -12,6 +12,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Added
 - Added the possibility to configure a rotation for a dataset, which can be toggled off and on when viewing and annotating data. [#8159](https://github.com/scalableminds/webknossos/pull/8159)
+- Measurement tools are now accessible when viewing datasets outside of an annotation. [#8334](https://github.com/scalableminds/webknossos/pull/8334)
 
 ### Changed
 

frontend/javascripts/oxalis/constants.ts

@@ -223,6 +223,8 @@ export const MeasurementTools: Array<keyof typeof AnnotationToolEnum> = [
   AnnotationToolEnum.AREA_MEASUREMENT,
 ];
 
+export const AvailableToolsInViewMode = [...MeasurementTools, AnnotationToolEnum.MOVE];
+
 export type AnnotationTool = keyof typeof AnnotationToolEnum;
 export enum ContourModeEnum {
   DRAW = "DRAW",

frontend/javascripts/oxalis/model/reducers/ui_reducer.ts

@@ -1,3 +1,4 @@
+import { AnnotationToolEnum, AvailableToolsInViewMode, ControlModeEnum } from "oxalis/constants";
 import type { Action } from "oxalis/model/actions/actions";
 import { updateKey, updateKey2 } from "oxalis/model/helpers/deep_update";
 import {
@@ -55,6 +56,9 @@ function UiReducer(state: OxalisState, action: Action): OxalisState {
 
     case "SET_TOOL": {
       if (!state.tracing.restrictions.allowUpdate) {
+        if (AvailableToolsInViewMode.includes(AnnotationToolEnum[action.tool])) {
+          return setToolReducer(state, action.tool);
+        }
         return state;
       }
 

frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx

@@ -26,6 +26,7 @@ import { document } from "libs/window";
 import {
   type AnnotationTool,
   AnnotationToolEnum,
+  ControlModeEnum,
   FillModeEnum,
   type InterpolationMode,
   InterpolationModeEnum,
@@ -845,17 +846,19 @@ const TOOL_NAMES = {
   AREA_MEASUREMENT: "Area Measurement Tool",
 };
 
-export default function ToolbarView() {
+export default function ToolbarView({ isReadOnly = false }: { isReadOnly?: boolean }) {
   const dispatch = useDispatch();
-  const hasVolume = useSelector((state: OxalisState) => state.tracing.volumes.length > 0);
-  const hasSkeleton = useSelector((state: OxalisState) => state.tracing.skeleton != null);
+  const hasVolume = useSelector((state: OxalisState) => state.tracing?.volumes.length > 0);
+  const hasSkeleton = useSelector((state: OxalisState) => state.tracing?.skeleton != null);
+
   const isAgglomerateMappingEnabled = useSelector(hasAgglomerateMapping);
 
   const [lastForcefullyDisabledTool, setLastForcefullyDisabledTool] =
     useState<AnnotationTool | null>(null);
   const isVolumeModificationAllowed = useSelector(
     (state: OxalisState) => !hasEditableMapping(state),
   );
+  const isModificationAllowed = !isReadOnly && isVolumeModificationAllowed;
   const useLegacyBindings = useSelector(
     (state: OxalisState) => state.userConfiguration.useLegacyBindings,
   );
@@ -940,7 +943,7 @@ export default function ToolbarView() {
           <i className="fas fa-arrows-alt" />
         </ToolRadioButton>
 
-        {hasSkeleton ? (
+        {hasSkeleton && !isReadOnly ? (
           <ToolRadioButton
             name={TOOL_NAMES.SKELETON}
             description={skeletonToolDescription}
@@ -957,7 +960,7 @@ export default function ToolbarView() {
           </ToolRadioButton>
         ) : null}
 
-        {hasVolume && isVolumeModificationAllowed ? (
+        {hasVolume && isModificationAllowed ? (
           <React.Fragment>
             <ToolRadioButton
               name={TOOL_NAMES.BRUSH}
@@ -1104,24 +1107,28 @@ export default function ToolbarView() {
             </ToolRadioButton>
           </React.Fragment>
         ) : null}
-        <ToolRadioButton
-          name={TOOL_NAMES.BOUNDING_BOX}
-          description="Create, resize and modify bounding boxes."
-          disabledExplanation={disabledInfosForTools[AnnotationToolEnum.BOUNDING_BOX].explanation}
-          disabled={disabledInfosForTools[AnnotationToolEnum.BOUNDING_BOX].isDisabled}
-          value={AnnotationToolEnum.BOUNDING_BOX}
-        >
-          <img
-            src="/assets/images/bounding-box.svg"
-            alt="Bounding Box Icon"
-            style={{
-              opacity: disabledInfosForTools[AnnotationToolEnum.BOUNDING_BOX].isDisabled ? 0.5 : 1,
-              ...imgStyleForSpaceyIcons,
-            }}
-          />
-        </ToolRadioButton>
+        {!isReadOnly && (
+          <ToolRadioButton
+            name={TOOL_NAMES.BOUNDING_BOX}
+            description="Create, resize and modify bounding boxes."
+            disabledExplanation={disabledInfosForTools[AnnotationToolEnum.BOUNDING_BOX].explanation}
+            disabled={disabledInfosForTools[AnnotationToolEnum.BOUNDING_BOX].isDisabled}
+            value={AnnotationToolEnum.BOUNDING_BOX}
+          >
+            <img
+              src="/assets/images/bounding-box.svg"
+              alt="Bounding Box Icon"
+              style={{
+                opacity: disabledInfosForTools[AnnotationToolEnum.BOUNDING_BOX].isDisabled
+                  ? 0.5
+                  : 1,
+                ...imgStyleForSpaceyIcons,
+              }}
+            />
+          </ToolRadioButton>
+        )}
 
-        {hasSkeleton && hasVolume ? (
+        {hasSkeleton && hasVolume && !isReadOnly ? (
           <ToolRadioButton
             name={TOOL_NAMES.PROOFREAD}
             description={

frontend/javascripts/oxalis/view/action_bar_view.tsx

@@ -298,8 +298,10 @@ class ActionBarView extends React.PureComponent<Props, State> {
           {getIsAIAnalysisEnabled() && isAdminOrDatasetManager
             ? this.renderStartAIJobButton(shouldDisableAIJobButton, tooltip)
             : null}
-          {!isReadOnly && constants.MODES_PLANE.indexOf(viewMode) > -1 ? <ToolbarView /> : null}
           {isViewMode ? this.renderStartTracingButton() : null}
+          {constants.MODES_PLANE.indexOf(viewMode) > -1 ? (
+            <ToolbarView isReadOnly={isReadOnly} />
+          ) : null}
         </div>
         <AddNewLayoutModal
           addLayout={this.addNewLayout}