CNN Summary - update new design of summary

[koonchaya]

Defer ticket #1571

Main

• [x] See breadcrumb to back to the cnn list page (CNN job/Job name)
• [ ] See cancel job button
• [ ] Remove other buttons (Pause, List)

Summary

📸Design https://www.figma.com/file/FGnP9kAFLDmraAFJf8OBAG/CNN-Roadmap?type=design&node-id=97-818&mode=design&t=ZHUK7hk8sPLLuM98-4

• [x] See model name
• See job progress

Design: https://www.figma.com/file/FGnP9kAFLDmraAFJf8OBAG/CNN-Roadmap?type=design&node-id=504-7596&mode=design&t=RyLSVq5IHvnCdwLq-4

• States with progress

  • [x] In progress
  • [x] Pause
  • [x] Done
  • [x] Error
  • [x] If progress from API is > 100 then shows 100 in the UI (to prevent the funny bar/number) e.g. 300%

• See input

  • [x] Same input data from the create job (All site, date, time, mins of recordings)

• See validation status

  • [x] Statuses: Unvalidated, Present, Not Present, Unknown with validation results (percentage)

• See output

  • [ ] Total number of species (Manual calculate on UI for now until #1616 is done)

[naluinui]

@koonchaya can we separate this page into 2 main tasks please? It would also be great if you could provide the expected outcome for each one.

This top part (which part of it might get done in https://github.com/rfcx/arbimon/issues/1571)

• breadcrumb to back to the cnn list page
• can pause, and stop job? (the function is not included in this sprint)
• ? not sure what in the hamburger menu ? (not included in this sprint) We can disable the button.

  Summary

• Can see model name
• Can see job progress
• can see input
  • Get the input data from the create job (All site, date, time, mins of recordings)
• can see validation status
  • Statuses: Unvalidated, Present, Not Present, Unknown

This species list part

• see list of species
• pagination (show # item per page)
• ? can click on one of species to go to result page of that species?
• ...

[naluinui]

Q: Will job progress update in real time? A: Yes it's currently updated in realtime. There is related bug to be fix about this too https://github.com/rfcx/arbimon/issues/1621

[RatreeOchn]

@naluinui What about loading status:

https://github.com/rfcx/arbimon/assets/51106210/ac2a97e0-b9c6-4c79-a52e-33970e06b843

[RatreeOchn]

Error

[naluinui]

That red box looks a bit weird. Is that in the design?

Other option - we can use this one without the the close button (at top right) https://www.figma.com/file/GjR3UAHkQyGvx1iZzdZdDw/%F0%9F%92%BB-Arbimon-Platform?type=design&mode=design&t=B3r2Gpyc87Vcf5DF-0

[naluinui]

For loading status, can we make it to be the same dimension as the content please?

[koonchaya]

@RatreeOchn Can you double check the colors of job states from here again?

[koonchaya]

@RatreeOchn

• [x] We should hide pause button for first iteration. When the job is in queue or in progress, hide pause button.

• [ ] Adjust the spacing of summary section same as design. Current

Design

[naluinui]

https://github.com/rfcx/arbimon/commit/f16826b14af67309cb12de25fb85ed9d7fe32f29#commitcomment-140538440 @RatreeOchn please also check here. I think we should remove "Pause job" button, keep "Cancel job"

[koonchaya]

@RatreeOchn Updated design https://www.figma.com/file/FGnP9kAFLDmraAFJf8OBAG/CNN-Roadmap?type=design&node-id=887-10461&mode=design&t=jQomdAVgvXsYW4Mc-4

• [ ] Change color of the input icons to #F9F6F2
• [ ] Add hover tooltip to input icons (Sites, Date, Time of day, Minutes of recordings)

[koonchaya]

@koonchaya create new ticket for the adjustments and comments from Tiffany.

[koonchaya]

List of things to be included in a new ticket

• [ ] https://github.com/rfcx/arbimon/issues/1505#issuecomment-2033785545
• [ ] https://github.com/rfcx/arbimon/issues/1505#issuecomment-2036194681

[koonchaya]

@grindarius Do we have the ticket of the api that we are fixing related to the summary detections?

[grindarius]

@grindarius Do we have the ticket of the api that we are fixing related to the summary detections?

If you mean ticket that's related to this issue then it's #1616

[koonchaya]

@RatreeOchn The job state is not correct. For example this job on the job page is done but on the summary page everything looks broken. https://arbimon.org/p/deep-project-sumatra/analyse/cnn/detail/31

[RatreeOchn]

@grindarius This endpoint /jobs/{jobId} got error :

{"statusCode":404,"error":"Not Found","message":"Data not found"}