New section for algorithms and category maps

[vanessavmac]

Summary

Add a new algorithms overview. Allow users to view the algorithm URI from the identification summary.

Related Issues

Closes #683

Screenshots

Algorithm details and overview


Pipeline links to algorithms

Identification summary links to algorithm

[netlify]

✅ Deploy Preview for antenna-preview ready!

Name	Link
🔨 Latest commit	d49b952
🔍 Latest deploy log	https://app.netlify.com/sites/antenna-preview/deploys/67f8c33a2a2e780008ce2a43
😎 Deploy Preview	https://deploy-preview-785--antenna-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 72 (🔴 down 8 from production) Accessibility: 89 (no change from production) Best Practices: 92 (no change from production) SEO: 100 (no change from production) PWA: 80 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mihow]

This is looking great Vanessa! FYI, Anna just merged a big change to the project overview change. So make sure to bring this branch up-to-date with main. But you may need her help as well. She added routes to detail pages for all of the tabbed views, so now you can link to a specific algorithm modal!

[annavik]

Hi Vanessa! Great work on this!

Yes as Michael said we have made some updates to the overview! Please sync with main and try include this as a page under our new section "Processing". Also I think creating a route for the algorithm details would be nice, I just did it for some other dialog views, like pipeline details. Happy to jump on a call and provide more details here, give me a ping! :)

Some early thoughts on the UI:

• I think the field "URI" is a bit long to present in UI this way. What do you think about skip in table view and present as an external link button in detail view?
• I think the field "Category Map ID" requires some more context. What do you think about skip in table view and present as an external link button (?) in detail view, with some more information?
• What do you think about including algorithm description in table view?
• Can we try streamline column titles and field labels to use "Sentence case" instead of "Title Case"?
• Sorting seems to not be working, although presented as an available option in UI.
• The external link button in identifications tab looks a bit misaligned and is also missing some margin.
• I think we should try integrate this work with pipeline details, maybe simplify the algorithm section a bit in this view and link to algorithm details, to make UI less fragmented.

[annavik]

This is just a suggestion, but for pipeline details, I was thinking perhaps we could do something like this?

[vanessavmac]

Thanks for the feedback @annavik ! I made some of the changes, a few I had some questions about:

I think the field "URI" is a bit long to present in UI this way. What do you think about skip in table view and present as an external link button in detail view?
done

I think the field "Category Map ID" requires some more context. What do you think about skip in table view and present as an external link button (?) in detail view, with some more information?

I added this new section to the algorithm details called "Category Map Details." What do you think about this? I'm currently using a MinimalNestedModelSerializer for category maps to only provide the category map id and URI, but I can change this depending on what values we'd like to display in this section.

What do you think about including algorithm description in table view?

Yes I think that would be good, but main concern here is it might get long -- I added it to test so let me know what you think.

Can we try streamline column titles and field labels to use "Sentence case" instead of "Title Case"?

Updated, hopefully I didn't miss any, will keep this in mind in future

Sorting seems to not be working, although presented as an available option in UI.

I'm not sure how to solve this bug, I used the same component structure as the pipelines so I'm not sure why this is happening. Could we sync up on this?

The external link button in identifications tab looks a bit misaligned and is also missing some margin.

Yes, is there a standard way/best practice I should be following for adding custom styling to components?

In particular, this is the component that would need to be styled

<Link to={identification.algorithm.uri}>
  <Tooltip content={identification.algorithm.description}>
    <div className={styles.details}>
      {identification.algorithm.name}
      <Icon
        type={IconType.ExternalLink}
        theme={IconTheme.Primary}
        size={16}
      />
    </div>
  </Tooltip>
</Link>

I think we should try integrate this work with pipeline details, maybe simplify the algorithm section a bit in this view and link to algorithm details, to make UI less fragmented.

I agree, I think it's probably best to go over this in a call. I'll ping you!

[vanessavmac]

TODOs

