Add sorting and collapsing options to the hierarchical track selector #3810

cmdcolin · 2023-07-17T12:02:39Z

Fixes #26

This PR offers new options via config to sort the track selector via top level configuration.hierarchical.sort.trackNames and configuration.hierarchical.sort.categories

Screenshot of hamburger menu open with new sort+collapse options

"Collapse subcategories"

"Collapse top-level categories"

"Sort categories by name"

can see the above has category names "Alignments","Bigwigs", etc. sorted alphabetically

"Sort tracks by name"

Can see that categories are not sorted (Miscellaneous comes before Alignments category) but track names are sorted

codecov · 2023-07-17T15:17:45Z

Codecov Report

Merging #3810 (0f936d5) into main (a8318c1) will decrease coverage by 0.09%.
The diff coverage is 66.86%.

@@            Coverage Diff             @@
##             main    #3810      +/-   ##
==========================================
- Coverage   64.42%   64.34%   -0.09%     
==========================================
  Files         995      998       +3     
  Lines       29563    29648      +85     
  Branches     7092     7114      +22     
==========================================
+ Hits        19047    19078      +31     
- Misses      10355    10409      +54     
  Partials      161      161

Impacted Files	Coverage Δ
packages/app-core/src/JBrowseConfig/index.ts	`100.00% <ø> (ø)`
...torWidget/components/HierarchicalTrackSelector.tsx	`75.00% <ø> (ø)`
...ectorWidget/components/faceted/FacetedSelector.tsx	`0.00% <ø> (ø)`
...electorWidget/components/tree/HierarchicalTree.tsx	`96.55% <ø> (ø)`
...HierarchicalTrackSelectorWidget/components/util.ts	`14.28% <ø> (ø)`
...ckSelectorWidget/components/tree/HamburgerMenu.tsx	`31.34% <37.50%> (ø)`
...gement/src/HierarchicalTrackSelectorWidget/util.ts	`48.27% <48.27%> (ø)`
...ement/src/HierarchicalTrackSelectorWidget/model.ts	`58.00% <59.01%> (-26.35%)`	⬇️
...ectorWidget/components/tree/HierarchicalHeader.tsx	`68.42% <71.42%> (+8.42%)`	⬆️
...erarchicalTrackSelectorWidget/generateHierarchy.ts	`80.43% <80.43%> (ø)`
... and 1 more

... and 3 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

cmdcolin · 2023-07-17T15:29:38Z

initial comment said I didn't add "collapsing via config" but now there is:

configuration.hierarchical.defaultCollapsed.categoryNames:stringArray

configuration.hierarchical.defaultCollapsed.topLevelCategories:boolean

configuration.hierarchical.defaultCollapsed.subCategories:boolean

These are only done on initial load of the session, after that the collapsed state is maintained in the session of the collapse takes over

(note: the storage of collapse state in session could get large/bloat session potentially but that "issue" has always existed)

cmdcolin · 2023-07-17T15:34:41Z

requested review @carolinebridge-oicr @garrettjstevens just for clarity of UI and perhaps also the config concepts. this is one of the more "nested" configs out there but I think it helps organization and clarity. the alternative is lifting the configs and including their nested purpose in their name e.g. configuration.hierarchical.sortTopLevelCategories=true

garrettjstevens · 2023-07-19T16:41:23Z

I think the nesting of the configs is fine, as long as it's documented it should be fine. One question I did have was, is there a way to set the hierarchical options in the config when using the admin server? I seems since it's all loaded in the session after initial load that any changes an admin makes using the admin server wouldn't get saved to the config.

carolinebridge · 2023-07-19T16:43:38Z

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.tsx

