Add visualisation of bpm (timing) changes to timeline

osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointGroup.cs

@@ -21,14 +21,11 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
 
         public TimelineControlPointGroup(ControlPointGroup group)
         {
-            Origin = Anchor.TopCentre;
-
             Group = group;
 
             RelativePositionAxes = Axes.X;
             RelativeSizeAxes = Axes.Y;
-
+            AutoSizeAxes = Axes.X;
-            Width = 1;
 
             X = (float)group.Time;
         }
@@ -40,6 +37,8 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
             controlPoints = (BindableList<ControlPoint>)Group.ControlPoints.GetBoundCopy();
             controlPoints.BindCollectionChanged((_, __) =>
             {
+                ClearInternal();
+
                 foreach (var point in controlPoints)
                 {
                     switch (point)
@@ -47,6 +46,10 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
                         case DifficultyControlPoint difficultyPoint:
                             AddInternal(new DifficultyPointPiece(difficultyPoint));
                             break;
+
+                        case TimingControlPoint timingPoint:
+                            AddInternal(new TimingPointPiece(timingPoint));
+                            break;
                     }
                 }
             }, true);

osu.Game/Screens/Edit/Compose/Components/Timeline/TimingPointPiece.cs

@@ -0,0 +1,57 @@
+// 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.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit.Compose.Components.Timeline
+{
+    public class TimingPointPiece : CompositeDrawable
+    {
+        private readonly BindableNumber<double> beatLength;
+        private OsuSpriteText bpmText;
+
+        public TimingPointPiece(TimingControlPoint point)
+        {
+            beatLength = point.BeatLengthBindable.GetBoundCopy();
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            Origin = Anchor.CentreLeft;
+            Anchor = Anchor.CentreLeft;
+
+            AutoSizeAxes = Axes.Both;
+
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    Alpha = 0.9f,
+                    Colour = ColourInfo.GradientHorizontal(colours.YellowDark, colours.YellowDark.Opacity(0.5f)),
+                    RelativeSizeAxes = Axes.Both,
+                },
+                bpmText = new OsuSpriteText
+                {
+                    Alpha = 0.9f,
+                    Padding = new MarginPadding(3),
+                    Font = OsuFont.Default.With(size: 40)
+                }
+            };
+
+            beatLength.BindValueChanged(beatLength =>
+            {
+                bpmText.Text = $"{60000 / beatLength.NewValue:n1} BPM";
+            }, true);
+        }
+    }
+}