• See category map details (with a link on it) -- anna will send me a code snippet for a button
• sorting might be a backend issue (might just remove sort key from columns.tsx

I think we should try integrate this work with pipeline details, maybe simplify the algorithm section a bit in this view and link to algorithm details, to make UI less fragmented.

talk with michael about this

[mihow]

Some notes from discussion with Anna:

• Fix link to algorithm detail page from the occurrence prediction (currently links to the Algorithm URI instead)
• Link between Algorithms & Pipelines where possible
• Link to the Category Map API view
• Add number of species / categories to Algorithm view if possible
• Add fields allowed to be sorted on in the API view (ID, name, task_type, etc)
• We had a number of ideas to improve the algorithm and pipeline pages, but it would be great to split this into a follow-up PR after the basic detail page is available.

[annavik]

TODOs

• See category map details (with a link on it) -- anna will send me a code snippet for a button
• sorting might be a backend issue (might just remove sort key from columns.tsx

I think we should try integrate this work with pipeline details, maybe simplify the algorithm section a bit in this view and link to algorithm details, to make UI less fragmented.

talk with michael about this

Here is a code snipped for how to style an external HTML link as an icon button:

import { ExternalLinkIcon } from 'lucide-react'
import { buttonVariants } from 'nova-ui-kit'

<a
  className={buttonVariants({
    size: 'small',
    variant: 'outline',
  })}
  href="Some URL"
  rel="noreferrer"
  target="_blank"
>
  <span>Some label</span>
  <ExternalLinkIcon className="w-4 h-4 ml-2" />
</a>

[vanessavmac]

Link between Algorithms & Pipelines where possible

Let me know if there's anywhere I can add this -- I was thinking inside the Algorithms list in "Pipeline Details" but the table component doesn't allow customizing links inside the columns

Add number of species / categories to Algorithm view if possible

What's the best way to retrieve number of species? For example, if I visit a category map API endpoint, do I just count the number of labels? Or the number of data elements? http://localhost:8000/api/v2/ml/labels/11/

Add fields allowed to be sorted on in the API view (ID, name, task_type, etc)

This might be a backend bug, but all of the fields (Except updated at and sorted at) cannot be sorted

Aside: I can address all these points in a follow up PR since they might require more planning/investigating

[annavik]

Thanks for the updates Vanessa! Here is a short summary of what I would like to do when we meet:

• Connect pipeline view with algorithm view (using links)
• Open all external links in new tabs
• If internal link, skip external link icon
• Limit description column width
• Reorganize the order of fields a bit

After this I think we can merge! :) Remaining items would be:

• Present number of categories
• Fix sorting
• Present category API link similar to API link in occurrence detail view (maybe?)

[annavik]

Thanks for these new views! 🥳 From my side, I think we can merge this!

[vanessavmac]

Nice, thanks @annavik for all the help! @mihow Can we go ahead and merge?

[mihow]

Thanks so much for bringing this over the finish line @vanessavmac and @annavik! I went ahead and added the category counts and sortable fields! The category count was a slightly new challenge since we are using a special Postgres ArrayField, but it works quite well now and is fast.

[mihow]

@annavik the one thing that isn't working for me is clicking on the name of an algorithm in the identification details of an occurrence. Is that saved for the for #804? I see some code in this PR for the click action, so just checking.

[annavik]

@annavik the one thing that isn't working for me is clicking on the name of an algorithm in the identification details of an occurrence. Is that saved for the for #804? I see some code in this PR for the click action, so just checking.

That we do intend to fix! I'll have a quick look! :)

[annavik]

@annavik the one thing that isn't working for me is clicking on the name of an algorithm in the identification details of an occurrence. Is that saved for the for #804? I see some code in this PR for the click action, so just checking.

That we do intend to fix! I'll have a quick look! :)

Hmm this is still working for me, we did update the UI kit lib component with a new prop here, maybe you need to rebuild your container if your are testing locally?

Screen.Recording.2025-04-11.at.08.50.35.mov

[annavik]

Thanks so much for bringing this over the finish line @vanessavmac and @annavik! I went ahead and added the category counts and sortable fields! The category count was a slightly new challenge since we are using a special Postgres ArrayField, but it works quite well now and is fast.

Thanks Michael! It's great to see the count 🙌 For the sorting I just pushed some small tweaks to streamline default order, etc.

[annavik]

Also I added a few updates to processing services and pipeline views, to keep behavior consistent with links and things, even if not fully related to this PR. Ok I think that was the last polish!

[mihow]

Thank you @annavik! I still couldn't get the link to work after running yarn install and yarn build but I went ahead and deployed, and it works on live! Soo sweet. And it's very slick how you get get from Processing Service details -> Pipeline -> Algorithm now!