Data visualisations - first attempts

[arthurmcgregor]

Hi, after some feedback... @mjs @CameronRP

I've created a new page /visualisations for testing purposes. This should draw a graph showing the total number of recordings for each device you have access to. For me it looks OK, for admins I suspect it will be a bit of a mess! Would love to see a screenshot of what it looks like for you to see whether this approach is OK or not. (Mine is below)

Currently it runs one API request per device, with a limit of 1 to minimise the data transfer, and is using the 'count' value that is returned to draw the graph. This approach works when conditions (such as date/duration) are added as well, although I haven't built a front for that yet.

[mjs]

Wow, you're fast!

I've tried it out and it's not very practical as-is when there's lots of devices as it takes a couple of minutes to finish making all the requests. I suggest you make a single query for the time range to find all the recordings and tags in one go and then fill in the other devices that don't have recordings.

For now, it's probably also fine to only include video devices and leave audio out - although we will want to have be able to select between audio, thermal video or both eventually.

[mjs]

It would also be helpful to alphabetically sort the device names for display so that the order is predictable.

[arthurmcgregor]

@mjs Is this faster? I've changed the approach to API calls.

Is it alphabetical? I've added a sorting function but don't have enough devices to test if it works.

Changing the query input should be straightforward further down the line...

[mjs]

It's much faster now, and also looks much better. Thanks!

Here's how it looks for me:

The biggest single improvement that could be made now is getting all the audio devices out of the chart.

[arthurmcgregor]

@mjs Glad it's faster!

I'm getting all the devices by calling https://api-test.cacophony.org.nz/api/v1/devices Is there any way to filter the API request so that I can limit to audio/video/both? It doesn't appear that the device information that is returned has any sort of flag to indicate which sort they are. If they have a recording I should be able to work it out from that but won't know for devices with no recordings in the selected time period.

The other alternative is to only show devices on the graph if they have recordings during that time period (which means I can filter out audio devices based on the recording type or simply exclude them if they have no recordings)

[CameronRP]

@arthurmcgregor Nice work! To filter the devices I think it would be best to show the devices just from one group at a time. You can do a call to the group API with the where field just being an empty JSON and it will return all the groups that that user can access. Then when doing a recordings API request you can add the GroupId to the request {"GroupId": 6} and you should just get recording from that group.

[CameronRP]

The above method just filters recordings from a group but not the actual devices. To get just the list of devices in a group you can use the group API. It will have the list of devices for each group.

[CameronRP]

Just manually added a filter to the request. Here is what is looks like for a group "akaroa01" and "livingsprings"

[arthurmcgregor]

OK I've gone about as far as I want to go with this at the moment because when we change to Vue (or React or whatever) the process will be significantly different, and hopefully easier, with regards to updating the graph with new data. In addition, if I understood correctly what you told me the other day, then audio & thermal recordings will be combined somehow in the API which will change how things work here as well I assume.

So I've made the following changes which should make this a viable, if limited, feature for now:

• Hidden the device type buttons (which were never functional)
• Only showing results for devices where there are recordings (but listing any devices without recordings beneath the graph so users know which ones are not showing) -> hopefully this will make the graph more readable when you have lots of devices
• Added a menu link to the navbar

I will create an issue with the ideas from this discussion which have not yet been implemented, just to keep track of things :-)

[mjs]

Closing this now that this work has been done in the newer Vue port