Utopian.info - Moderator profile page

The last few days (since the 11th) I have been working on adding a moderator profile page to Utopian.info. I also made some small improvements, like adding a dropdown to the navbar with each category, updating some URLs etc...

Features

As mentioned above, I added a page with some information about each Utopian.io moderator. This page shows some general statistics about the moderator at the top of the page. All this information is calculated by iterating over all posts in the database that the moderator has reviewed, which is saved to a dictionary and passed to the template. Below this it has the four tabs "Reviews", "Activity", "Contributors" and "Categories".

Reviews

This tab shows the most recent reviews of the moderator. On the left it shows the category alongside the decision made. Next to this it shows the project the contribution was made to. On the right of this it shows the title (truncated), the author and when the contribution was reviewed (formatted nicely using the Python package timeago).

This was implemented by simply passing a list of contributions the moderator has reviewed to the template. In the template it uses a for loop to iterate over each contribution and most of the work went into making it look relatively nice. If you have been reading my previous posts, you know that I'm terrible at CSS, so it took ages before it looked okay. The code for the pagination was taken completely from here, so thankfully I didn't need to wrap my head around that as well.

Activity

This tab shows a graph of the moderator's activity, from when they reviewed their first contribution until now. Hovering over the graph shows the date and amount moderated of the nearest (vertically) point of the "All" plot. You can also use the legend to fade out plots from the graph.

def activity_plot(activity):
    x = activity["dates"]
    p = figure(plot_width=1100, plot_height=500, x_axis_type="datetime")

    legend = []
    for category, y in activity.items():
        if not category == "dates":
            colour = category_colour(category)
            line = p.line(x, y, line_width=2, color=colour, alpha=0.8,
                muted_color=colour, muted_alpha=0.2, name=category)
            legend.append((category.replace("-", " ").title(), [line]))
    legend = Legend(items=legend, location=(0, 0))

    p.add_tools(HoverTool(
        names=["all"],
        tooltips=[
            ( "date", "@x{%F}" ),
            ( "moderated", "@y")
        ],
        formatters={
            "x": "datetime",
        },
        mode="vline"
    ))

    p.add_layout(legend, "right")
    p.legend.click_policy="mute"
    script, div = components(p)
    return script, div

It was implemented using Bokeh and the above function. This function takes a dictionary containing information about the activity of a moderator (how much they moderated per day, per category which is calculated with the moderator_activity() function) and plots this for each category. Bokeh makes this very easy and the only thing that was relatively difficult to figure out was adding the HoverTool to the "All" plot only. Just like last time this returns a script and a div that are used to show the graph in the web application.

Contributors

This tab shows a moderator's most accepted and most rejected contributors. If a contributor is also a moderator, then their name is highlighted in purple and (M) is added to the front of their name.

This information was also calculated in the moderator_activity() function and is obviously very similar to the code used to calculate the leaderboards for the category pages. I also wanted to add some more information to the leaderboards, but I couldn't make it look right, so if anyone is up for the challenge just take a look at moderator_contributors.html!

Categories

This tab shows an overview of the categories a moderator has reviewed. It uses similar CSS to the "Reviews" tab, so I don't think I need to explain what is what.

Once again the implementation of this was relatively simple. A dictionary created in the function moderator_categories() is passed to the template and it rendered using a for loop.

Additional information

To see how to contribute and what my plans/roadmap are please check out this post or the README! I'm not sure what I'm going to implement next (probably a contributor page), but I will definitely start using the develop branch instead and use separate branches for specific features, so I can more easily link to commits for future contributions (I apologise for not doing this sooner!). I would also like to give a big shoutout to @scipio, @roj and @tobias-g as they have been a huge help in different ways regarding the implementation of some of the above features!

---

Posted on Utopian.io - Rewarding Open Source Contributors

---