From 460678402e590ce70f0f2889e1abf7a905d0904d Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Mon, 16 Dec 2024 14:08:56 +0100 Subject: [PATCH 1/5] allow selective segment visibility regardless of proofreading tool --- .../materials/plane_material_factory.ts | 14 +++++ .../oxalis/shaders/main_data_shaders.glsl.ts | 29 ++++----- .../oxalis/shaders/segmentation.glsl.ts | 41 +++++++++++++ frontend/javascripts/oxalis/store.ts | 1 + .../left-border-tabs/layer_settings_tab.tsx | 59 ++++++++++--------- .../dataset_view_configuration.schema.ts | 1 + 6 files changed, 99 insertions(+), 46 deletions(-) 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..8efb15a097d 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 @@ -132,33 +132,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 +902,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 +1341,7 @@ class DatasetSettings extends React.PureComponent { "loadingStrategy", "segmentationPatternOpacity", "blendMode", + "selectiveSegmentVisibility", ] as Array ).map((key) => ({ name: settings[key] as string, @@ -1585,6 +1589,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, From 69576c88fb40d0fbacb4938ab2be486d9a6de7ee Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Mon, 16 Dec 2024 14:25:32 +0100 Subject: [PATCH 2/5] remove unused imports --- .../oxalis/view/left-border-tabs/layer_settings_tab.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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 8efb15a097d..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"; From 0b841c90d811a91a69a4507fbeb1755c7651cfc8 Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Mon, 16 Dec 2024 15:45:30 +0100 Subject: [PATCH 3/5] allow double click in move tool to activate a segment id --- frontend/javascripts/libs/input.ts | 28 ++++++++++++++++++- .../controller/combinations/tool_controls.ts | 14 ++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/frontend/javascripts/libs/input.ts b/frontend/javascripts/libs/input.ts index 19e952ffe9c..bc41b4b0018 100644 --- a/frontend/javascripts/libs/input.ts +++ b/frontend/javascripts/libs/input.ts @@ -331,7 +331,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; @@ -384,6 +384,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); @@ -437,6 +455,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( @@ -489,6 +508,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); @@ -542,6 +562,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); From ae574d2a0771108a7bbe9f89428b7f9af40eaec8 Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Thu, 19 Dec 2024 11:55:29 +0100 Subject: [PATCH 4/5] update changelog --- CHANGELOG.unreleased.md | 1 + 1 file changed, 1 insertion(+) 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) From 779e71c14696e14ecc628b4780296fe9fd6556ae Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Thu, 19 Dec 2024 11:55:33 +0100 Subject: [PATCH 5/5] update docs --- docs/ui/layers.md | 1 + 1 file changed, 1 insertion(+) 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).