Project

General

Profile

Actions

Feature #19504

closed

Breadcrumbs bar showing parent workflow for workflows steps and output collections

Added by Peter Amstutz 5 months ago. Updated about 1 month ago.

Status:
Resolved
Priority:
Normal
Assigned To:
Category:
Workbench2
Target version:
Start date:
11/17/2022
Due date:
% Done:

100%

Estimated time:
(Total: 0.00 h)
Story points:
-
Release relationship:
Auto

Files

Screenshot_20221117_101214.png (137 KB) Screenshot_20221117_101214.png Stephen Smith, 11/17/2022 03:26 PM
Screenshot_20221117_101122.png (152 KB) Screenshot_20221117_101122.png Stephen Smith, 11/17/2022 03:26 PM
Screenshot_20221206_150941.png (16.5 KB) Screenshot_20221206_150941.png Stephen Smith, 12/06/2022 08:11 PM
Screenshot from 2022-12-07 09-57-06.png (83.9 KB) Screenshot from 2022-12-07 09-57-06.png Sarah Zaranek, 12/07/2022 03:02 PM
Screenshot from 2022-12-07 09-58-33.png (141 KB) Screenshot from 2022-12-07 09-58-33.png Sarah Zaranek, 12/07/2022 03:02 PM
Screenshot_20221208_095349.png (23.4 KB) Screenshot_20221208_095349.png Stephen Smith, 12/08/2022 02:54 PM
Screenshot_20221208_095335.png (24.4 KB) Screenshot_20221208_095335.png Stephen Smith, 12/08/2022 02:54 PM
Screenshot_20221208_101754.png (31.7 KB) Screenshot_20221208_101754.png Stephen Smith, 12/08/2022 03:18 PM
Screenshot from 2022-12-15 11-47-17.png (57.2 KB) Screenshot from 2022-12-15 11-47-17.png Sarah Zaranek, 12/15/2022 04:56 PM
Screenshot from 2022-12-15 11-51-55.png (66.8 KB) Screenshot from 2022-12-15 11-51-55.png Sarah Zaranek, 12/15/2022 04:56 PM

Subtasks 1 (0 open1 closed)

Task #19508: Review 19504-breadcrumbsResolvedStephen Smith11/17/2022

Actions

Related issues

Related to Arvados - Feature #19467: Design for navigation from collections and workflow steps (breadcrumbs)ResolvedSarah Zaranek

Actions
Actions #1

Updated by Peter Amstutz 5 months ago

  • Related to Feature #19467: Design for navigation from collections and workflow steps (breadcrumbs) added
Actions #2

Updated by Peter Amstutz 5 months ago

  • Assigned To set to Stephen Smith
Actions #3

Updated by Stephen Smith 5 months ago

  • Status changed from New to In Progress
Actions #4

Updated by Peter Amstutz 4 months ago

  • Target version changed from 2022-09-28 sprint to 2022-10-12 sprint
Actions #5

Updated by Peter Amstutz 4 months ago

  • Target version changed from 2022-10-12 sprint to 2022-10-26 sprint
Actions #6

Updated by Peter Amstutz 3 months ago

  • Target version changed from 2022-10-26 sprint to 2022-11-09 sprint
Actions #7

Updated by Stephen Smith 3 months ago

  • Target version changed from 2022-11-09 sprint to 2022-11-23 sprint
Actions #8

Updated by Stephen Smith 2 months ago

Changes at arvados-workbench2|62e6fff927ed9def5dc9cecb9a67b0fee7430e5d branch 19504-breadcrumbs
Tests developer-tests-workbench2: #1007

  • Added parent process to subprocess/output collection breadcrumbs
  • Added resource colors to breadcrumbs
  • Updated rounded edges similar to mockup


Actions #9

Updated by Peter Amstutz 2 months ago

I think this was just overlooked from the original writeup, but the breadcrumbs should have the same behavior for collections containing logs as with collections containing output.

Actions #10

Updated by Stephen Smith 2 months ago

