Sort systems by duration in Debugger (#124)

CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog][kac], and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- Added a button to the Debugger's system list to sort by run time.
+
 ### Fixed
 
 - The debugger now gracefully handles cyclic tables.

lib/debugger/ui.luau

@@ -126,8 +126,17 @@ local function ui(debugger, loop)
 				end
 			end
 
+			local sortByDuration, setSortByDuration = plasma.useState(false)
+
 			plasma.space(15)
-			plasma.heading("SYSTEMS")
+			plasma.row({ verticalAlignment = Enum.VerticalAlignment.Center }, function()
+				plasma.heading("SYSTEMS")
+
+				if plasma.button(`sort by: {sortByDuration and "duration" or "order"}`):clicked() then
+					setSortByDuration(not sortByDuration)
+				end
+			end)
+
 			plasma.space(10)
 
 			local durations = {}
@@ -198,6 +207,12 @@ local function ui(debugger, loop)
 					})
 				end
 
+				if sortByDuration then
+					table.sort(listOfSystems, function(a, b)
+						return (durations[a.system] or 0) > (durations[b.system] or 0)
+					end)
+				end
+
 				local systemList = custom.selectionList(listOfSystems, custom)
 				local selected = systemList:selected()
 				local rightClicked = systemList:rightClicked()

lib/debugger/widgets/selectionList.luau

@@ -127,9 +127,10 @@ return function(Plasma)
 
 		Plasma.useEffect(function()
 			refs.mainText.Text = text
+			refs.index.Text = index or ""
 			refs.button.container.Icon.Text = icon or ""
 			refs.button.container.Icon.Visible = icon ~= nil
-		end, text, icon)
+		end, text, icon, index)
 
 		refs.button.container.sideText.Visible = sideText ~= nil
 		refs.button.container.sideText.Text = if sideText ~= nil then sideText else ""