objc.io

00:06 Today we'll start a new project exploring Apple's Swift Async Algorithms package, which provides algorithms built on top of AsyncSequence. We like to think of this as a reactive library because it adds a lot of reactive operators, such as merge, zip, and combineLatest.

00:30 When working with reactive operators, we like to check the visualizations on RxMarbles to understand what the different operators do. Today, we'll try to rebuild the same interface by generating random events and visualizing the output of various async algorithms using SwiftUI.

00:59 The first things we'll do are defining a model and thinking of a way to visualize an array of events. In the next episode, we'll put this to use and see how we can combine event arrays.

Model

01:19 We write an Identifiable struct called Event. We'll also need to compare events, so we make it Hashable. And since we'll be doing async stuff, we mark it as Sendable. For the ID, we want something that's stable over time — by using an Int, the ID can be the same value every time we launch the app, which will help with animations. In addition to the identifier, Event also has properties for a timestamp, a value, and a color:

struct Event: Identifiable, Hashable, Sendable {
    var id: Int
    var time: TimeInterval
    var color: Color = .green
    var value: Value
}

02:15 We create a Value enum to store values that can be either a string or an integer:

enum Value: Hashable, Sendable {
    case int(Int)
    case string(String)
}

03:16 The compiler complains that Color isn't Sendable. The warning comes with a fix-it to silence the warning, even though it doesn't actually fix any of the problems that might arise from not being Sendable:

@preconcurrency import SwiftUI

03:38 For viewers who are following along: we've downloaded the latest Swift toolchain from the Swift.org website. This will be required once we start using Swift Async Algorithms in an upcoming episode.

04:08 We also need some sample data, so we paste in two arrays — one containing .int events, and one with .string events. The events in both arrays are sorted to have ascending time values, the integers all have a red color, and the string events are slightly offset in time compared to the integer events. Finally, we make sure to use distinct IDs for all events, because we'll be combining the arrays into one array:

var sampleInt: [Event] = [
    .init(id: 0, time:  0, color: .red, value: .int(1)),
    .init(id: 1, time:  1, color: .red, value: .int(2)),
    .init(id: 2, time:  2, color: .red, value: .int(3)),
    .init(id: 3, time:  5, color: .red, value: .int(4)),
    .init(id: 4, time:  8, color: .red, value: .int(5)),
]

var sampleString: [Event] = [
    .init(id: 100_0, time:  1.5, value: .string("a")),
    .init(id: 100_1, time:  2.5, value: .string("b")),
    .init(id: 100_2, time:  4.5, value: .string("c")),
    .init(id: 100_3, time:  6.5, value: .string("d")),
    .init(id: 100_4, time:  7.5, value: .string("e")),
]

Timeline View

04:56 Next, we want to build a timeline view that visualizes events as circles on a horizontal axis. To lay out the events on a timeline, we need to know the overall duration for the timeline. We'll be showing multiple timelines stacked on top of one another, each with different events, and these timelines should use the same duration. That's why we can't just take the maximum time from the events array; we need to be able to pass the duration in from the outside:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {

    }
}

06:13 To position the events on the axis, we also need to know the size of the view, so we add a geometry reader to measure the available width. When we use a geometry reader, most often it's to measure a view and propagate the dimensions up as a preference. This time, however, we use a top-level geometry reader, because we want to place event views inside it, and we want the timeline view to take up the proposed width:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in

        }
        .frame(height: 50)
    }
}

07:08 Let's now try to draw some circles. We start with a leading-aligned ZStack. Inside the stack view, we loop over the events using a ForEach view:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                ForEach(events) { event in

                }
            }
        }
        .frame(height: 50)
    }
}

07:35 We extend Value to conform it to View by displaying the string or integer value as a Text:

extension Value: View {
    var body: some View {
        switch self {
        case .int(let i): Text("\(i)")
        case .string(let s): Text(s)
        }
    }
}

08:48 In TimelineView, we add each event's value as a view to the ZStack, applying both a fixed frame and a background layer containing a circle filled with the event's color:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                ForEach(events) { event in
                    event.value
                        .frame(width: 30, height: 30)
                        .background {
                            Circle().fill(event.color)
                        }
                }
            }
        }
        .frame(height: 50)
    }
}

09:25 We add a TimelineView to ContentView, passing in the sample array containing the integer events. For the timeline's duration, we pass in the last event's time value. This already draws the events, but they're all placed on top of each other:

struct ContentView: View {
    var body: some View {
        VStack {
            TimelineView(events: sampleInt, duration: sampleInt.last!.time)
        }
    }
}

10:04 We override the .leading alignment of the views to give them the correct position on the timeline. We find this position by dividing each event's time by the timeline's duration, and by scaling that by the available width:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                ForEach(events) { event in
                    event.value
                        .frame(width: 30, height: 30)
                        .background {
                            Circle().fill(event.color)
                        }
                        .alignmentGuide(.leading) { dim in
                            let relativeTime = event.time / duration
                            return -proxy.size.width * relativeTime
                        }
                }
            }
        }
        .frame(height: 50)
    }
}

11:03 The last event is now drawn out of bounds. To fix this, we need to subtract the width of one circle from the available width:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                ForEach(events) { event in
                    event.value
                        .frame(width: 30, height: 30)
                        .background {
                            Circle().fill(event.color)
                        }
                        .alignmentGuide(.leading) { dim in
                            let relativeTime = event.time / duration
                            return -(proxy.size.width-30) * relativeTime
                        }
                }
            }
        }
        .frame(height: 50)
    }
}