Additional tasks from discussion:

  • Increase the fading effect of ancestor breadcrumbs, don't fade text color to help ensure contrast requirements
  • Add right padding to end of breadcrumbs to even out spacing
  • Add some space between breadcrumbs and panel tabs
  • Prevent refresh/info buttons from wrapping
  • Improve vertical centering of text on breadcrumbs

TBD: How should too many breadcrumbs be handled

Actions #11

Updated by Peter Amstutz 2 months ago

  • Target version changed from 2022-11-23 sprint to 2022-12-07 Sprint
Actions #12

Updated by Sarah Zaranek about 2 months ago

After a discussion about color, we decided that the breadcrumbs should:
  • Not have chips
  • Be primary link color (no link, just link/primary color) up to current location
  • Current location should be the grey
  • I believe no shading/fading
  • Icons should be the color of the text (or all grey)
Actions #13

Updated by Stephen Smith about 2 months ago

Changes at arvados-workbench2|3d4803244cc4fd2135ab6f75f527a720ef9eee4e branch 19504-breadcrumbs
Tests developer-tests-workbench2: #1015

  • Breadcrumb colors
    • Removed resource breadcrumbs colors
    • Use original transparent background for breadcrumbs
  • Layout/spacing
    • Tweaked vertical centering of text in breadcrumbs
    • Added extra space between breadcrumbs and multi panel view buttons for process details page
    • Allow breadcrumbs to wrap to prevent refresh/info button wrapping
  • Change process icon to gear icon globally
  • Text color
    • Use primary color for parent breadcrumb text color (this doesn't meet contrast guidelines but this is the case for most uses of the primary color on light background and should be resolved by the color palette rework)
    • Use dark grey for current breadcrumb (meets contrast guidelines)

Actions #15

Updated by Sarah Zaranek about 2 months ago

The breadcrumbs so far look really nice - I like this version a lot.
  • I like the new icon for processes, and it looks good
  • The highlight is way less cumbersome than the chips and it looks clean so thumbs up on that
Possible issues:
  • I thought we had decided to trim the middle section of the breadcrumbs if the breadcrumbs got too big so that the breadcrumbs always stay in 1 line - but it looks like it continues over to multiple lines (I added a screenshot). I thought we even had a discussion that we would keep the first and last few entries. Did I misremember this?
  • When I go phone-size, it seems that the refresh icon and the i icon disappear instead of adjusting the breadcrumbs to be small enough? Is that based on a minimum size of the breadcrumbs? Not sure if we are worrying about this, but just in case I added a screenshot.
  • Also for long names, the name doesn't seem to be truncating anymore?
Actions #17

Updated by Peter Amstutz about 2 months ago

  • Target version changed from 2022-12-07 Sprint to 2022-12-21 Sprint
Actions #18

Updated by Sarah Zaranek about 2 months ago

One last thought - and then I am reassigning the review to you-
  • The > in the breadcrumbs color might be nice to make it the color of the folders
Actions #19

Updated by Stephen Smith about 2 months ago

Changes at arvados-workbench2|59c625e23ea98288ed11674f6218b998fc807307
Tests developer-tests-workbench2: #1018

  • Make breadcrumbs collapse with ellipse instead of wrapping
    • Breadcrumbs can collapse all the way down to just icons, where hovering shows the full breadcrumb name
  • Set breadcrumbs chevron color to match icon color



Actions #21

Updated by Peter Amstutz about 2 months ago

  • Release set to 47
Actions #22

Updated by Sarah Zaranek about 2 months ago

This method doesn't seem to work for smaller windows or deep-file structures. It just then plots the refresh button OVER the breadcrumb

See attached windows

I think we said in these solutions we would replace the middle of the breadcrumbs with ...

Not sure this is so bad to delay release, but it is confusing and we probably should fix it sometime soon.

Also, I find it odd that Projects doesn't have the corresponding icon like all the other locations and like the LHS nav.

Actions #23

Updated by Stephen Smith about 1 month ago

Changes at arvados-workbench2|d8c258955c1cd26ace902639dfb0bc3f0f489e5d
Tests developer-tests-workbench2: #1044

  • Added side panel icons to first breadcrumb items
Actions #25

Updated by Stephen Smith about 1 month ago

  • Status changed from In Progress to Resolved
Actions

Also available in: Atom PDF