Swimlanes: a bookmark's changes as lanes of independent work 92574625ee9a

{% extends "base.html" %}

{% import "repo_tabs.html" as m %}

{% block title %}Swimlanes of {{ target.label }} · {{ repo.owner }}/{{ repo.name }}{% endblock %}

{% block bodyattrs %} data-repo="{{ repo.url }}"{% endblock %}

{% block tabs %}{% call m::tabs(repo, "changes") %}{% endblock %}

{% block mainclass %} class="wide"{% endblock %}

{% block content %}

<div class="head"><h1>Swimlanes <small>{{ target.label }} · {{ board.cards.len() }}{% if total > board.cards.len() %} newest of {{ total }}{% endif %} changes in {{ board.lanes }} lane{% if board.lanes != 1 %}s{% endif %}</small></h1>

<p class="small mute">Changes that do not depend on each other run in separate lanes, oldest on the left; an edge joins a change to what it depends on. There are no merge nodes: parallel work simply stays parallel. <a href="{{ repo.url }}/changes/{{ target.label }}">list view</a></p></div>

{% if board.cards.is_empty() %}<p class="empty">No changes.</p>{% else %}

<div class="lanes-board" style="overflow-x: auto">

<svg width="{{ board.width }}" height="{{ board.height }}" viewBox="0 0 {{ board.width }} {{ board.height }}" role="img" aria-label="Swimlanes of {{ target.label }}">

  {% for e in board.edges %}<path d="{{ e }}" class="lane" fill="none"/>{% endfor %}

  {% for c in board.cards %}

  <a href="{{ repo.url }}/change/{{ c.hash }}">

    <title>{{ c.short }} {{ c.title }}</title>

    <rect x="{{ c.x }}" y="{{ c.y }}" width="{{ crate::render::graph::CARD_W }}" height="{{ crate::render::graph::CARD_H }}" rx="6" class="node{% if c.head %} head{% endif %}"/>

    <text x="{{ c.x + 8 }}" y="{{ c.y + 14 }}" class="small">{{ c.short }}</text>

    <text x="{{ c.x + 8 }}" y="{{ c.y + 28 }}" class="small">{{ c.title }}</text>

  </a>

  {% endfor %}

</svg>

</div>

{% endif %}

{% endblock %}

/// A card on the swimlane board (hub spec §6.7): one change, placed by its

/// lane (row) and its age (column, oldest on the left).

#[derive(Clone, Debug, PartialEq)]

pub struct Card {

    pub hash: String,

    pub short: String,

    pub title: String,

    pub x: usize,

    pub y: usize,

    pub head: bool,

}

/// The swimlane board: cards and the dependency edges between them.

#[derive(Clone, Debug, PartialEq)]

pub struct Board {

    pub cards: Vec<Card>,

    /// SVG path data, from a change to each change of the board it depends on.

    pub edges: Vec<String>,

    pub width: usize,

    pub height: usize,

    pub lanes: usize,

}

pub const CARD_W: usize = 150;

pub const CARD_H: usize = 34;

const GAP_X: usize = 40;

const GAP_Y: usize = 22;

/// Lay `changes` (newest first, as for [`layout`]) out as swimlanes: each

/// lane a row, time running left to right. Independent work sits in

/// separate lanes; there are no merge nodes, only dependency edges.