Multiple Timelines

11:32 Let's also add a timeline with the second array of sample events. For the total duration of the timelines, we get the maximum time from the last events of both arrays:

struct ContentView: View {
    var duration: TimeInterval {
        max(sampleInt.last!.time, sampleString.last!.time)
    }

    var body: some View {
        VStack {
            TimelineView(events: sampleInt, duration: duration)
            TimelineView(events: sampleString, duration: duration)
        }
    }
}

12:14 The timelines are now aligned on their first event, even though these events have different times. Adding Color.clear to the timeline's stack view fixes the alignment, because it has a leading alignment value of zero:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                Color.clear
                ForEach(events) { event in
                    event.value
                        .frame(width: 30, height: 30)
                        .background {
                            Circle().fill(event.color)
                        }
                        .alignmentGuide(.leading) { dim in
                            let relativeTime = event.time / duration
                            return -(proxy.size.width-30) * relativeTime
                        }
                }
            }
        }
        .frame(height: 50)
    }
}

12:44 But rather than Color.clear, it'd make more sense to add some tick marks to the timeline — one at every whole second:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                ForEach(0..<Int(duration.rounded(.up))) { tick in
                    Rectangle()
                        .frame(width: 1)
                        .foregroundColor(.secondary)
                        .alignmentGuide(.leading) { dim in
                            let relativeTime = CGFloat(tick) / duration
                            return -(proxy.size.width-30) * relativeTime
                        }
                }
                ForEach(events) { event in
                    event.value
                        .frame(width: 30, height: 30)
                        .background {
                            Circle().fill(event.color)
                        }
                        .alignmentGuide(.leading) { dim in
                            let relativeTime = event.time / duration
                            return -(proxy.size.width-30) * relativeTime
                        }
                }
            }
        }
        .frame(height: 50)
    }
}

14:01 It'd be nicer to center the tick marks on the circles, so we offset them by half the width of a circle:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                ForEach(0..<Int(duration.rounded(.up))) { tick in
                    Rectangle()
                        .frame(width: 1)
                        .foregroundColor(.secondary)
                        .alignmentGuide(.leading) { dim in
                            let relativeTime = CGFloat(tick) / duration
                            return -(proxy.size.width-30) * relativeTime
                        }
                }
                .offset(x: 15)

                ForEach(events) { event in
                    event.value
                        .frame(width: 30, height: 30)
                        .background {
                            Circle().fill(event.color)
                        }
                        .alignmentGuide(.leading) { dim in
                            let relativeTime = event.time / duration
                            return -(proxy.size.width-30) * relativeTime
                        }
                }
            }
        }
        .frame(height: 50)
    }
}

14:31 We also add a rectangle that's one point high to show the timeline's horizontal axis:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                Rectangle()
                    .fill(Color.secondary)
                    .frame(height: 1)

                ForEach(0..<Int(duration.rounded(.up))) { tick in
                    Rectangle()
                        .frame(width: 1)
                        .foregroundColor(.secondary)
                        .alignmentGuide(.leading) { dim in
                            let relativeTime = CGFloat(tick) / duration
                            return -(proxy.size.width-30) * relativeTime
                        }
                }
                .offset(x: 15)

                ForEach(events) { event in
                    event.value
                        .frame(width: 30, height: 30)
                        .background {
                            Circle().fill(event.color)
                        }
                        .alignmentGuide(.leading) { dim in
                            let relativeTime = event.time / duration
                            return -(proxy.size.width-30) * relativeTime
                        }
                }
            }
        }
        .frame(height: 50)
    }
}

14:56 We add some padding around the VStack containing all timelines:

struct ContentView: View {
    var duration: TimeInterval {
        max(sampleInt.last!.time, sampleString.last!.time)
    }

    var body: some View {
        VStack {
            TimelineView(events: sampleInt, duration: duration)
            TimelineView(events: sampleString, duration: duration)
        }
        .padding(20)
    }
}

15:17 As a final tweak, we adjust the timeline's fixed height so that the flexible tick marks are the same height as the circles:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in
            // ...
        }
        .frame(height: 30)
    }
}

15:57 For the next part, it'll be useful to add a tooltip showing the time of an event. We can use the help modifier for this:

struct TimelineView: View {
    var events: [Event]
    var duration: TimeInterval

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                // ...

                ForEach(events) { event in
                    event.value
                        .frame(width: 30, height: 30)
                        .background {
                            Circle().fill(event.color)
                        }
                        .alignmentGuide(.leading) { dim in
                            let relativeTime = event.time / duration
                            return -(proxy.size.width-30) * relativeTime
                        }
                        .help("\(event.time)")
                }
            }
        }
        .frame(height: 30)
    }
}

Next Steps

16:51 In the next episode, we'll convert our sample arrays into streams so that we can apply one of the async operators from the Swift Async Algorithms package. One of the simplest operators is merge, which takes all values of two streams and combines them into a single stream. We'll then take the result of this operation and visualize it in a timeline.

17:40 We also want to make the timeline interactive. By moving values up and down the timeline, we can see how that influences the result of merge and other operators.