Patch GLGraphicsItem and GLViewMixin to support nested GLLayers (UBC-Thunderbots#3400)

* Use pyqtdarktheme-fork

* Patch bug in GLGraphicsItem.setParentItem

* Patch GLGraphicsItem and GLViewMixin

* Update docs

Author: williamckha

docs/software-architecture-and-design.md

@@ -534,7 +534,7 @@ Thunderscope has a field visualizer that uses [PyQtGraph's 3D graphics system](h
 ### Layers
 We organize our graphics into "layers" so that we can toggle the visibility of different parts of our visualization. Each layer is responsible for visualizing a specific portion of our AI (e.g. vision data, path planning, passing, etc.). A layer can also handle layer-specific functionality; for instance, `GLWorldLayer` lets the user place or kick the ball using the mouse. The base class for a layer is [`GLLayer`](../src/software/thunderscope/gl/layers/gl_layer.py).
 
-A `GLLayer` is in fact a `GLGraphicsItem` that is added to the scenegraph. When we add or remove `GLGraphicsItem`s to a `GLLayer`, we're actually setting the `GLLayer` as the parent of the `GLGraphicsItem`; this is because the scenegraph has a tree-like structure. In theory, `GLLayer`s could also be nested within one another. 
+A `GLLayer` is in fact a `GLGraphicsItem` that is added to the scenegraph. When we add or remove `GLGraphicsItem`s to a `GLLayer`, we're actually setting the `GLLayer` as the parent of the `GLGraphicsItem`; this is because the scenegraph has a hierarchical tree-like structure. `GLLayer`s can also be nested within one another, i.e. a `GLLayer` can be added as a child of another `GLLayer`. 
 
 # Simulator
 The `Simulator` is what we use for physics simulation to do testing when we don't have access to real field. In terms of the architecture, the `Simulator` "simulates" the following components' functionalities:

environment_setup/ubuntu20_requirements.txt

@@ -6,5 +6,4 @@ iterfzf==0.5.0.20.0
 python-Levenshtein==0.25.1
 psutil==5.9.0
 PyOpenGL==3.1.6
-qt-material==2.12
 ruff==0.5.5

environment_setup/ubuntu22_requirements.txt

@@ -7,5 +7,4 @@ python-Levenshtein==0.25.1
 psutil==5.9.0
 PyOpenGL==3.1.6
 numpy==1.26.4
-qt-material==2.12
 ruff==0.5.5

environment_setup/ubuntu24_requirements.txt

@@ -4,5 +4,4 @@ iterfzf==0.5.0.20.0
 python-Levenshtein==0.25.1
 psutil==5.9.0
 PyOpenGL==3.1.6
-qt-material==2.12
 ruff==0.5.5

src/software/thunderscope/BUILD

@@ -126,6 +126,7 @@ py_library(
         ":proto_unix_io",
         ":thunderscope_types",
         ":widget_names_to_setup",
+        requirement("pyqtdarktheme-fork"),
     ],
 )
 

src/software/thunderscope/gl/gl_widget.py

@@ -4,7 +4,6 @@
 from pyqtgraph.Qt.QtWidgets import *
 from pyqtgraph.opengl import *
 
-import functools
 import numpy as np
 from typing import Optional
 from software.thunderscope.common.frametime_counter import FrameTimeCounter
@@ -217,27 +216,19 @@ def add_layer(self, layer: GLLayer, visible: bool = True) -> None:
         """
         self.layers.append(layer)
 
+        # Add the layer to the scene
+        self.gl_view_widget.addItem(layer)
+        layer.setVisible(visible)
+
         # Add the layer to the Layer menu
         (layer_checkbox, layer_action) = self.__setup_menu_checkbox(
             layer.name, self.layers_menu, visible
         )
         self.layers_menu_actions[layer.name] = layer_action
         self.layers_menu.addAction(layer_action)
-
-        # Add layer and its related layers to the scene
-        while layer:
-            self.gl_view_widget.addItem(layer)
-            layer.setVisible(visible)
-
-            # Connect visibility of all related layers to the same item
-            # in the layer menu
-            layer_checkbox.stateChanged.connect(
-                functools.partial(
-                    lambda l: l.setVisible(layer_checkbox.isChecked()), layer
-                )
-            )
-
-            layer = layer.related_layer
+        layer_checkbox.stateChanged.connect(
+            lambda: layer.setVisible(layer_checkbox.isChecked())
+        )
 
     def remove_layer(self, layer: GLLayer) -> None:
         """Remove a layer from this GLWidget
@@ -246,15 +237,13 @@ def remove_layer(self, layer: GLLayer) -> None:
         """
         self.layers.remove(layer)
 
+        # Remove the layer from the scene
+        self.gl_view_widget.removeItem(layer)
+
         # Remove the layer from the Layer menu
         layer_action = self.layers_menu_actions[layer.name]
         self.layers_menu.removeAction(layer_action)
 
-        # Remove layer its related layers from the scene
-        while layer:
-            self.gl_view_widget.removeItem(layer)
-            layer = layer.related_layer
-
     def refresh(self) -> None:
         """Trigger an update on all the layers"""
         if self.player:
@@ -273,10 +262,8 @@ def refresh(self) -> None:
         # Don't refresh the layers if the simulation is paused
         if simulation_state.is_playing:
             for layer in self.layers:
-                while layer:
-                    if layer.visible():
-                        layer.refresh_graphics()
-                    layer = layer.related_layer
+                if layer.visible():
+                    layer.refresh_graphics()
 
     def set_camera_view(self, camera_view: CameraView) -> None:
         """Set the camera position to a preset camera view

src/software/thunderscope/gl/graphics/gl_goal.py

@@ -33,8 +33,9 @@ def __init__(
 
         # The 3D mesh isn't visible from the orthographic view, so
         # we need to draw an outline of the goal on the ground
-        self.goal_outline = GLLinePlotItem(color=color, width=LINE_WIDTH)
-        self.goal_outline.setParentItem(self)
+        self.goal_outline = GLLinePlotItem(
+            parentItem=self, color=color, width=LINE_WIDTH
+        )
 
         # Need to give goal some default meshdata; otherwise, pyqtgraph
         # tries calculating some stuff using invalid vertices/faces and

src/software/thunderscope/gl/helpers/BUILD

@@ -10,6 +10,14 @@ py_library(
     ],
 )
 
+py_library(
+    name = "gl_patches",
+    srcs = ["gl_patches.py"],
+    deps = [
+        requirement("pyqtgraph"),
+    ],
+)
+
 py_library(
     name = "observable_list",
     srcs = ["observable_list.py"],

src/software/thunderscope/gl/helpers/gl_patches.py

@@ -0,0 +1,71 @@
+from pyqtgraph.opengl.GLGraphicsItem import GLGraphicsItem
+from pyqtgraph.opengl.GLViewWidget import GLViewMixin
+
+
+def GLGraphicsItem_setParentItem_patched(self, parent: GLGraphicsItem) -> None:
+    """Patched version of GLGraphicsItem.setParentItem that properly
+    removes this item from the scenegraph when the parent param is None.
+
+    From the original pyqtgraph documentation:
+    Sets this item's parent in the scenegraph hierarchy.
+
+    :param parent: the GLGraphicsItem to set as the parent of this item.
+                   If None, this item is removed from the scenegraph.
+    """
+    if self._GLGraphicsItem__parent:
+        self._GLGraphicsItem__parent._GLGraphicsItem__children.remove(self)
+    self._GLGraphicsItem__parent = None
+    if self.view():
+        self.view().removeItem(self)
+
+    if parent:
+        parent._GLGraphicsItem__children.add(self)
+        self._GLGraphicsItem__parent = parent
+        if parent.view():
+            parent.view().addItem(self)
+
+
+def GLViewMixin_addItem_patched(self, item: GLGraphicsItem) -> None:
+    """Patched version of GLViewMixin.addItem that properly adds all
+    the item and all its descendants to the scene.
+
+    :param item: the item to add to the scene
+    """
+    items_to_add = [item]
+
+    while items_to_add:
+        item_to_add = items_to_add.pop()
+        self.items.append(item_to_add)
+        item_to_add._setView(self)
+
+        if self.isValid():
+            item_to_add.initialize()
+
+        for child in item_to_add.childItems():
+            items_to_add.append(child)
+
+    self.update()
+
+
+def GLViewMixin_removeItem_patched(self, item: GLGraphicsItem) -> None:
+    """Patched version of GLViewMixin.removeItem that properly removes
+    the given item and its descendants from the scene.
+
+    :param item: the item to remove from the scene
+    """
+    items_to_remove = [item]
+
+    while items_to_remove:
+        item_to_remove = items_to_remove.pop()
+        self.items.remove(item_to_remove)
+        item_to_remove._setView(None)
+
+        for child in item_to_remove.childItems():
+            items_to_remove.append(child)
+
+    self.update()
+
+
+GLGraphicsItem.setParentItem = GLGraphicsItem_setParentItem_patched
+GLViewMixin.addItem = GLViewMixin_addItem_patched
+GLViewMixin.removeItem = GLViewMixin_removeItem_patched

src/software/thunderscope/gl/layers/BUILD

@@ -8,6 +8,7 @@ py_library(
     deps = [
         "//software/thunderscope:thread_safe_buffer",
         "//software/thunderscope/gl/helpers:extended_gl_view_widget",
+        "//software/thunderscope/gl/helpers:gl_patches",
         "//software/thunderscope/gl/helpers:observable_list",
         requirement("pyqtgraph"),
     ],

src/software/thunderscope/gl/layers/gl_cost_vis_layer.py

@@ -24,9 +24,9 @@ class GLCostVisOverlayLayer(GLLayer):
     def __init__(self, cost_vis_layer: GLCostVisLayer) -> None:
         """Initialize the GLCostVisOverlayLayer
 
-        :param cost_vis_layer: The GLCostVisLayer this overlay layer is related to
+        :param cost_vis_layer: The GLCostVisLayer to set as the parent of this layer
         """
-        super().__init__("GLCostVisOverlayLayer")
+        super().__init__("GLCostVisOverlayLayer", parent_item=cost_vis_layer)
         self.setDepthValue(DepthValues.OVERLAY_DEPTH)
 
         self.cost_vis_layer = cost_vis_layer
@@ -82,7 +82,7 @@ def __init__(self, name: str, buffer_size: int = 5) -> None:
         """
         super().__init__(name)
         self.setDepthValue(DepthValues.BENEATH_BACKGROUND_DEPTH)
-        self.related_layer = GLCostVisOverlayLayer(self)
+        self.cost_vis_overlay_layer = GLCostVisOverlayLayer(self)
 
         self.world_buffer = ThreadSafeBuffer(buffer_size, World)
         self.cost_visualization_buffer = ThreadSafeBuffer(
@@ -107,6 +107,8 @@ def refresh_graphics(self) -> None:
         except queue.Empty:
             cost_vis = None
 
+        self.cost_vis_overlay_layer.refresh_graphics()
+
         if not cost_vis:
             cost_vis = self.cached_cost_vis
 

src/software/thunderscope/gl/layers/gl_layer.py

@@ -1,9 +1,9 @@
 from pyqtgraph.Qt import QtGui
 from pyqtgraph.opengl.GLGraphicsItem import GLGraphicsItem
 
-
 from software.thunderscope.gl.helpers.observable_list import Change, ChangeAction
 from software.thunderscope.gl.helpers.extended_gl_view_widget import MouseInSceneEvent
+from software.thunderscope.gl.helpers.gl_patches import *
 
 
 class GLLayer(GLGraphicsItem):
@@ -12,27 +12,20 @@ class GLLayer(GLGraphicsItem):
     A layer is added to the 3D scenegraph and represents a collection of
     GLGraphicsItems to be displayed together. GLGraphicsItems should be
     added as children of a GLLayer.
+
+    GLLayers themselves can also be added as a children of a GLLayer,
+    enabling us to group together related layers.
     """
 
-    def __init__(self, name: str) -> None:
+    def __init__(self, name: str, parent_item: GLGraphicsItem | None = None) -> None:
         """Initialize the GLLayer
 
         :param name: The displayed name of the layer
+        :param parent_item: The parent GLGraphicsItem of the GLLayer
         """
-        super().__init__()
+        super().__init__(parent_item)
         self.name = name
 
-        # GLLayers can point to one another with this field, forming a
-        # linked list of "related" GLLayers.
-        #
-        # Related layers are grouped together and treated as a single layer
-        # in the layer menu. This lets us treat multiple layers rendered at
-        # different depths as one unit and toggle their visibility together
-        # as a whole.
-        #
-        # WARNING: Related GLLayers should not be parents/children of each other
-        self.related_layer: GLLayer = None
-
     def refresh_graphics(self) -> None:
         """Updates the GLGraphicsItems in this layer"""
 
@@ -87,18 +80,8 @@ def _graphics_changed(self, change: Change) -> None:
         """
         if change.action == ChangeAction.ADD:
             for graphic in change.elements:
-                # Manually setting the parent of the GLGraphicsItem to this
-                # layer since GLGraphicsItem.setParentItem does not work
-                # correctly
-                self._GLGraphicsItem__children.add(graphic)
-                graphic._GLGraphicsItem__parent = self
-                self.view().addItem(graphic)
+                graphic.setParentItem(self)
 
         elif change.action == ChangeAction.REMOVE:
             for graphic in change.elements:
-                # Manually removing the GLGraphicsItem as a child of this
-                # layer since GLGraphicsItem.setParentItem does not work
-                # correctly
-                self._GLGraphicsItem__children.remove(graphic)
-                graphic._GLGraphicsItem__parent = None
-                self.view().removeItem(graphic)
+                graphic.setParentItem(None)

src/software/thunderscope/gl/layers/gl_validation_layer.py

@@ -27,9 +27,9 @@ class GLValidationOverlayLayer(GLLayer):
     def __init__(self, validation_layer: GLValidationLayer) -> None:
         """Initialize the GLValidationOverlayLayer
 
-        :param validation_layer: The GLValidationLayer this overlay layer is related to
+        :param validation_layer: The GLValidationLayer to set as the parent of this layer
         """
-        super().__init__("GLValidationOverlayLayer")
+        super().__init__("GLValidationOverlayLayer", parent_item=validation_layer)
         self.setDepthValue(DepthValues.OVERLAY_DEPTH)
 
         self.validation_layer = validation_layer
@@ -84,7 +84,7 @@ def __init__(
         """
         super().__init__(name)
         self.setDepthValue(DepthValues.BACKGROUND_DEPTH)
-        self.related_layer = GLValidationOverlayLayer(self)
+        self.validation_overlay_layer = GLValidationOverlayLayer(self)
 
         # Validation protobufs are generated by simulated tests
         self.validation_set_buffer = ThreadSafeBuffer(buffer_size, ValidationProtoSet)
@@ -129,6 +129,8 @@ def refresh_graphics(self) -> None:
 
         self.__update_validation_graphics(self.get_validations())
 
+        self.validation_overlay_layer.refresh_graphics()
+
     def get_validations(self) -> list[ValidationProto]:
         """Get a list of the cached validations
 

src/software/thunderscope/requirements.in

@@ -1,3 +1,4 @@
 numpy==1.26.4
 protobuf==5.27.3
 pyqtgraph==0.13.7
+pyqtdarktheme-fork==2.3.2

src/software/thunderscope/requirements_lock.txt

@@ -4,6 +4,10 @@
 #
 #    bazel run //software/thunderscope:requirements.update
 #
+darkdetect==0.7.1 \
+    --hash=sha256:3efe69f8ecd5f1b7f4fbb0d1d93f656b0e493c45cc49222380ffe2a529cbc866 \
+    --hash=sha256:47be3cf5134432ddb616bbffc927237718407914993c82809983e7ccebf49013
+    # via pyqtdarktheme-fork
 numpy==1.26.4 \
     --hash=sha256:03a8c78d01d9781b28a6989f6fa1bb2c4f2d51201cf99d3dd875df6fbd96b23b \
     --hash=sha256:08beddf13648eb95f8d867350f6a018a4be2e5ad54c8d8caed89ebca558b2818 \
@@ -57,6 +61,10 @@ protobuf==5.27.3 \
     --hash=sha256:c84eee2c71ed83704f1afbf1a85c3171eab0fd1ade3b399b3fad0884cbcca8bf \
     --hash=sha256:dcb307cd4ef8fec0cf52cb9105a03d06fbb5275ce6d84a6ae33bc6cf84e0a07b
     # via -r software/thunderscope/requirements.in
+pyqtdarktheme-fork==2.3.2 \
+    --hash=sha256:3ea94fed5df262d960378409357c63032639f749794d766f41a45ad8558b2523 \
+    --hash=sha256:d96ee64f0884678fad9b6bc352d5e37d84ca786fa60ed32ffaa7e6c6bc67e964
+    # via -r software/thunderscope/requirements.in
 pyqtgraph==0.13.7 \
     --hash=sha256:64f84f1935c6996d0e09b1ee66fe478a7771e3ca6f3aaa05f00f6e068321d9e3 \
     --hash=sha256:7754edbefb6c367fa0dfb176e2d0610da3ada20aa7a5318516c74af5fb72bf7a

src/software/thunderscope/thunderscope_config.py

@@ -11,7 +11,7 @@
     WidgetStretchData,
 )
 import pyqtgraph
-from qt_material import apply_stylesheet
+import qdarktheme
 import signal
 import os
 
@@ -39,11 +39,7 @@ def initialize_application() -> None:
     app = pyqtgraph.mkQApp("Thunderscope")
 
     # Setup stylesheet
-    extra = {
-        # Make thunderscope more dense
-        "density_scale": "-2",
-    }
-    apply_stylesheet(app, theme="dark_blue.xml", extra=extra)
+    qdarktheme.setup_theme()
 
 
 def configure_robot_view_fullsystem(