pub fn board(changes: &[crate::repos::view::ChangeView]) -> Board {

    let input: Vec<(String, Vec<String>)> = changes.iter().map(|c| (c.hash.clone(), c.deps.clone())).collect();

    let rows = layout(&input);

    let n = changes.len();

    let pos: std::collections::HashMap<&str, (usize, usize)> = changes

        .iter()

        .zip(&rows)

        .enumerate()

        .map(|(i, (c, r))| (c.hash.as_str(), ((n - 1 - i) * (CARD_W + GAP_X) + 10, r.lane * (CARD_H + GAP_Y) + 10)))

        .collect();

    let cards = changes

        .iter()

        .map(|c| {

            let (x, y) = pos[c.hash.as_str()];

            let mut title: String = c.title.chars().take(22).collect();

            if c.title.chars().count() > 22 {

                title.push('…');

            }

            Card { hash: c.hash.clone(), short: c.short.clone(), title, x, y, head: c.head }

        })

        .collect();

    let mut edges = Vec::new();

    for c in changes {

        let (cx, cy) = pos[c.hash.as_str()];

        for d in &c.deps {

            if let Some(&(dx, dy)) = pos.get(d.as_str()) {

                // From the dependency's right edge to the change's left edge.

                let (x1, y1, x2, y2) = (dx + CARD_W, dy + CARD_H / 2, cx, cy + CARD_H / 2);

                let mid = (x1 + x2) / 2;

                edges.push(format!("M{x1} {y1} C{mid} {y1} {mid} {y2} {x2} {y2}"));

            }

        }

    }

    let lanes = width(&rows).max(1);

    Board { cards, edges, width: n.max(1) * (CARD_W + GAP_X) + 20, height: lanes * (CARD_H + GAP_Y) + 20, lanes }

}

#[cfg(test)]

mod board_tests {

    use super::*;

    use crate::repos::view::{AuthorView, ChangeView, SigView};

    fn change(hash: char, title: &str, deps: &[char]) -> ChangeView {

        let h = |c: char| std::iter::repeat_n(c, 64).collect::<String>();

        ChangeView {

            hash: h(hash),

            short: h(hash)[..8].to_string(),

            title: title.into(),

            body: String::new(),

            author: AuthorView { name: String::new(), email: String::new(), key: String::new(), unknown: true, account: None },

            when_ms: 0,

            deps: deps.iter().map(|d| h(*d)).collect(),

            head: false,

            resolution: false,

            signature: SigView::Unsigned,

            labels: vec![],

        }

    }

    #[test]

    fn independent_work_gets_its_own_lane() {

        // Newest first: c depends on a; b is independent of both.

        let changes = vec![change('c', "c on a", &['a']), change('b', "b alone", &[]), change('a', "base", &[])];

        let b = board(&changes);

        assert_eq!(b.cards.len(), 3);

        let card = |h: char| b.cards.iter().find(|c| c.hash.starts_with(h)).unwrap().clone();

        assert!(card('a').x < card('b').x && card('b').x < card('c').x, "oldest on the left");

        assert_eq!(card('a').y, card('c').y, "a chain stays in one lane");

        assert_ne!(card('b').y, card('a').y, "independent work in its own lane");

        assert_eq!(b.edges.len(), 1, "one dependency, no merge nodes");

        assert!(b.lanes >= 2);

        let long = board(&[change('d', "a title far longer than the card can hold", &[])]);

        assert!(long.cards[0].title.ends_with('…') && long.cards[0].title.chars().count() == 23);

    }

}

/// Changes a swimlane board shows at most.

const BOARD: usize = 60;

#[derive(Template)]

#[template(path = "lanes.html")]

pub struct LanesPage {

    shell: Shell,

    repo: RepoShell,

    target: view::RefTarget,

    total: usize,

    board: graph::Board,

}

/// `GET /{owner}/{name}/lanes/{ref}`: a bookmark's newest changes as

/// swimlanes (hub spec §6.7): independent work in separate lanes, time

/// left to right, dependencies as edges and no merge nodes.

pub async fn lanes(

    State(app): State<Shared>,

    viewer: Viewer,

    Path((owner, name, r)): Path<(String, String, String)>,

) -> Result<Page<LanesPage>, Error> {

    let shell = Shell::new(&app, &format!("/{owner}/{name}/lanes/{r}"), &viewer);

    let (repo, row, role) = lookup(&app, &shell, &viewer, &owner, &name).await?;

    let spec = r.clone();

    let h = app

        .repos

        .read(&repo, move |repo, cache| {

            let target = view::resolve(repo, cache, &spec)?;

            view::history(repo, cache, target, None, 0, BOARD)

        })

        .await

        .map_err(|e| Error::from_repo(shell.clone(), e))?;

    let board = graph::board(&h.entries);

    Ok(Page(LanesPage { shell, repo: RepoShell::new(&app, &row, "changes").with_role(role), target: h.target, total: h.total, board }))

}

        .route("/{owner}/{name}/lanes/{r}", get(history::lanes))

