thecacophonyproject / cacophony-browse Goto Github PK
View Code? Open in Web Editor NEWThe web interface for the Cacophony Project API
Home Page: https://browse.cacophony.org.nz/
The web interface for the Cacophony Project API
Home Page: https://browse.cacophony.org.nz/
Identified in #62
The logo which should appear at the top left is missing at browse-test-beta.cacophony.org.nz. This is probably related to some recent webpack changes.
This could be confusing.
So I realised this when I was reviewing the last PR. The app booted up fine and I could navigate to the Groups page, but it never went beyond 'Loading...' This was because I hadn't updated the app.config.js file (which is an easy fix no trouble)
However, it made me realise that if there is a problem with the API or the user's internet connection, they will still be logged in (because the data is in local storage) but the app will not work. I'm sure there is a way that this is usually dealt with, but I don't know what it is! Perhaps it is to implement better error handling every time the API is accessed, or perhaps it is part of the router authentication check...?? @adbs1
As per the old web UI
There are continual requests like this:
:authority: api-test.cacophony.org.nz
:method: GET
:path: /api/v1/devices
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-GB,en-US;q=0.9,en;q=0.8
authorization: JWT ...
origin: http://localhost:8080
referer: http://localhost:8080/recordings
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/68.0.3440.106 Chrome/68.0.3440.106 Safari/537.36
With empty responses like this:
{"devices":{"count":0,"rows":[]},"success":true,"messages":["Completed get devices query."]}
Currently the integer user id is used.
For example, a notification that a query has completed isn't all that useful or necessary.
{requiresAuth: false} is currently the default but should be the exception, change the following accordingly:
} else if(to.matched.some(record => record.meta.requiresAuth)) {
return next({
path: '/login',
params: { nextUrl: to.fullPath }
});
}
When on the recordings screen the favicons are being loaded using a relative path which means the wrong URL is being used. For example, https://browse.cacophony.org.nz/recordings/favicon-32x32.png should be https://browse.cacophony.org.nz/favicon-32x32.png
This is probably a trivial fix.
As per previous UI
.. replace all usages of the JSON success property with the http status code.
They shouldn't push the rest of the page down.
When a user has no groups or devices an empty page is presented for these sections which looks like things might be broken. A message indicating there's nothing to show would be better.
Frontend will have to convert from username to user id (we should really fix this in the API server too).
The title is currently "cacophony-web-vue". "Cacophony Browser" or "Cacophony Project" would be better.
Screenshot compares new/Vuex on the left and old version on the right. As you can see, no user showing in user table when there should be.
I think the problem is groupData() computed property in GroupView.vue -> group.GroupUsers (which populates the b-table) doesn't exit. I think it should just use group.Users (group.Users.GroupUsers exists but doesn't have any useful info)
When the custom tag entry field is used (via the + button) the addition of the tag fails. It's then not possible to add any more tags, even using the quick tag buttons.
The other prev/next buttons work but the prev/next buttons for "interesting" recordings result in a "no recording" error.
As per previous UI
Similar to TheCacophonyProject/cacophony-web#113
Identified in #62
If "Audio" or "Video and Audio" is selected can Tag Types and Animals be disabled (and their values ignored). Those don't currently make sense for audio recordings.
Screenshot compares new/Vuex on the left and old version on the right. I like how it was easy to change groups in the old version. It was a bit clunky and didn't work so well on mobile, but I think it would be good to have similar in the new version also. If there isn't space for a full list of devices, perhaps a 'choose a different group' type button, or back-ish button, or maybe hide the groups list behind a \/ arrow or something....
index.template.ejs
currently refers to the favicons in src/assets/favicon
which only works when the frontend is run in dev mode. Figure out how to get them included in the build and refer to them in the dist
output instead. I'm pretty sure there's a way to get webpack to treat the favicons as dependencies so they get handled correctly.
Device and groups names are currently sorted by id number which isn't all that useful
This error is reliably seen the developer console when viewing a recording:
vendors~prod~staging.bundle.js:38 TypeError: Cannot read property 'devicename' of undefined
at a.r (prod~staging.bundle.js:1)
at a.t._render (vendors~prod~staging.bundle.js:38)
at a.<anonymous> (vendors~prod~staging.bundle.js:38)
at Te.get (vendors~prod~staging.bundle.js:38)
at new Te (vendors~prod~staging.bundle.js:38)
at vendors~prod~staging.bundle.js:38
at a.pn.$mount (vendors~prod~staging.bundle.js:38)
at a.pn.$mount (vendors~prod~staging.bundle.js:38)
at init (vendors~prod~staging.bundle.js:38)
at vendors~prod~staging.bundle.js:38
It looks like when querying by the end date, the time is set to 00:00 which doesn't give what the user expects.
This is no longer required
Indicate audio device (:speaker: ) or thermal device (:film_strip:)
When the recordings page loads it calls the signedUrl API with a null jwt
argument. It seems that it's acting before the recording details have been set.
The page then goes on to load the recording correctly. All this isn't really visible to the user.
Also, remove "first name" and "last name" fields.
Addition of users to devices
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.