Merge pull request #28613 from bdach/control-point-table-is-bad

Improve performance of editor tables

osu.Android.props

@@ -10,7 +10,7 @@
     <EmbedAssembliesIntoApk>true</EmbedAssembliesIntoApk>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="ppy.osu.Framework.Android" Version="2024.625.0" />
+    <PackageReference Include="ppy.osu.Framework.Android" Version="2024.627.0" />
   </ItemGroup>
   <PropertyGroup>
     <!-- Fody does not handle Android build well, and warns when unchanged.

osu.Game/Screens/Edit/EditorTable.cs

@@ -1,189 +0,0 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
-// See the LICENCE file in the repository root for full licence text.
-
-using System;
-using System.Diagnostics;
-using osu.Framework.Allocation;
-using osu.Framework.Extensions.LocalisationExtensions;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
-using osu.Framework.Input.Events;
-using osu.Framework.Localisation;
-using osu.Game.Graphics;
-using osu.Game.Graphics.Containers;
-using osu.Game.Graphics.Sprites;
-using osu.Game.Overlays;
-using osuTK.Graphics;
-
-namespace osu.Game.Screens.Edit
-{
-    public abstract partial class EditorTable : TableContainer
-    {
-        public event Action<Drawable>? OnRowSelected;
-
-        private const float horizontal_inset = 20;
-
-        protected const float ROW_HEIGHT = 25;
-
-        public const int TEXT_SIZE = 14;
-
-        protected readonly FillFlowContainer<RowBackground> BackgroundFlow;
-
-        // We can avoid potentially thousands of objects being added to the input sub-tree since item selection is being handled by the BackgroundFlow
-        // and no items in the underlying table are clickable.
-        protected override bool ShouldBeConsideredForInput(Drawable child) => child == BackgroundFlow && base.ShouldBeConsideredForInput(child);
-
-        protected EditorTable()
-        {
-            RelativeSizeAxes = Axes.X;
-            AutoSizeAxes = Axes.Y;
-
-            Padding = new MarginPadding { Horizontal = horizontal_inset };
-            RowSize = new Dimension(GridSizeMode.Absolute, ROW_HEIGHT);
-
-            AddInternal(BackgroundFlow = new FillFlowContainer<RowBackground>
-            {
-                RelativeSizeAxes = Axes.Both,
-                Depth = 1f,
-                Padding = new MarginPadding { Horizontal = -horizontal_inset },
-                Margin = new MarginPadding { Top = ROW_HEIGHT }
-            });
-        }
-
-        protected int GetIndexForObject(object? item)
-        {
-            for (int i = 0; i < BackgroundFlow.Count; i++)
-            {
-                if (BackgroundFlow[i].Item == item)
-                    return i;
-            }
-
-            return -1;
-        }
-
-        protected virtual bool SetSelectedRow(object? item)
-        {
-            bool foundSelection = false;
-
-            foreach (var b in BackgroundFlow)
-            {
-                b.Selected = ReferenceEquals(b.Item, item);
-
-                if (b.Selected)
-                {
-                    Debug.Assert(!foundSelection);
-                    OnRowSelected?.Invoke(b);
-                    foundSelection = true;
-                }
-            }
-
-            return foundSelection;
-        }
-
-        protected object? GetObjectAtIndex(int index)
-        {
-            if (index < 0 || index > BackgroundFlow.Count - 1)
-                return null;
-
-            return BackgroundFlow[index].Item;
-        }
-
-        protected override Drawable CreateHeader(int index, TableColumn? column) => new HeaderText(column?.Header ?? default);
-
-        private partial class HeaderText : OsuSpriteText
-        {
-            public HeaderText(LocalisableString text)
-            {
-                Text = text.ToUpper();
-                Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold);
-            }
-        }
-
-        public partial class RowBackground : OsuClickableContainer
-        {
-            public readonly object Item;
-
-            private const int fade_duration = 100;
-
-            private readonly Box hoveredBackground;
-
-            public RowBackground(object item)
-            {
-                Item = item;
-
-                RelativeSizeAxes = Axes.X;
-                Height = 25;
-
-                AlwaysPresent = true;
-
-                CornerRadius = 3;
-                Masking = true;
-
-                Children = new Drawable[]
-                {
-                    hoveredBackground = new Box
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Alpha = 0,
-                    },
-                };
-            }
-
-            private Color4 colourHover;
-            private Color4 colourSelected;
-
-            [BackgroundDependencyLoader]
-            private void load(OverlayColourProvider colours)
-            {
-                colourHover = colours.Background1;
-                colourSelected = colours.Colour3;
-            }
-
-            protected override void LoadComplete()
-            {
-                base.LoadComplete();
-
-                updateState();
-                FinishTransforms(true);
-            }
-
-            private bool selected;
-
-            public bool Selected
-            {
-                get => selected;
-                set
-                {
-                    if (value == selected)
-                        return;
-
-                    selected = value;
-                    updateState();
-                }
-            }
-
-            protected override bool OnHover(HoverEvent e)
-            {
-                updateState();
-                return base.OnHover(e);
-            }
-
-            protected override void OnHoverLost(HoverLostEvent e)
-            {
-                updateState();
-                base.OnHoverLost(e);
-            }
-
-            private void updateState()
-            {
-                hoveredBackground.FadeColour(selected ? colourSelected : colourHover, 450, Easing.OutQuint);
-
-                if (selected || IsHovered)
-                    hoveredBackground.FadeIn(fade_duration, Easing.OutQuint);
-                else
-                    hoveredBackground.FadeOut(fade_duration, Easing.OutQuint);
-            }
-        }
-    }
-}

