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. |
…user-layer-code-experiment
src/layer/image/index.ts
Outdated
| @@ -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?
There was a problem hiding this comment.
I tried to factorize the top row creation, but at the end, it's tightly coupled to each reification of the UserLayer as the codeVisible property is located inside each UserLayer that requires it. Also, the top row is created by being associated at some point to the ShaderOverlay class that is defined in each module that defines the UserLayer. We could pass it as parameter, but we woud need also to have something for the help text, as well as the css class for the div. Also, having this as a separate function somewhere would imply that "layer" is passed as parameter and we couldn't access the "codeVisible" attribute unless we consider "layer" as any. If that's not a problem, I can factorize the code like this, and put this function in the same module that defines the ShaderCodeWidget.
At the moment, what I did is to extract the creation of the top row in a separate function, but duplicated (with small variations) in each module. This way, it mimicks more the equivalent of the makeShaderCodeWidget function in each of those modules.
There was a problem hiding this comment.
You could make the layer parameter some new interface that specifies the required properties --- and similarly pass in the ShaderOverlay and help strings as parameters.
|
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