Dashboard improvement ideas

[farski]

If you looking for PRs on the web UI, I'm starting to think about changes to work on. Here's a few that I've come up with:

1. Remove the Detection bar graph. Even in BirdNET-Pi I've never really understood the value of this, and it takes up a bunch of space. If there are people out there using it, I'd love to better understand what information it's conveying that is useful to them.
2. Add quick navigation controls for the date picker (i.e., arrows to move between days)
3. Enhance the date picker to support ranges. The default would still be "today", but it would also allow for selecting arbitrary ranges of dates. The results would still be rolled up by species and hour, as they currently are to generate the heat map, but it would reflect detections over multiple days (e.g., the robin 9AM table cell would be the total number of robins detected during the 9AM hour for all selected days). There would be a few predefined relative date ranges, like last 24 hours, this week, etc.
4. The option to expand a single species to show a table where the columns are hours (like the current table), but the rows are days. This would show the change of activity for that selected species over some period. If only a single day is selected in the date picker, this would show some number of days on either side of that day (or just some number of days in the past if today is selected), otherwise it will show the range (maybe with some limit if many days are selected).
5. A new column (replacing the Detections column) that shows how frequently the species is being detected (i.e., how rare it is). This would show the number of days the species was detected in the 28 days preceding the selected date range. This would also indicate if the bird have never been detected before.

Date range support is needed first, but if that gets implemented, it would allow for showing all activity since the last time someone loaded the dashboard. Meaning, if someone doesn't check the dashboard for 3 days, the next time they load it, the date picker would default to the last 3 days, so they get an overview of everything that's happened since they last checked in.

[evandrocsilva]

Olá, pessoal!

Estive lendo as sugestões propostas para aprimorar a interface do usuário e gostaria de compartilhar algumas impressões e ideias.

Primeiramente, concordo com a proposta de remover o gráfico de barras de detecção. Parece que ele não adiciona valor suficiente para justificar o espaço que ocupa na interface. Talvez, poderíamos substituí-lo por um componente mais interativo ou informativo que ofereça insights mais diretos sobre os dados coletados.

A ideia de adicionar controles de navegação rápida ao seletor de datas é excelente. Isso certamente melhoraria a usabilidade, permitindo aos usuários navegar mais facilmente entre os dias. Além disso, a funcionalidade de seleção de intervalos de datas parece ser um recurso extremamente útil, especialmente para análises de tendências a longo prazo ou comparações entre diferentes períodos.

A sugestão de expandir a visualização de uma única espécie para mostrar uma tabela com horas nas colunas e dias nas linhas é particularmente interessante. Isso poderia proporcionar uma visão clara da atividade da espécie ao longo do tempo, o que seria valioso para estudos comportamentais ou ambientais.

Em relação à minha própria experiência, estou atualmente desenvolvendo um software para gerenciar meus laudos de perícia grafotécnica. Este projeto tem me dado uma perspectiva valiosa sobre a importância de ter interfaces intuitivas e funcionalidades que realmente atendam às necessidades dos usuários finais. Estou sempre buscando formas de como a tecnologia pode melhor servir nossas necessidades específicas e, nesse sentido, as discussões aqui são sempre muito iluminadoras.

Aguardo ansiosamente para ver como essas sugestões serão implementadas e como elas poderão melhorar nossa eficiência e compreensão dos dados coletados. Obrigado por compartilharem suas ideias!

[isZumpo]

It all sounds great to me at least!

I can give some input on point one, about the bar graph. Personally I am using it to quickly identify where in the audio clip the actual bird sound is:

In this example graph I can see that there really only is something to listen to for the first half of it. Meaning that I can ignore the 2nd half. It can also be useful in a similar manner if there only is something at the end of the clip.

Though I agree, it is kind of a waste of space currently. Maybe the same functionality could be achieved in different ways?

[farski]

Ah, I do see a lot of value in having the spectrogram available (though I agree, maybe not showing all by default).

The bars I'm talking about are these ones:

[isZumpo]

Aha! Sorry for getting it wrong. Then I get what you mean, according to the source code 200 detections of a given species is required to fill it all the way to 100%, seems kind of rare to me. Not sure if it is there for a reason or just because birdnet-pi had it

[tphakala]

Not sure if it is there for a reason or just because birdnet-pi had it

No reason other than it was just a value I came up while doing that part of ui, on my stations it is quite often maxed out.

[tphakala]

Commit 0611c54 hides detections progress bar on a narrow screens

[farski]

Jotting this down for my own reference later, a quick and dirty way to calculate the values in No. 5:

WITH 
-- Get all distinct species in the selected range
species_in_range AS (
  SELECT scientific_name
  FROM notes 
  WHERE 
    date >= date('2024-04-01') 
    AND date < date('2024-04-01', '+3 day')
  GROUP BY scientific_name
), 
-- Look at the 28 days preceeding the selected range, and for each
-- species found in the selected range find the days where that 
-- species had any detections
previous_days_with_species_in_range AS (
  SELECT species_in_range.scientific_name, date
  FROM species_in_range 
  INNER JOIN notes ON species_in_range.scientific_name = notes.scientific_name
  WHERE 
    date >= date('2024-04-01', '-28 days')
    AND date < date('2024-04-01')
  GROUP BY species_in_range.scientific_name, date
)