osu.Game/Screens/Edit/TableHeaderText.cs

@@ -0,0 +1,19 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Extensions.LocalisationExtensions;
+using osu.Framework.Localisation;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit
+{
+    public partial class TableHeaderText : OsuSpriteText
+    {
+        public TableHeaderText(LocalisableString text)
+        {
+            Text = text.ToUpper();
+            Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold);
+        }
+    }
+}

osu.Game/Screens/Edit/Timing/ControlPointList.cs

@@ -7,10 +7,8 @@ using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
 using osu.Game.Beatmaps.ControlPoints;
-using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterfaceV2;
 using osu.Game.Overlays;
@@ -21,12 +19,8 @@ namespace osu.Game.Screens.Edit.Timing
     public partial class ControlPointList : CompositeDrawable
     {
         private OsuButton deleteButton = null!;
-        private ControlPointTable table = null!;
-        private OsuScrollContainer scroll = null!;
         private RoundedButton addButton = null!;
 
-        private readonly IBindableList<ControlPointGroup> controlPointGroups = new BindableList<ControlPointGroup>();
-
         [Resolved]
         private EditorClock clock { get; set; } = null!;
 
@@ -36,9 +30,6 @@ namespace osu.Game.Screens.Edit.Timing
         [Resolved]
         private Bindable<ControlPointGroup?> selectedGroup { get; set; } = null!;
 
-        [Resolved]
-        private IEditorChangeHandler? changeHandler { get; set; }
-
         [BackgroundDependencyLoader]
         private void load(OverlayColourProvider colours)
         {
@@ -47,21 +38,10 @@ namespace osu.Game.Screens.Edit.Timing
             const float margins = 10;
             InternalChildren = new Drawable[]
             {
-                new Box
+                new ControlPointTable
-                {
-                    Colour = colours.Background4,
-                    RelativeSizeAxes = Axes.Both,
-                },
-                new Box
-                {
-                    Colour = colours.Background3,
-                    RelativeSizeAxes = Axes.Y,
-                    Width = ControlPointTable.TIMING_COLUMN_WIDTH + margins,
-                },
-                scroll = new OsuScrollContainer
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Child = table = new ControlPointTable(),
+                    Groups = { BindTarget = Beatmap.ControlPointInfo.Groups, },
                 },
                 new FillFlowContainer
                 {
@@ -105,20 +85,6 @@ namespace osu.Game.Screens.Edit.Timing
                     ? "+ Clone to current time"
                     : "+ Add at current time";
             }, true);
-
-            controlPointGroups.BindTo(Beatmap.ControlPointInfo.Groups);
-            controlPointGroups.BindCollectionChanged((_, _) =>
-            {
-                // This callback can happen many times in a change operation. It gets expensive.
-                // We really should be handling the `CollectionChanged` event properly.
-                Scheduler.AddOnce(() =>
-                {
-                    table.ControlGroups = controlPointGroups;
-                    changeHandler?.SaveState();
-                });
-            }, true);
-
-            table.OnRowSelected += drawable => scroll.ScrollIntoView(drawable);
         }
 
         protected override bool OnClick(ClickEvent e)

