Refactor subtree highlight handling in PatchVisualizer and DomLabel components

- Replaced subtreeHighlightBinding with subtreeHighlightInfo for improved clarity and functionality.
- Updated transparency logic in SelectionOption to utilize the new subtree highlight structure.
- Adjusted state management in PatchVisualizer to accommodate the new highlight callback mechanism.

plugin/src/App/Components/PatchVisualizer/DomLabel.lua

@@ -80,67 +80,36 @@ function SelectionOption:render()
 		-- Use wider button for "Studio" text (6 chars vs 4 for others)
 		local buttonWidth = if props.text == "Studio" then 44 else 36
 
-		-- Transparency logic with hover effect
+		-- Check if this button is subtree-highlighted (parent's matching button is hovered)
-		-- Combines real hover state with subtree highlight binding so the matching
+		local subtreeInfo = props.subtreeHighlightInfo
-		-- button on child nodes looks hovered when a parent's button is hovered.
-		local bgTransparency, txtTransparency
-		local subtreeBinding = props.subtreeHighlightBinding
 		local ancestorIds = props.ancestorIds
+		local subtreeHov = subtreeInfo ~= nil
+			and ancestorIds ~= nil
+			and ancestorIds[subtreeInfo.nodeId] == true
+			and subtreeInfo.optionType == props.optionType
+		local effectiveHovered = isHovered or subtreeHov
 
-		if subtreeBinding and ancestorIds then
+		-- Transparency logic with hover effect
-			local optionType = props.optionType
+		local bgTransparency, txtTransparency
-			local joined = Roact.joinBindings({
-				transparency = props.transparency,
-				highlight = subtreeBinding,
-			})
-
-			bgTransparency = joined:map(function(values)
-				local t = values.transparency
-				local info = values.highlight
-				local subtreeHov = info ~= nil and ancestorIds[info.nodeId] == true and info.optionType == optionType
-				local hov = isHovered or subtreeHov
-
-				if isParentOnly then
-					return if hov then 0.2 + (0.8 * t) else 0.5 + (0.5 * t)
-				elseif isSelected then
-					return if hov then 0 + (1 * t) else 0.1 + (0.9 * t)
-				else
-					return if hov then 0.5 + (0.5 * t) else 0.7 + (0.3 * t)
-				end
-			end)
-
-			txtTransparency = joined:map(function(values)
-				local t = values.transparency
-				local info = values.highlight
-				local subtreeHov = info ~= nil and ancestorIds[info.nodeId] == true and info.optionType == optionType
-				local hov = isHovered or subtreeHov
-
-				if isParentOnly then
-					return if hov then 0 + t else 0.3 + (0.7 * t)
-				else
-					return t
-				end
-			end)
-		else
-			-- Fallback: no subtree highlight available
 		if isParentOnly then
+			-- Parent-only: partially transparent, less so when hovering the button
 			bgTransparency = props.transparency:map(function(t)
-					return if isHovered then 0.2 + (0.8 * t) else 0.5 + (0.5 * t)
+				return if effectiveHovered then 0.2 + (0.8 * t) else 0.5 + (0.5 * t)
 			end)
 			txtTransparency = props.transparency:map(function(t)
-					return if isHovered then 0 + t else 0.3 + (0.7 * t)
+				return if effectiveHovered then 0 + t else 0.3 + (0.7 * t)
 			end)
 		else
+			-- Normal buttons: show hover effect by reducing transparency
 			bgTransparency = props.transparency:map(function(t)
 				if isSelected then
-						return if isHovered then 0 + (1 * t) else 0.1 + (0.9 * t)
+					return if effectiveHovered then 0 + (1 * t) else 0.1 + (0.9 * t)
 				else
-						return if isHovered then 0.5 + (0.5 * t) else 0.7 + (0.3 * t)
+					return if effectiveHovered then 0.5 + (0.5 * t) else 0.7 + (0.3 * t)
 				end
 			end)
 			txtTransparency = props.transparency
 		end
-		end
 
 		return e("TextButton", {
 			Size = UDim2.new(0, buttonWidth, 0, 18),
@@ -220,7 +189,7 @@ local function SelectionRadio(props)
 			layoutOrder = 1,
 			hasChildren = hasChildren,
 			isParentOnly = isParentOnly,
-			subtreeHighlightBinding = props.subtreeHighlightBinding,
+			subtreeHighlightInfo = props.subtreeHighlightInfo,
 			ancestorIds = props.ancestorIds,
 			onSubtreeHoverStart = props.onSubtreeHoverStart,
 			onSubtreeHoverEnd = props.onSubtreeHoverEnd,
@@ -243,7 +212,7 @@ local function SelectionRadio(props)
 			layoutOrder = 2,
 			hasChildren = hasChildren,
 			isParentOnly = isParentOnly,
-			subtreeHighlightBinding = props.subtreeHighlightBinding,
+			subtreeHighlightInfo = props.subtreeHighlightInfo,
 			ancestorIds = props.ancestorIds,
 			onSubtreeHoverStart = props.onSubtreeHoverStart,
 			onSubtreeHoverEnd = props.onSubtreeHoverEnd,
@@ -266,7 +235,7 @@ local function SelectionRadio(props)
 			layoutOrder = 3,
 			hasChildren = hasChildren,
 			isParentOnly = isParentOnly,
-			subtreeHighlightBinding = props.subtreeHighlightBinding,
+			subtreeHighlightInfo = props.subtreeHighlightInfo,
 			ancestorIds = props.ancestorIds,
 			onSubtreeHoverStart = props.onSubtreeHoverStart,
 			onSubtreeHoverEnd = props.onSubtreeHoverEnd,
@@ -596,17 +565,17 @@ function DomLabel:render()
 				isParentOnly = props.patchType == nil,
 				onSelectionChange = props.onSelectionChange,
 				onSubtreeSelectionChange = props.onSubtreeSelectionChange,
-				-- Subtree hover highlight: pass binding and ancestors to child buttons
+				-- Subtree hover highlight: pass info and ancestors to child buttons
-				subtreeHighlightBinding = props.subtreeHighlightNodeId,
+				subtreeHighlightInfo = props.subtreeHighlightInfo,
 				ancestorIds = props.ancestorIds,
 				onSubtreeHoverStart = function(optionType)
-					if props.setSubtreeHighlightNodeId then
+					if props.onSubtreeHighlightChange then
-						props.setSubtreeHighlightNodeId({ nodeId = props.nodeId, optionType = optionType })
+						props.onSubtreeHighlightChange({ nodeId = props.nodeId, optionType = optionType })
 					end
 				end,
 				onSubtreeHoverEnd = function()
-					if props.setSubtreeHighlightNodeId then
+					if props.onSubtreeHighlightChange then
-						props.setSubtreeHighlightNodeId(nil)
+						props.onSubtreeHighlightChange(nil)
 					end
 				end,
 			}),

plugin/src/App/Components/PatchVisualizer/init.lua

@@ -61,15 +61,25 @@ function PatchVisualizer:init()
 	-- causing expanded rows to visually glitch when unrelated props change.
 	self.nodeHeightBindings = {}
 
-	-- Binding for subtree hover preview: stores the nodeId whose children should highlight
+	self:setState({
-	self.subtreeHighlightNodeId, self.setSubtreeHighlightNodeId = Roact.createBinding(nil)
+		subtreeHighlightInfo = nil,
+	})
+
+	-- Callback for subtree hover preview: stores { nodeId, optionType } or nil
+	self.onSubtreeHighlightChange = function(info)
+		self:setState({ subtreeHighlightInfo = info })
+	end
 end
 
 function PatchVisualizer:willUnmount()
 	self.updateEvent:Destroy()
 end
 
-function PatchVisualizer:shouldUpdate(nextProps)
+function PatchVisualizer:shouldUpdate(nextProps, nextState)
+	if self.state.subtreeHighlightInfo ~= nextState.subtreeHighlightInfo then
+		return true
+	end
+
 	if self.props.patchTree ~= nextProps.patchTree then
 		return true
 	end
@@ -220,8 +230,8 @@ function PatchVisualizer:render()
 				onSubtreeSelectionChange = self.props.onSubtreeSelectionChange,
 				-- Subtree hover highlight props
 				ancestorIds = ancestorIds,
-				subtreeHighlightNodeId = self.subtreeHighlightNodeId,
+				subtreeHighlightInfo = self.state.subtreeHighlightInfo,
-				setSubtreeHighlightNodeId = self.setSubtreeHighlightNodeId,
+				onSubtreeHighlightChange = self.onSubtreeHighlightChange,
 			})
 
 			if isFinalChild then