-- For each species found in the selected range, return the number
-- of days in the preceeding 28 days where that species was detected
SELECT scientific_name, count() AS count_of_days_with_detections
FROM previous_days_with_species_in_range
GROUP BY scientific_name

[tomlut]

I like the bar graph as I can tell relative bird abundance for the day at a quick glance. Like all your other ideas though.

[PovilasID]

I was looking to do some damage to the UI myself (I am not a web dev but I saw a couple of fixes) but devcontainer crashed on me (Error response from daemon: error gathering device information while adding custom device "/dev/snd": no such file or directory)
You should really let up on requiring a device to be present to even spin it up. (I am on windows and device emulation is ... not doing that today )

Now to the point here are a couple of observations:
What

1. Drawer is wasted of space. It takes up 10-15 proc of screen real-estate with empty space. It has be either collapsible or menu can be moved to horizontal layout.
2. Reduce the size of spectrograms. I personally do not need them.. they looks cool but in the list view they are probably there just as quick debugging tool so you do not need a high quality picture to see mic was blown out by me picking up and introducing a bunch of noise that painted the spectrogram all white.
3. Add image of the bird. I am not bird person I do not know by hear how brown brambler or whatever looks 😆 I think it would be cool to learn what to look out for, so

How

1. Put drawer in it's own div. Now drawer class is attributed to the body element

   birdnet-go/views/index.html

   Line 18 in 8fe2171

   <body class="drawer min-h-screen bg-base-200 lg:drawer-open">

   
   This will allow you to independently abstract the drawer and header on the same level of abstraction aka you will be able to keep the header in the same place and not moving even if you open or close the drawer.
   I would recommend just getting a slim full width header with a hamburger menu toggle button that then can expand or collapse the drawer. That can be done by moving header outside of the drawers content. (You keep it in but... I hate moving buttons lol)
2. Change h-auto to h-20 at for inline spectrograms
   

   birdnet-go/views/fragments/speciesDetections.html

   Line 47 in 8fe2171

   <img loading="lazy" width="400" src="/spectrogram?clip={{urlquery .ClipName}}" alt="Spectrogram Image" class="max-w-full h-auto rounded-md"></a>

   
   yah it will distort them... you can make them shorter if you want they are making the any list huge.
3. whoBird has implemented bird images using Macaulay Library they have an API
   https://github.com/woheller69/whoBIRD/blob/91e7a5c295740803e9ef8742bd5c048677682f66/app/src/main/java/org/tensorflow/lite/examples/soundclassifier/MlWebViewClient.kt#L26
   Or you could always just query wikipedia and do wikipedia query https://en.wikipedia.org/w/api.php?action=query&prop=pageimages|pageprops&format=json&piprop=thumbnail&titles=Eurasian%20Blackcap&pithumbsize=300&redirects
   There can be small and do mean small thumbnail at the list detected birds or just at the latest detections since because of spectrograms those are already taller and there is risk you might actually still see the thing IRL 😆

[farski]

I have been slowly picking away at some of this work, but my dev environment setup right now is a major hurdle. So far the best setup I've found is running Linux in a VM (I use Macs), and using VSCode's remote coding extension to connect to a copy of the source code in the VM. Then I'm recompiling the whole thing after every HTML change, which is very fast, but still slows things down a lot when making small CSS changes.

If someone can recommend a better setup for easier development development of the project on a Mac I'm all ears – would love to be able to move faster on this.

[tphakala]

I just tested building on intel mac, Makefile build fails (I will fix this) but air build works as long as tensorflow source is available at ~/src/tensorflow and libtensorflowlite_c.dylib is in /usr/local/lib/ or otherwise system locatable.

@farski so unless there is specific need for you to build on Linux you can develop and build natively on mac, just use air to build.

[farski]

@tphakala Awesome, thank you I'll give that a shot.

[farski]

@tphakala I ran

mkdir ~/src
cd ~/src
git clone https://github.com/tensorflow/tensorflow.git
cd tensorflow
git checkout tags/v2.14.0

(I don't generally keep any code in ~/src), but when I run air realtime I'm getting the following error:

Is there anything else I should have to do to make those headers findable?

[tphakala]

Tensorflow src is likely in incorrect path. I just fixed Makefile to work on macOS, it will install tensorflow dependencies on first run so could you checkout latest code from github and test if Makefile build succeeds now? Just run make to build once.

One thing Makefile does not setup yet is tailwind and daisyUI components, these are required for air build to work.

Install tailwind and daisyUI with npm

npm install -D tailwindcss@latest
npm install -D daisyUI@latest

[farski]

I appreciate the help on this. It looks like maybe the Makefile is still not working fully for Arm/Apple Silicon Macs; I'm getting some ld: symbol(s) not found for architecture arm64 errors when I run it.