osu.Game/Screens/Edit/Timing/ControlPointTable.cs

@@ -2,149 +2,281 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
-using System.Collections.Generic;
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Pooling;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Input.Events;
+using osu.Framework.Localisation;
 using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Extensions;
 using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Overlays;
 using osu.Game.Screens.Edit.Timing.RowAttributes;
 using osuTK;
 
 namespace osu.Game.Screens.Edit.Timing
 {
-    public partial class ControlPointTable : EditorTable
+    public partial class ControlPointTable : CompositeDrawable
     {
-        [Resolved]
+        public BindableList<ControlPointGroup> Groups { get; } = new BindableList<ControlPointGroup>();
-        private Bindable<ControlPointGroup?> selectedGroup { get; set; } = null!;
 
-        [Resolved]
+        private const float timing_column_width = 300;
-        private EditorClock clock { get; set; } = null!;
+        private const float row_height = 25;
+        private const float row_horizontal_padding = 20;
 
-        public const float TIMING_COLUMN_WIDTH = 300;
+        [BackgroundDependencyLoader]
-
+        private void load(OverlayColourProvider colours)
-        public IEnumerable<ControlPointGroup> ControlGroups
         {
-            set
+            RelativeSizeAxes = Axes.Both;
+
+            InternalChildren = new Drawable[]
             {
-                int selectedIndex = GetIndexForObject(selectedGroup.Value);
+                new Box
-
-                Content = null;
-                BackgroundFlow.Clear();
-
-                if (!value.Any())
-                    return;
-
-                foreach (var group in value)
                 {
-                    BackgroundFlow.Add(new RowBackground(group)
+                    Colour = colours.Background4,
+                    RelativeSizeAxes = Axes.Both,
+                },
+                new Box
+                {
+                    Colour = colours.Background3,
+                    RelativeSizeAxes = Axes.Y,
+                    Width = timing_column_width + 10,
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.X,
+                    Height = row_height,
+                    Padding = new MarginPadding { Horizontal = row_horizontal_padding },
+                    Children = new Drawable[]
                     {
-                        // schedule to give time for any modified focused text box to lose focus and commit changes (e.g. BPM / time signature textboxes) before switching to new point.
+                        new TableHeaderText("Time")
-                        Action = () => Schedule(() =>
                         {
-                            SetSelectedRow(group);
+                            Anchor = Anchor.CentreLeft,
-                            clock.SeekSmoothlyTo(group.Time);
+                            Origin = Anchor.CentreLeft,
-                        })
+                        },
-                    });
+                        new TableHeaderText("Attributes")
-                }
+                        {
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Margin = new MarginPadding { Left = ControlPointTable.timing_column_width }
+                        },
+                    }
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding { Top = row_height },
+                    Child = new ControlPointRowList
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        RowData = { BindTarget = Groups, },
+                    },
+                },
+            };
+        }
 