/// Swimlanes (hub spec §6.7): independent changes in their own lanes,

/// dependency edges, linked cards.

#[tokio::test(flavor = "multi_thread")]

async fn a_bookmark_shows_as_swimlanes() {

    let h = hub().await;

    let app = &h.app;

    let andy = call(app, "POST", "/register", None, None, None, Some("username=andy&email=a%40example.com&password=correct-horse-battery"))

        .await

        .cookie

        .unwrap();

    let page = call(app, "GET", "/new", None, Some(&andy), None, None).await;

    call(app, "POST", "/new", None, Some(&andy), None, Some(&format!("_csrf={}&owner=andy&name=demo", csrf_of(&page.body)))).await;

    let url = format!("{}/andy/demo", h.base);

    let work = tempfile::tempdir().unwrap();

    let w = work.path().to_path_buf();

    tokio::task::spawn_blocking(move || {

        let mut c = Repo::init(&w).unwrap();

        c.config.set("remote.origin.url", &url).unwrap();

        c.config.set("remote.origin.token", "site").unwrap();

        c.save_config().unwrap();

        // Two files edited independently: two lanes.

        write(&w, "a.txt", b"a\n");

        c.commit("add a", &[]).unwrap();

        write(&w, "b.txt", b"b\n");

        c.commit("add b", &[]).unwrap();

        write(&w, "a.txt", b"a\na2\n");

        c.commit("grow a", &[]).unwrap();

        assert!(c.push("origin", false).unwrap()[0].ok);

    })

    .await

    .unwrap();

    let hist = call(app, "GET", "/andy/demo/changes/main", None, None, None, None).await.body;

    assert!(hist.contains("/andy/demo/lanes/main"), "the history page links the board");

    let r = call(app, "GET", "/andy/demo/lanes/main", None, None, None, None).await;

    assert_eq!(r.status, StatusCode::OK, "{}", r.body);

    assert!(r.body.contains("3 changes in 2 lanes"), "{}", r.body);

    let start = r.body.find("<div class=\"lanes-board\"").unwrap();

    let board = &r.body[start..start + r.body[start..].find("</svg>").unwrap()];

    assert_eq!(board.matches("<rect ").count(), 3);

    assert_eq!(board.matches("<path d=\"M").count(), 1, "grow a depends on add a only");

    assert!(r.body.contains("grow a") && r.body.contains("/andy/demo/change/"));

}

**Swimlanes.** `/{owner}/{name}/lanes/{ref}` draws a bookmark's newest changes (up to 60) as a board: each lane of the shared lane layout (`oxy_core::lanes`, as `oxy log` and the list view use) is a row, time runs left to right, every change is a card linking to its page, and an edge joins a change to each change of the board it depends on. Independent work stays in separate lanes and there are no merge nodes, since Oxygen has none. The history page links to it.

<p class="small"><a href="{{ repo.url }}/lanes/{{ h.target.label }}">See as swimlanes</a> <span class="mute">(independent work side by side)</span></p>

/* Swimlanes (hub spec §6.7): cards on lanes, dependency edges between them. */

.lanes-board { border: 1px solid var(--line); background: var(--panel); padding: 6px; }

.lanes-board rect.node { fill: var(--soft); stroke: var(--acc); }

.lanes-board rect.node.head { stroke: var(--now); stroke-width: 2; }

.lanes-board a:hover rect.node { fill: var(--line); }

.lanes-board text { fill: var(--ink); font-size: 11px; }