Add option to hide/show code block #688
Conversation
CC-154 Add code block visibility control for annotation layer
CC-156 Add code visibility control for single mesh layer
CC-157 Improve state handling for code box hidden
Use a trackable boolean instead of a simple value in the layer, and use CheckBoxIcon instead of a hand-crafted one in each layer that implements the feature.
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
src/layer/index.ts
Outdated
| @@ -710,6 +710,7 @@ export class ManagedUserLayer extends RefCounted { | |||
| } | |||
|
|
|||
| visible = true; | |||
| codeVisible = new TrackableBoolean(true, true); | |||
There was a problem hiding this comment.
I don't think there is a reason to make this a ManagedUserLayer property --- instead it should be a property of the specific UserLayer types that have a shader widget.
There was a problem hiding this comment.
Thanks for the review, I totally forgot to answer you on this one, but we modified the location of the property to place it in the UserLayer instead, as you suggested :)
…user-layer-code-experiment
| @@ -541,6 +552,22 @@ class RenderingOptionsTab extends Tab { | |||
| topRow.className = "neuroglancer-image-dropdown-top-row"; | |||
| topRow.appendChild(document.createTextNode("Shader")); | |||
| topRow.appendChild(spacer); | |||
|
|
|||
There was a problem hiding this comment.
Can we factor out this topRow logic now that it has become more complicated to reduce duplication across layers?
|
Note: The segmentation layer also has a shader code control, used when rendering skeletons only. It would be good to add the option to hide that also. |
Summary
This PR introduces a new control button in the layer configuration panel that allows users to toggle the visibility of the shader code editor if one is present (depending on the layer's type). This button shows or hides the code editor within the layer configuration panel, allowing users to focus on other parameters present in the layer configuration panel. Open to feedback and suggestions on the implementation and user interaction!
Current version (no code viewer button):
New Option (code viewer visible with button, and hidden):
Motivation
The ability to show or hide the code viewer was requested to help the user to not be intimidated by the shader code editor which is not manipulated often directly by user visualizing data only. Users often need the option to focus on the 3D view or data without the distraction of the shader code.
User Interaction
In Neuroglancer, the new toggle button is available in the layer configuration panel, placed on top of the shader code editor, next to the "show large editor view" and the "documentation" button. This button allows users to show or hide the code viewer as needed. The control is simple, enabling users to easily manage the visibility of the code viewer without requiring additional keybinds. Very open to suggestions on improving this functionality and placement in the UI.
Implementation
The primary change occurs within the tab rendering components for each impacted layers (currently, annotation layer, image layer, and single mesh layer). A button icon is dynamically updated based on the visibility state, ensuring users can easily toggle between viewing and hiding the code block. The state of the viewer is saved in the state related to each layer.
Example of the new functionality:
video-of-all-three-code-boxes.mp4