-                Columns = createHeaders();
+        private partial class ControlPointRowList : VirtualisedListContainer<ControlPointGroup, DrawableControlGroup>
-                Content = value.Select(createContent).ToArray().ToRectangular();
+        {
+            [Resolved]
+            private Bindable<ControlPointGroup?> selectedGroup { get; set; } = null!;
 
-                // Attempt to retain selection.
+            public ControlPointRowList()
-                if (SetSelectedRow(selectedGroup.Value))
+                : base(row_height, 50)
-                    return;
+            {
+            }
 
-                // Some operations completely obliterate references, so best-effort reselect based on index.
+            protected override ScrollContainer<Drawable> CreateScrollContainer() => new OsuScrollContainer();
-                if (SetSelectedRow(GetObjectAtIndex(selectedIndex)))
-                    return;
 
-                // Selection could not be retained.
+            protected override void LoadComplete()
-                selectedGroup.Value = null;
+            {
+                base.LoadComplete();
+
+                selectedGroup.BindValueChanged(val =>
+                {
+                    // can't use `.ScrollIntoView()` here because of the list virtualisation not giving
+                    // child items valid coordinates from the start, so ballpark something similar
+                    // using estimated row height.
+                    var row = Items.FlowingChildren.SingleOrDefault(item => item.Row.Equals(val.NewValue));
+                    if (row == null)
+                        return;
+
+                    float minPos = Items.GetLayoutPosition(row) * row_height;
+                    float maxPos = minPos + row_height;
+
+                    if (minPos < Scroll.Current)
+                        Scroll.ScrollTo(minPos);
+                    else if (maxPos > Scroll.Current + Scroll.DisplayableContent)
+                        Scroll.ScrollTo(maxPos - Scroll.DisplayableContent);
+                });
             }
         }
 
-        protected override void LoadComplete()
+        public partial class DrawableControlGroup : PoolableDrawable, IHasCurrentValue<ControlPointGroup>
         {
-            base.LoadComplete();
+            public Bindable<ControlPointGroup> Current
-
-            // Handle external selections.
-            selectedGroup.BindValueChanged(g => SetSelectedRow(g.NewValue), true);
-        }
-
-        protected override bool SetSelectedRow(object? item)
-        {
-            if (!base.SetSelectedRow(item))
-                return false;
-
-            selectedGroup.Value = item as ControlPointGroup;
-            return true;
-        }
-
-        private TableColumn[] createHeaders()
-        {
-            var columns = new List<TableColumn>
             {
-                new TableColumn("Time", Anchor.CentreLeft, new Dimension(GridSizeMode.Absolute, TIMING_COLUMN_WIDTH)),
+                get => current.Current;
-                new TableColumn("Attributes", Anchor.CentreLeft),
+                set => current.Current = value;
-            };
+            }
 
-            return columns.ToArray();
+            private readonly BindableWithCurrent<ControlPointGroup> current = new BindableWithCurrent<ControlPointGroup>();
-        }
 
