My first Elm App: Visualize IMDb Ratings of any TV Show's Episodes

[utkarshkukreti]

Hi everyone!

This is my first real application in Elm: https://tv.obtuse.io/.

I built it because IMDb recently removed the page which showed all episodes of a TV series in a single table and because http://graphtv.kevinformatics.com/ stopped working. The feedback on /r/television yesterday was really encouraging.

All the code is available here: https://github.com/obtuseio/tv. The Elm code lives in the front directory.

My favorite part in building this application was this:

type Column
    = Number
    | Rating
    | Votes


type Order
    = Asc
    | Desc


type alias Model =
    { ...
    , sort :
        { by : Column
        , order : Order
        }
    }

In an earlier prototype written in Vue.js I had to use strings for both of these which meant typos could result in runtime errors. Elm made sure I never assigned an invalid value to either and that I pattern matched every possible case in the sorting logic.

I’m open to any feedback/criticism on the UI/UX and/or code!

[mthadley]

Wow, this is a really cool little App! It was very interesting to see the trends for some of the recent shows I’ve been watching. Legitimately fun and useful.

Looking forward to taking a look at the code when I get a chance!

[ianmackenzie]

Agreed, the UI is really nice and straightforward to use! My only suggestion would be to highlight the corresponding graph point when hovering over an episode in the list, and vice versa.

Did you use Highcharts because you were used to it or because you weren’t able to find something with enough functionality in Elm? Have you taken a look at elm-plot? Having everything in pure Elm would almost certainly make my highlighting request much easier =)

As for the pendingRequests field in your model, have you looked at an approach like remotedata?

[utkarshkukreti]

Thanks for checking it out!

My only suggestion would be to highlight the corresponding graph point when hovering over an episode in the list, and vice versa.

I thought about this but I don’t think this would be useful as you can only see a few episodes at the top of the table when the graph is visible.

Did you use Highcharts because you were used to it or because you weren’t able to find something with enough functionality in Elm?

It was both. I’ve used Highcharts in the past and it has really nice touch screen support for tooltips that I think would take a lot of time to reimplement with the current Elm libraries.

As for the pendingRequests field in your model, have you looked at an approach like remotedata?

I hadn’t heard of that library. The reason I have pendingRequests: Int is because I’m sometimes making more than 1 remote request, one for the index and one for the selected TV show. I’m not too happy with that and I will switch to using Maybe / Lists in a better way. I’ve filed an issue for this.

[utkarshkukreti]

Thank you for the krisajenkins/remotedata suggestion! I removed pendingRequests with that. I’m still not handling errors the right way but this will make it much easier when I do. (commit)

[utkarshkukreti]

I just fixed one bug and implemented three new features: https://github.com/obtuseio/tv/issues?q=is%3Aissue+is%3Aclosed.

During development, there was only one runtime error and that was caused by a bug in the JS code which invokes Highcharts using a Port.

[Collin]

Super cool little app! It got me thinking of some similar style things I may want to build myself and I’ll for sure be using this as an example