+          },
+          { type: 'divider' },
+          {
+            label: 'Collapse subcategories',


I think this should be a toggle to expand/collapse all subcategories

by toggle do you mean checkbox? i avoided checkbox because you can get into states that are not 'all or nothing', e.g. you could expand all, then collapse one manually, so then it's not in an expand all state

It doesn't have to be a checkbox, you can just ternary on a boolean for the text / icon / behaviour --

For expanding / collapsing I would assume the behaviour there would be:

Collapse all (all categories are open) -- lets the user see all their category headers and select the one relevant to them from there
Expand all (some or no categories are open) -- lets the user explore their tracks individually if they had collapsed them all.

Maybe this is just me though for expected behaviour. The first thing I did after clicking "collapse categories" was click it again expecting them to expand.

it is somewhat tempting to make it a toggle, but i kind of prefer the current behavior because it makes it clear that it's an acton that manipulates the state, and that you can repeat it if you want, rather than being a true toggle. i tried to in the below comment remove the subcategories option when no subcategories are available, to reduce cognitive load

carolinebridge · 2023-07-19T16:45:20Z

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.tsx

+            onClick: () => model.collapseTopLevelCategories(),
+          },
+          {
+            label: 'Expand all categories',


Overall I don't think there's enough distinction between what these options do...

Collapse top-level categories does the same thing that subcategories does on the demo link?

They should all be toggles to expand all/collapse all

They are slightly different behaviors, see the behavior on the volvox example. possibly the subcategories one could be hidden if no subcategories are even available on track selector

I now removed the subcategories option if there are none, which may remove some cognitive overload from the unnecessary option

carolinebridge · 2023-07-19T16:53:49Z

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.tsx

-          setMenuEl(undefined)
-        }}
-        onClose={() => setMenuEl(undefined)}
+      <CascadingMenuButton
        menuItems={[


Add track is no longer at the top here -- subjective, but I think some users might get lost when looking for this option. Maybe we should consider restricting this hamburger menu to just be manipulating the listed options i.e. expand/collapse/sort, and have separate button / ui for manipulating tracks or connections.

One option would be to make the Add track FAB have the text "Add track" with the plus Icon and then allow the user to select adding a track or connection...could add a connections manager, etc.

the discoverability of "Add track" is a persistent problem. I'd be happy to sort it back to the top but ya, the current 'state' of the system is that add track options are in multiple places (Fab, Hamburger menu, top level menu) in the UI because of this discoverability problem

I was messing around with connections as well while exploring this and the UI for it is suuuuper clunky with the multi modals.

cmdcolin · 2023-07-19T16:56:42Z

I don't believe we have a "config editor" for the global jbrowse.configuration field, but for the collapse options in particular, changing those options in the yet-to-be-created-global-config-editor would not change the result because the "my take on it" at least is that the collapse options are only applied on session load, which sets a "initialized" field on the hierarchical widget model. it could be the initialized thing gets re-toggled off if the config value is detected to change though.

cmdcolin · 2023-07-19T18:51:08Z

sorted these options to the bottom of hamburger menu now

github-actions bot added the needs label triage Needs a label to show in changelog (breaking, enhancement, bug, documentation, or internal) label Jul 17, 2023

cmdcolin force-pushed the alpha_sort branch from 01c6f86 to 8de9e06 Compare July 17, 2023 12:07

cmdcolin added enhancement New feature or request and removed needs label triage Needs a label to show in changelog (breaking, enhancement, bug, documentation, or internal) labels Jul 17, 2023

cmdcolin force-pushed the alpha_sort branch 4 times, most recently from c157b42 to 6837217 Compare July 17, 2023 14:55

cmdcolin requested review from garrettjstevens and carolinebridge July 17, 2023 15:19

cmdcolin changed the base branch from main to bump_prettier July 17, 2023 15:27

cmdcolin force-pushed the alpha_sort branch from 6837217 to 2bc5263 Compare July 17, 2023 15:27

cmdcolin force-pushed the bump_prettier branch from eea8e20 to a8409c4 Compare July 17, 2023 15:38

Base automatically changed from bump_prettier to main July 17, 2023 16:14

cmdcolin force-pushed the alpha_sort branch from 2bc5263 to 5dc2522 Compare July 17, 2023 16:15

carolinebridge reviewed Jul 19, 2023

View reviewed changes

cmdcolin added 9 commits July 19, 2023 13:06

Bump prettier

a06d267

Bump deps

d605329

Add test_alpha_sort

318c84d

Test alpha-sort of hierarchical track selector

19e562c

Allow user to toggle sort

c2c7289

Misc

2dbf8af

Updates

a62be87

Sort categories

602ee84

Misc

975f28e

cmdcolin added 4 commits July 19, 2023 13:07

Updates

acfecc7

Misc

76c7905

Updates

34f4b09

Demo defaultCollapsed

a7311a9

cmdcolin force-pushed the alpha_sort branch from 5dc2522 to 9b2c429 Compare July 19, 2023 18:43

Misc

b76493b

cmdcolin force-pushed the alpha_sort branch from 9b2c429 to b76493b Compare July 19, 2023 18:48

cmdcolin added 2 commits July 19, 2023 16:31

Remove the subcategories option if there are none

2993adb

Remove circular dependency

42f3d72

cmdcolin mentioned this pull request Jul 20, 2023

Add ability to edit global configs via configuration editor #3822

Open

cmdcolin force-pushed the alpha_sort branch 2 times, most recently from 4a2658d to 525000e Compare July 20, 2023 15:22

Update deps

0f936d5

cmdcolin force-pushed the alpha_sort branch from 525000e to 0f936d5 Compare July 20, 2023 15:22

cmdcolin merged commit 612df29 into main Jul 20, 2023

cmdcolin deleted the alpha_sort branch July 20, 2023 16:33

cmdcolin mentioned this pull request Jul 20, 2023

all-on/all-off checkbox in hierarchical tracksel category header #268

Closed

This was referenced Jul 19, 2023

v2.6.3 release announcement #3820

Merged

Clicking "Open track selector" button doesn't work first time in embedded #3843

Closed

cmdcolin restored the alpha_sort branch November 3, 2023 16:46

cmdcolin deleted the alpha_sort branch November 3, 2023 17:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add sorting and collapsing options to the hierarchical track selector #3810

Add sorting and collapsing options to the hierarchical track selector #3810

cmdcolin commented Jul 17, 2023 •

edited

Loading

codecov bot commented Jul 17, 2023 •

edited

Loading

cmdcolin commented Jul 17, 2023

cmdcolin commented Jul 17, 2023

garrettjstevens commented Jul 19, 2023

carolinebridge Jul 19, 2023

cmdcolin Jul 19, 2023

carolinebridge Jul 19, 2023

cmdcolin Jul 19, 2023

carolinebridge Jul 19, 2023

cmdcolin Jul 19, 2023

cmdcolin Jul 19, 2023

carolinebridge Jul 19, 2023

cmdcolin Jul 19, 2023

carolinebridge Jul 19, 2023

cmdcolin commented Jul 19, 2023

cmdcolin commented Jul 19, 2023

Add sorting and collapsing options to the hierarchical track selector #3810

Add sorting and collapsing options to the hierarchical track selector #3810

Conversation

cmdcolin commented Jul 17, 2023 • edited Loading

Screenshot of hamburger menu open with new sort+collapse options

"Collapse subcategories"

"Collapse top-level categories"

"Sort categories by name"

"Sort tracks by name"

codecov bot commented Jul 17, 2023 • edited Loading

Codecov Report

cmdcolin commented Jul 17, 2023

cmdcolin commented Jul 17, 2023

garrettjstevens commented Jul 19, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cmdcolin commented Jul 19, 2023

cmdcolin commented Jul 19, 2023

cmdcolin commented Jul 17, 2023 •

edited

Loading

codecov bot commented Jul 17, 2023 •

edited

Loading