-        private Drawable[] createContent(ControlPointGroup group)
+            private Box background = null!;
-        {
+
-            return new Drawable[]
+            [Resolved]
+            private OverlayColourProvider colourProvider { get; set; } = null!;
+
+            [Resolved]
+            private Bindable<ControlPointGroup?> selectedGroup { get; set; } = null!;
+
+            [Resolved]
+            private EditorClock editorClock { get; set; } = null!;
+
+            [BackgroundDependencyLoader]
+            private void load()
             {
-                new ControlGroupTiming(group),
+                RelativeSizeAxes = Axes.Both;
-                new ControlGroupAttributes(group, c => c is not TimingControlPoint)
+
-            };
+                InternalChildren = new Drawable[]
+                {
+                    background = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = colourProvider.Background1,
+                        Alpha = 0,
+                    },
+                    new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Padding = new MarginPadding { Horizontal = row_horizontal_padding, },
+                        Children = new Drawable[]
+                        {
+                            new ControlGroupTiming { Group = { BindTarget = current }, },
+                            new ControlGroupAttributes(point => point is not TimingControlPoint)
+                            {
+                                Group = { BindTarget = current },
+                                Margin = new MarginPadding { Left = timing_column_width }
+                            }
+                        }
+                    }
+                };
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                selectedGroup.BindValueChanged(_ => updateState(), true);
+                FinishTransforms(true);
+            }
+
+            protected override void PrepareForUse()
+            {
+                base.PrepareForUse();
+
+                updateState();
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                updateState();
+                return true;
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                base.OnHoverLost(e);
+                updateState();
+            }
+
+            protected override bool OnClick(ClickEvent e)
+            {
+                // schedule to give time for any modified focused text box to lose focus and commit changes (e.g. BPM / time signature textboxes) before switching to new point.
+                var currentGroup = Current.Value;
+                Schedule(() =>
+                {
+                    selectedGroup.Value = currentGroup;
+                    editorClock.SeekSmoothlyTo(currentGroup.Time);
+                });
+                return true;
+            }
+
+            private void updateState()
+            {
+                bool isSelected = selectedGroup.Value?.Equals(current.Value) == true;
+
+                if (IsHovered || isSelected)
+                    background.FadeIn(100, Easing.OutQuint);
+                else
+                    background.FadeOut(100, Easing.OutQuint);
+
+                background.Colour = isSelected ? colourProvider.Colour3 : colourProvider.Background1;
+            }
         }
 
         private partial class ControlGroupTiming : FillFlowContainer
         {
-            public ControlGroupTiming(ControlPointGroup group)
+            public Bindable<ControlPointGroup> Group { get; } = new Bindable<ControlPointGroup>();
+
+            private OsuSpriteText timeText = null!;
+
+            [BackgroundDependencyLoader]
+            private void load()
             {
                 Name = @"ControlGroupTiming";
                 RelativeSizeAxes = Axes.Y;
-                Width = TIMING_COLUMN_WIDTH;
+                Width = timing_column_width;
                 Spacing = new Vector2(5);
                 Children = new Drawable[]
                 {
-                    new OsuSpriteText
+                    timeText = new OsuSpriteText
                     {
-                        Text = group.Time.ToEditorFormattedString(),
+                        Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold),
-                        Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Bold),
                         Width = 70,
                         Anchor = Anchor.CentreLeft,
                         Origin = Anchor.CentreLeft,
                     },
-                    new ControlGroupAttributes(group, c => c is TimingControlPoint)
+                    new ControlGroupAttributes(c => c is TimingControlPoint)
                     {
                         Anchor = Anchor.CentreLeft,
                         Origin = Anchor.CentreLeft,
+                        Group = { BindTarget = Group },
                     }
                 };
             }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                Group.BindValueChanged(_ => timeText.Text = Group.Value?.Time.ToEditorFormattedString() ?? default(LocalisableString), true);
+            }
         }
 
         private partial class ControlGroupAttributes : CompositeDrawable
         {
+            public Bindable<ControlPointGroup> Group { get; } = new Bindable<ControlPointGroup>();
+            private BindableList<ControlPoint> controlPoints { get; } = new BindableList<ControlPoint>();
+
             private readonly Func<ControlPoint, bool> matchFunction;
 
-            private readonly IBindableList<ControlPoint> controlPoints = new BindableList<ControlPoint>();
+            private FillFlowContainer fill = null!;
 
-            private readonly FillFlowContainer fill;
+            public ControlGroupAttributes(Func<ControlPoint, bool> matchFunction)
-
-            public ControlGroupAttributes(ControlPointGroup group, Func<ControlPoint, bool> matchFunction)
             {
                 this.matchFunction = matchFunction;
+            }
 
+            [BackgroundDependencyLoader]
+            private void load()
+            {
                 AutoSizeAxes = Axes.X;
                 RelativeSizeAxes = Axes.Y;
                 Name = @"ControlGroupAttributes";
@@ -156,20 +288,21 @@ namespace osu.Game.Screens.Edit.Timing
                     Direction = FillDirection.Horizontal,
                     Spacing = new Vector2(2)
                 };
-
-                controlPoints.BindTo(group.ControlPoints);
-            }
-
-            [BackgroundDependencyLoader]
-            private void load()
-            {
-                createChildren();
             }
 
             protected override void LoadComplete()
             {
                 base.LoadComplete();
-                controlPoints.CollectionChanged += (_, _) => createChildren();
+
+                Group.BindValueChanged(_ =>
+                {
+                    controlPoints.UnbindBindings();
+                    controlPoints.Clear();
+                    if (Group.Value != null)
+                        ((IBindableList<ControlPoint>)controlPoints).BindTo(Group.Value.ControlPoints);
+                }, true);
+
+                controlPoints.BindCollectionChanged((_, _) => createChildren(), true);
             }
 
             private void createChildren()

