diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index 1f0225d766c..0e057071392 100644 --- a/CHANGELOG.unreleased.md +++ b/CHANGELOG.unreleased.md @@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released ### Added - Added the total volume of a dataset to a tooltip in the dataset info tab. [#8229](https://github.com/scalableminds/webknossos/pull/8229) - Optimized performance of data loading with “fill value“ chunks. [#8271](https://github.com/scalableminds/webknossos/pull/8271) +- Added the option for "Selective Segment Visibility" for segmentation layers. Select this option in the left sidebar to only show segments that are currently active or hovered. [#8281](https://github.com/scalableminds/webknossos/pull/8281) ### Changed - Renamed "resolution" to "magnification" in more places within the codebase, including local variables. [#8168](https://github.com/scalableminds/webknossos/pull/8168) diff --git a/docs/ui/layers.md b/docs/ui/layers.md index f7f1dd55064..7edbe00411f 100644 --- a/docs/ui/layers.md +++ b/docs/ui/layers.md @@ -31,6 +31,7 @@ In addition to the general layer properties mentioned above, `color` and `segmen - `Color`: Every `color` layer can be re-colored to make it easily identifiable. By default, all layers have a white overlay, showing the true, raw black & white data. Clicking on the square color indicator brings up your system's color palette to choose from. Note, there is an icon button for inverting all color values in this layer. - `Pattern Opacity`: Adjust the visibility of the texture/pattern on each segment. To make segments easier to distinguish and more unique, a pattern is applied to each in addition to its base color. 0% hides the pattern. 100% makes the pattern very prominent. Great for increasing the visual contrast between segments. +- `Selective Visibility`: When activated, only segments are shown that are currently active or hovered. - `ID Mapping`: WEBKNOSSOS supports applying pre-computed agglomerations/groupings of segmentation IDs for a given segmentation layer. This is a very powerful feature to explore and compare different segmentation strategies for a given segmentation layer. Mappings need to be pre-computed and stored together with a dataset for WEBKNOSSOS to download and apply. [Read more about this here](../proofreading/segmentation_mappings.md). diff --git a/frontend/javascripts/libs/input.ts b/frontend/javascripts/libs/input.ts index cd3d385e518..4b126d38a0d 100644 --- a/frontend/javascripts/libs/input.ts +++ b/frontend/javascripts/libs/input.ts @@ -340,7 +340,7 @@ export class InputKeyboard { } // The mouse module. -// Events: over, out, leftClick, rightClick, leftDownMove +// Events: over, out, {left,right}Click, {left,right}DownMove, {left,right}DoubleClick class InputMouseButton { mouse: InputMouse; name: MouseButtonString; @@ -393,6 +393,24 @@ class InputMouseButton { } } + handleDoubleClick(event: MouseEvent, triggeredByTouch: boolean): void { + // event.which is 0 on touch devices as there are no mouse buttons, interpret that as the left mouse button + // Safari doesn't support evt.buttons, but only evt.which is non-standardized + const eventWhich = event.which !== 0 ? event.which : 1; + + if (eventWhich === this.which) { + if (this.moveDelta <= MOUSE_MOVE_DELTA_THRESHOLD) { + this.mouse.emitter.emit( + `${this.name}DoubleClick`, + this.mouse.lastPosition, + this.id, + event, + triggeredByTouch, + ); + } + } + } + handleMouseMove(event: MouseEvent, delta: Point2): void { if (this.down) { this.moveDelta += Math.abs(delta.x) + Math.abs(delta.y); @@ -446,6 +464,7 @@ export class InputMouse { document.addEventListener("mousemove", this.mouseMove); document.addEventListener("mouseup", this.mouseUp); document.addEventListener("touchend", this.touchEnd); + document.addEventListener("dblclick", this.doubleClick); this.delegatedEvents = { ...Utils.addEventListenerWithDelegation( @@ -498,6 +517,7 @@ export class InputMouse { document.removeEventListener("mousemove", this.mouseMove); document.removeEventListener("mouseup", this.mouseUp); document.removeEventListener("touchend", this.touchEnd); + document.removeEventListener("dblclick", this.doubleClick); for (const [eventName, eventHandler] of Object.entries(this.delegatedEvents)) { document.removeEventListener(eventName, eventHandler); @@ -551,6 +571,12 @@ export class InputMouse { } }; + doubleClick = (event: MouseEvent): void => { + if (this.isHit(event)) { + this.leftMouseButton.handleDoubleClick(event, false); + } + }; + touchEnd = (): void => { // The order of events during a click on a touch enabled device is: // touch events -> mouse events -> click diff --git a/frontend/javascripts/oxalis/controller/combinations/tool_controls.ts b/frontend/javascripts/oxalis/controller/combinations/tool_controls.ts index 811f6c40f49..dc9c461de42 100644 --- a/frontend/javascripts/oxalis/controller/combinations/tool_controls.ts +++ b/frontend/javascripts/oxalis/controller/combinations/tool_controls.ts @@ -137,6 +137,20 @@ export class MoveTool { } handleClickSegment(pos); }, + leftDoubleClick: (pos: Point2, _plane: OrthoView, _event: MouseEvent, _isTouch: boolean) => { + const { uiInformation } = Store.getState(); + const isMoveToolActive = uiInformation.activeTool === AnnotationToolEnum.MOVE; + + if (isMoveToolActive) { + // We want to select the clicked segment ID only in the MOVE tool. This method is + // implemented within the Move tool, but other tool controls will fall back to this one + // if they didn't define the double click hook. However, for most other tools, this behavior + // would be suboptimal, because when doing a double click, the first click will also be registered + // as a simple left click. For example, doing a double click with the brush tool would brush something + // and then immediately select the id again which is weird. + VolumeHandlers.handlePickCell(pos); + } + }, middleClick: (pos: Point2, _plane: OrthoView, event: MouseEvent) => { if (event.shiftKey) { handleAgglomerateSkeletonAtClick(pos); diff --git a/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.ts b/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.ts index 87c5a6220c7..aabec1e2429 100644 --- a/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.ts +++ b/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.ts @@ -146,6 +146,9 @@ class PlaneMaterialFactory { selectiveVisibilityInProofreading: { value: true, }, + selectiveSegmentVisibility: { + value: false, + }, is3DViewBeingRendered: { value: true, }, @@ -562,6 +565,17 @@ class PlaneMaterialFactory { true, ), ); + + this.storePropertyUnsubscribers.push( + listenToStoreProperty( + (storeState) => storeState.datasetConfiguration.selectiveSegmentVisibility, + (selectiveSegmentVisibility) => { + this.uniforms.selectiveSegmentVisibility.value = selectiveSegmentVisibility; + }, + true, + ), + ); + this.storePropertyUnsubscribers.push( listenToStoreProperty( (storeState) => getMagInfoByLayer(storeState.dataset), diff --git a/frontend/javascripts/oxalis/shaders/main_data_shaders.glsl.ts b/frontend/javascripts/oxalis/shaders/main_data_shaders.glsl.ts index 4501f3bce64..68444fa1fdd 100644 --- a/frontend/javascripts/oxalis/shaders/main_data_shaders.glsl.ts +++ b/frontend/javascripts/oxalis/shaders/main_data_shaders.glsl.ts @@ -6,6 +6,7 @@ import { convertCellIdToRGB, getBrushOverlay, getCrossHairOverlay, + getSegmentationAlphaIncrement, getSegmentId, } from "./segmentation.glsl"; import { getMaybeFilteredColorOrFallback } from "./filtering.glsl"; @@ -110,6 +111,7 @@ uniform highp uint LOOKUP_CUCKOO_TWIDTH; uniform float sphericalCapRadius; uniform bool selectiveVisibilityInProofreading; +uniform bool selectiveSegmentVisibility; uniform float viewMode; uniform float alpha; uniform bool renderBucketIndices; @@ -178,6 +180,7 @@ ${compileShader( hasSegmentation ? getBrushOverlay : null, hasSegmentation ? getSegmentId : null, hasSegmentation ? getCrossHairOverlay : null, + hasSegmentation ? getSegmentationAlphaIncrement : null, almostEq, )} @@ -291,25 +294,13 @@ void main() { && hoveredUnmappedSegmentIdHigh == <%= segmentationName %>_unmapped_id_high; bool isActiveCell = activeCellIdLow == <%= segmentationName %>_id_low && activeCellIdHigh == <%= segmentationName %>_id_high; - // Highlight cell only if it's hovered or active during proofreading - // and if segmentation opacity is not zero - float alphaIncrement = isProofreading - ? (isActiveCell - ? (isHoveredUnmappedSegment - ? 0.4 // Highlight the hovered super-voxel of the active segment - : (isHoveredSegment - ? 0.15 // Highlight the not-hovered super-voxels of the hovered segment - : 0.0 - ) - ) - : (isHoveredSegment - ? 0.2 - // We are in proofreading mode, but the current voxel neither belongs - // to the active segment nor is it hovered. When selective visibility - // is enabled, lower the opacity. - : (selectiveVisibilityInProofreading ? -<%= segmentationName %>_alpha : 0.0) - ) - ) : (isHoveredSegment ? 0.2 : 0.0); + float alphaIncrement = getSegmentationAlphaIncrement( + <%= segmentationName %>_alpha, + isHoveredSegment, + isHoveredUnmappedSegment, + isActiveCell + ); + gl_FragColor = vec4(mix( data_color.rgb, convertCellIdToRGB(<%= segmentationName %>_id_high, <%= segmentationName %>_id_low), diff --git a/frontend/javascripts/oxalis/shaders/segmentation.glsl.ts b/frontend/javascripts/oxalis/shaders/segmentation.glsl.ts index 6076008ba5f..f86e4bc6a49 100644 --- a/frontend/javascripts/oxalis/shaders/segmentation.glsl.ts +++ b/frontend/javascripts/oxalis/shaders/segmentation.glsl.ts @@ -351,3 +351,44 @@ export const getSegmentId: ShaderModule = { <% }) %> `, }; + +export const getSegmentationAlphaIncrement: ShaderModule = { + requirements: [], + code: ` + float getSegmentationAlphaIncrement(float alpha, bool isHoveredSegment, bool isHoveredUnmappedSegment, bool isActiveCell) { + // Highlight segment only if + // - it's hovered or + // - active during proofreading + // Also, make segments invisible if selective visibility is turned on (unless the segment + // is active or hovered). + + if (isProofreading) { + if (isActiveCell) { + return (isHoveredUnmappedSegment + ? 0.4 // Highlight the hovered super-voxel of the active segment + : (isHoveredSegment + ? 0.15 // Highlight the not-hovered super-voxels of the hovered segment + : 0.0 + ) + ); + } else { + return (isHoveredSegment + ? 0.2 + // We are in proofreading mode, but the current voxel neither belongs + // to the active segment nor is it hovered. When selective visibility + // is enabled, lower the opacity. + : (selectiveVisibilityInProofreading ? -alpha : 0.0) + ); + } + } + + if (isHoveredSegment) { + return 0.2; + } else if (selectiveSegmentVisibility) { + return isActiveCell ? 0.15 : -alpha; + } else { + return 0.; + } + } + `, +}; diff --git a/frontend/javascripts/oxalis/store.ts b/frontend/javascripts/oxalis/store.ts index 61762134fd8..617bb52e212 100644 --- a/frontend/javascripts/oxalis/store.ts +++ b/frontend/javascripts/oxalis/store.ts @@ -330,6 +330,7 @@ export type DatasetConfiguration = { readonly renderMissingDataBlack: boolean; readonly loadingStrategy: LoadingStrategy; readonly segmentationPatternOpacity: number; + readonly selectiveSegmentVisibility: boolean; readonly blendMode: BLEND_MODES; // If nativelyRenderedLayerName is not-null, the layer with // that name (or id) should be rendered without any transforms. diff --git a/frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx b/frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx index 29fb787852b..9ff4def3ff9 100644 --- a/frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx +++ b/frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx @@ -86,7 +86,7 @@ import { reloadHistogramAction, } from "oxalis/model/actions/settings_actions"; import { userSettings } from "types/schemas/user_settings.schema"; -import type { Vector3, ControlMode } from "oxalis/constants"; +import type { Vector3 } from "oxalis/constants"; import Constants, { ControlModeEnum, MappingStatusEnum } from "oxalis/constants"; import EditableTextLabel from "oxalis/view/components/editable_text_label"; import LinkButton from "components/link_button"; @@ -97,9 +97,6 @@ import type { DatasetLayerConfiguration, OxalisState, UserConfiguration, - HistogramDataForAllLayers, - Tracing, - Task, } from "oxalis/store"; import Store from "oxalis/store"; import Toast from "libs/toast"; @@ -132,33 +129,8 @@ import { } from "types/schemas/dataset_view_configuration.schema"; import defaultState from "oxalis/default_state"; -type DatasetSettingsProps = { - userConfiguration: UserConfiguration; - datasetConfiguration: DatasetConfiguration; - dataset: APIDataset; - onChange: (propertyName: keyof DatasetConfiguration, value: any) => void; - onChangeLayer: ( - layerName: string, - propertyName: keyof DatasetLayerConfiguration, - value: any, - ) => void; - onClipHistogram: (layerName: string, shouldAdjustClipRange: boolean) => Promise; - histogramData: HistogramDataForAllLayers; - onChangeRadius: (value: number) => void; - onChangeShowSkeletons: (arg0: boolean) => void; - onSetPosition: (arg0: Vector3) => void; - onZoomToMag: (layerName: string, arg0: Vector3) => number; - onChangeUser: (key: keyof UserConfiguration, value: any) => void; - reloadHistogram: (layerName: string) => void; - tracing: Tracing; - task: Task | null | undefined; - onEditAnnotationLayer: (tracingId: string, layerProperties: EditableLayerProperties) => void; - controlMode: ControlMode; - isArbitraryMode: boolean; - isAdminOrDatasetManager: boolean; - isAdminOrManager: boolean; - isSuperUser: boolean; -}; +type DatasetSettingsProps = ReturnType & + ReturnType; type State = { // If this is set to not-null, the downsampling modal @@ -927,9 +899,37 @@ class DatasetSettings extends React.PureComponent { defaultValue={defaultDatasetViewConfigurationWithoutNull.segmentationPatternOpacity} /> ); + + const isProofreadingMode = this.props.activeTool === "PROOFREAD"; + const isSelectiveVisibilityDisabled = isProofreadingMode; + + const selectiveVisibilitySwitch = ( + +
+ +
+ + ); + return (
{segmentationOpacitySetting} + {selectiveVisibilitySwitch}
); @@ -1338,6 +1338,7 @@ class DatasetSettings extends React.PureComponent { "loadingStrategy", "segmentationPatternOpacity", "blendMode", + "selectiveSegmentVisibility", ] as Array ).map((key) => ({ name: settings[key] as string, @@ -1585,6 +1586,7 @@ const mapStateToProps = (state: OxalisState) => ({ state.activeUser != null ? Utils.isUserAdminOrDatasetManager(state.activeUser) : false, isAdminOrManager: state.activeUser != null ? Utils.isUserAdminOrManager(state.activeUser) : false, isSuperUser: state.activeUser?.isSuperUser || false, + activeTool: state.uiInformation.activeTool, }); const mapDispatchToProps = (dispatch: Dispatch) => ({ diff --git a/frontend/javascripts/types/schemas/dataset_view_configuration.schema.ts b/frontend/javascripts/types/schemas/dataset_view_configuration.schema.ts index 46d09bc45a7..672acab0ad2 100644 --- a/frontend/javascripts/types/schemas/dataset_view_configuration.schema.ts +++ b/frontend/javascripts/types/schemas/dataset_view_configuration.schema.ts @@ -89,6 +89,7 @@ export const defaultDatasetViewConfigurationWithoutNull: DatasetConfiguration = blendMode: BLEND_MODES.Additive, colorLayerOrder: [], nativelyRenderedLayerName: null, + selectiveSegmentVisibility: false, }; export const defaultDatasetViewConfiguration = { ...defaultDatasetViewConfigurationWithoutNull,