osu.Game/Screens/Edit/Timing/RowAttributes/AttributeProgressBar.cs

@@ -36,6 +36,7 @@ namespace osu.Game.Screens.Edit.Timing.RowAttributes
 
             BackgroundColour = overlayColours.Background6;
             FillColour = controlPoint.GetRepresentingColour(colours);
+            FinishTransforms(true);
         }
     }
 }

osu.Game/Screens/Edit/Verify/IssueList.cs

@@ -11,7 +11,6 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Beatmaps;
-using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterfaceV2;
 using osu.Game.Overlays;
 using osu.Game.Rulesets.Edit;
@@ -56,10 +55,9 @@ namespace osu.Game.Screens.Edit.Verify
                     Colour = colours.Background3,
                     RelativeSizeAxes = Axes.Both,
                 },
-                new OsuScrollContainer
+                table = new IssueTable
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Child = table = new IssueTable(),
                 },
                 new FillFlowContainer
                 {
@@ -101,9 +99,10 @@ namespace osu.Game.Screens.Edit.Verify
 
             issues = filter(issues);
 
-            table.Issues = issues
+            table.Issues.Clear();
-                           .OrderBy(issue => issue.Template.Type)
+            table.Issues.AddRange(issues
-                           .ThenBy(issue => issue.Check.Metadata.Category);
+                                  .OrderBy(issue => issue.Template.Type)
+                                  .ThenBy(issue => issue.Check.Metadata.Category));
         }
 
         private IEnumerable<Issue> filter(IEnumerable<Issue> issues)

osu.Game/Screens/Edit/Verify/IssueTable.cs

@@ -1,132 +1,239 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
-using System.Collections.Generic;
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Pooling;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Input.Bindings;
+using osu.Game.Overlays;
 using osu.Game.Rulesets.Edit.Checks.Components;
 
 namespace osu.Game.Screens.Edit.Verify
 {
-    public partial class IssueTable : EditorTable
+    public partial class IssueTable : CompositeDrawable
     {
-        private Bindable<Issue> selectedIssue = null!;
+        public BindableList<Issue> Issues { get; } = new BindableList<Issue>();
 
-        [Resolved]
+        public const float COLUMN_WIDTH = 70;
-        private VerifyScreen verify { get; set; } = null!;
+        public const float COLUMN_GAP = 10;
+        public const float ROW_HEIGHT = 25;
+        public const float ROW_HORIZONTAL_PADDING = 20;
+        public const int TEXT_SIZE = 14;
 
-        [Resolved]
+        [BackgroundDependencyLoader]
-        private EditorClock clock { get; set; } = null!;
+        private void load()
-
-        [Resolved]
-        private EditorBeatmap editorBeatmap { get; set; } = null!;
-
-        [Resolved]
-        private Editor editor { get; set; } = null!;
-
-        public IEnumerable<Issue> Issues
         {
-            set
+            InternalChildren = new Drawable[]
             {
-                Content = null;
+                new Container
-                BackgroundFlow.Clear();
-
-                if (!value.Any())
-                    return;
-
-                foreach (var issue in value)
                 {
-                    BackgroundFlow.Add(new RowBackground(issue)
+                    RelativeSizeAxes = Axes.X,
+                    Height = ROW_HEIGHT,
+                    Padding = new MarginPadding { Horizontal = ROW_HORIZONTAL_PADDING, },
+                    Children = new[]
                     {
-                        Action = () =>
+                        new TableHeaderText("Type")
                         {
-                            selectedIssue.Value = issue;
+                            Anchor = Anchor.CentreLeft,
-
+                            Origin = Anchor.CentreLeft,
-                            if (issue.Time != null)
-                            {
-                                clock.Seek(issue.Time.Value);
-                                editor.OnPressed(new KeyBindingPressEvent<GlobalAction>(GetContainingInputManager()!.CurrentState, GlobalAction.EditorComposeMode));
-                            }
-
-                            if (!issue.HitObjects.Any())
-                                return;
-
-                            editorBeatmap.SelectedHitObjects.Clear();
-                            editorBeatmap.SelectedHitObjects.AddRange(issue.HitObjects);
                         },
-                    });
+                        new TableHeaderText("Time")
+                        {
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Margin = new MarginPadding { Left = COLUMN_WIDTH + COLUMN_GAP },
+                        },
+                        new TableHeaderText("Message")
+                        {
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Margin = new MarginPadding { Left = 2 * (COLUMN_WIDTH + COLUMN_GAP) },
+                        },
+                        new TableHeaderText("Category")
+                        {
+                            Anchor = Anchor.CentreRight,
+                            Origin = Anchor.CentreRight,
+                        },
+                    }
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding { Top = ROW_HEIGHT, },
+                    Child = new IssueRowList
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        RowData = { BindTarget = Issues }
+                    }
+                }
+            };
+        }
+
+        private partial class IssueRowList : VirtualisedListContainer<Issue, DrawableIssue>
+        {
+            public IssueRowList()
+                : base(ROW_HEIGHT, 50)
+            {
+            }
+
+            protected override ScrollContainer<Drawable> CreateScrollContainer() => new OsuScrollContainer();
+        }
+
+        public partial class DrawableIssue : PoolableDrawable, IHasCurrentValue<Issue>
+        {
+            private readonly BindableWithCurrent<Issue> current = new BindableWithCurrent<Issue>();
+
+            private readonly Bindable<Issue> selectedIssue = new Bindable<Issue>();
+
+            private Box background = null!;
+            private OsuSpriteText issueTypeText = null!;
+            private OsuSpriteText issueTimestampText = null!;
+            private OsuSpriteText issueDetailText = null!;
+            private OsuSpriteText issueCategoryText = null!;
+
+            [Resolved]
+            private EditorClock clock { get; set; } = null!;
+
+            [Resolved]
+            private EditorBeatmap editorBeatmap { get; set; } = null!;
+
+            [Resolved]
+            private Editor editor { get; set; } = null!;
+
+            [Resolved]
+            private OverlayColourProvider colourProvider { get; set; } = null!;
+
+            public Bindable<Issue> Current
+            {
+                get => current.Current;
+                set => current.Current = value;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(VerifyScreen verify)
+            {
+                RelativeSizeAxes = Axes.X;
+                Height = ROW_HEIGHT;
+
+                InternalChildren = new Drawable[]
+                {
+                    background = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Padding = new MarginPadding { Horizontal = 20, },
+                        Children = new Drawable[]
+                        {
+                            issueTypeText = new OsuSpriteText
+                            {
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Bold),
+                            },
+                            issueTimestampText = new OsuSpriteText
+                            {
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Bold),
+                                Margin = new MarginPadding { Left = COLUMN_WIDTH + COLUMN_GAP },
+                            },
+                            new Container
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Padding = new MarginPadding
+                                {
+                                    Left = 2 * (COLUMN_GAP + COLUMN_WIDTH),
+                                    Right = COLUMN_GAP + COLUMN_WIDTH,
+                                },
+                                Child = issueDetailText = new OsuSpriteText
+                                {
+                                    Anchor = Anchor.CentreLeft,
+                                    Origin = Anchor.CentreLeft,
+                                    Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Medium)
+                                },
+                            },
+                            issueCategoryText = new OsuSpriteText
+                            {
+                                Anchor = Anchor.CentreRight,
+                                Origin = Anchor.CentreRight,
+                                Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Bold),
+                            }
+                        }
+                    }
+                };
+
+                selectedIssue.BindTo(verify.SelectedIssue);
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                selectedIssue.BindValueChanged(_ => updateState());
+                Current.BindValueChanged(_ => updateState(), true);
+                FinishTransforms(true);
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                updateState();
+                return true;
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                updateState();
+                base.OnHoverLost(e);
+            }
+
+            protected override bool OnClick(ClickEvent e)
+            {
+                selectedIssue.Value = current.Value;
+
+                if (current.Value.Time != null)
+                {
+                    clock.Seek(current.Value.Time.Value);
+                    editor.OnPressed(new KeyBindingPressEvent<GlobalAction>(GetContainingInputManager()!.CurrentState, GlobalAction.EditorComposeMode));
                 }
 
-                Columns = createHeaders();
+                if (current.Value.HitObjects.Any())
-                Content = value.Select((g, i) => createContent(i, g)).ToArray().ToRectangular();
+                {
+                    editorBeatmap.SelectedHitObjects.Clear();
+                    editorBeatmap.SelectedHitObjects.AddRange(current.Value.HitObjects);
+                }
+
+                return true;
+            }
+
+            private void updateState()
+            {
+                issueTypeText.Text = Current.Value.Template.Type.ToString();
+                issueTypeText.Colour = Current.Value.Template.Colour;
+                issueTimestampText.Text = Current.Value.GetEditorTimestamp();
+                issueDetailText.Text = Current.Value.ToString();
+                issueCategoryText.Text = Current.Value.Check.Metadata.Category.ToString();
+
+                bool isSelected = selectedIssue.Value == current.Value;
+
+                if (IsHovered || isSelected)
+                    background.FadeIn(100, Easing.OutQuint);
+                else
+                    background.FadeOut(100, Easing.OutQuint);
+
+                background.Colour = isSelected ? colourProvider.Colour3 : colourProvider.Background1;
             }
         }
-
-        protected override void LoadComplete()
-        {
-            base.LoadComplete();
-
-            selectedIssue = verify.SelectedIssue.GetBoundCopy();
-            selectedIssue.BindValueChanged(issue =>
-            {
-                SetSelectedRow(issue.NewValue);
-            }, true);
-        }
-
-        private TableColumn[] createHeaders()
-        {
-            var columns = new List<TableColumn>
-            {
-                new TableColumn(string.Empty, Anchor.CentreLeft, new Dimension(GridSizeMode.AutoSize)),
-                new TableColumn("Type", Anchor.CentreLeft, new Dimension(GridSizeMode.AutoSize, minSize: 60)),
-                new TableColumn("Time", Anchor.CentreLeft, new Dimension(GridSizeMode.AutoSize, minSize: 60)),
-                new TableColumn("Message", Anchor.CentreLeft),
-                new TableColumn("Category", Anchor.CentreRight, new Dimension(GridSizeMode.AutoSize)),
-            };
-
-            return columns.ToArray();
-        }
-
-        private Drawable[] createContent(int index, Issue issue) => new Drawable[]
-        {
-            new OsuSpriteText
-            {
-                Text = $"#{index + 1}",
-                Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Medium),
-                Margin = new MarginPadding { Right = 10 }
-            },
-            new OsuSpriteText
-            {
-                Text = issue.Template.Type.ToString(),
-                Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Bold),
-                Margin = new MarginPadding { Right = 10 },
-                Colour = issue.Template.Colour
-            },
-            new OsuSpriteText
-            {
-                Text = issue.GetEditorTimestamp(),
-                Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Bold),
-                Margin = new MarginPadding { Right = 10 },
-            },
-            new OsuSpriteText
-            {
-                Text = issue.ToString(),
-                Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Medium)
-            },
-            new OsuSpriteText
-            {
-                Text = issue.Check.Metadata.Category.ToString(),
-                Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.Bold),
-                Margin = new MarginPadding(10)
-            }
-        };
     }
 }

osu.Game/osu.Game.csproj

@@ -35,7 +35,7 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Realm" Version="11.5.0" />
-    <PackageReference Include="ppy.osu.Framework" Version="2024.625.0" />
+    <PackageReference Include="ppy.osu.Framework" Version="2024.627.0" />
     <PackageReference Include="ppy.osu.Game.Resources" Version="2024.622.0" />
     <PackageReference Include="Sentry" Version="4.3.0" />
     <!-- Held back due to 0.34.0 failing AOT compilation on ZstdSharp.dll dependency. -->

osu.iOS.props

@@ -23,6 +23,6 @@
     <RuntimeIdentifier>iossimulator-x64</RuntimeIdentifier>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="ppy.osu.Framework.iOS" Version="2024.625.0" />
+    <PackageReference Include="ppy.osu.Framework.iOS" Version="2024.627.0" />
   </ItemGroup>
 </Project>