New jbrowse-desktop start screen design

[cmdcolin]

This is a proposal for the jbrowse desktop start screen redesign

• It includes a predefined datasets e.g. hg19 and hg38 on the start screen that user can easily launch. This is a simple preconfigured config.json for those assemblies
• Config+session are wrapped up into single file on desktop (e.g. session is dynamically put into defaultSession on a config, and the "sessions" are full configs that are serialized into the userdata e.g. ~/.config/@jbrowse/desktop/sessions)
• Ability to open e.g. the pre-existing config.json's made for web locally on desktop (e.g. open the volvox config.json, it converts uri into localPaths on loading to make this work, and also it does not write over this config.json, but instead just reads it and writes data to the ~/.config/@jbrowse/desktop/sessions directory. this is less of a decision that was made and more of a "it just worked out" to do it like that, but could try to change if needed)
• Ability to open a new assembly directly from the start screen similar to the "Assembly manager" form
• Refactors loader on desktop so that it does not load any initial config or pluginmanager. This could be somewhat be reconsidered but I think it helps to think of it this way because there helps especially with achieving goals around toggling between entire config.jsons at the start screen.
• Converts electron.js into electron.ts to get a little type safety assurance, and updates some of the "session" concepts to deal with configs instead

Table of recent sessions (togglable in UI)

Cards view of recent sessions (togglable in UI)

View launcher

Open sequence file dialog

Open pre-existing config dialog

Note for view launcher: Currently disappears if view.length>0 but we could instead have the view launcher available too

Note also: this was sort of a blazing-the-trail type thing, and uncovered interesting technical hurdles like merging the session and config together into one file. I am open to design updates too for this but I think this PR does manage to take care of a number of issues that have come up during UI review

[cmdcolin]

Some related issue discussions

#2190
#2218
#2191
#2189
#2167

Older

#1311
#1418
#1870
#615 (not addressed by this PR but maybe discussion)

[codecov]

Codecov Report

Merging #2247 (cba745d) into main (fd77b99) will decrease coverage by 0.94%.
The diff coverage is 6.17%.

@@            Coverage Diff             @@
##             main    #2247      +/-   ##
==========================================
- Coverage   62.87%   61.93%   -0.95%     
==========================================
  Files         502      511       +9     
  Lines       23213    23287      +74     
  Branches     5255     5341      +86     
==========================================
- Hits        14595    14422     -173     
- Misses       8352     8595     +243     
- Partials      266      270       +4     

Impacted Files	Coverage Δ
...management/src/AssemblyManager/AssemblyManager.tsx	68.42% <0.00%> (ø)
...a-management/src/AssemblyManager/AssemblyTable.tsx	84.21% <ø> (ø)
products/jbrowse-desktop/src/Loader.tsx	0.00% <0.00%> (ø)
.../jbrowse-desktop/src/StartScreen/LauncherPanel.tsx	0.00% <0.00%> (ø)
...sktop/src/StartScreen/PreloadedDatasetSelector.tsx	0.00% <0.00%> (ø)
...se-desktop/src/StartScreen/RecentSessionsPanel.tsx	0.00% <0.00%> (ø)
...ts/jbrowse-desktop/src/StartScreen/SessionCard.tsx	0.00% <0.00%> (ø)
...e-desktop/src/StartScreen/data/preloadedConfigs.js	0.00% <0.00%> (ø)
...op/src/StartScreen/dialogs/DeleteSessionDialog.tsx	0.00% <0.00%> (ø)
...top/src/StartScreen/dialogs/FactoryResetDialog.tsx	0.00% <0.00%> (ø)
... and 37 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fd77b99...cba745d. Read the comment docs.

[cmdcolin]

downloads

https://jbrowse.org/test/jbrowse-desktop-1.3.5-beta.0-win.exe
https://jbrowse.org/test/jbrowse-desktop-1.3.5-beta.0-mac.dmg
https://jbrowse.org/test/jbrowse-desktop-1.3.5-beta.0-linux.AppImage

the version when you startup will say 1.3.4 but it is a known thing, it is just a weird thing about our 1.3.5 release

[cmdcolin]

cc @hawrobin @junjun-zhang and all on team welcome to try.

note: if you have used jbrowse desktop before, it may have some weirdness. it might require a factory reset but the factory reset button isn't wired up currently. could try to fix that if interested

[cmdcolin]

I think the process of factory reset may actually work..might need to refresh page e.g. ctrl+r or relaunch app though in some cases. let me know if there are issues though

[garrettjstevens]

I think this adds a lot of utility and is a good base for moving forward. Here are my thoughts after trying this branch out for a bit. (I'm using the current branch with the toggle buttons merged in, so not exactly the same as the posted builds.)

• "Recent sessions" area
  
  • Could use tooltips on the display mode toggle buttons. Previously the selector had "Table" and "Cards", but I'm not sure the user would be familiar with what "cards" are. I like "List view" and "Grid view," which are used in Google drive. Or maybe we could do "List view" and "Preview view" if we want to emphasize that there are screenshots.
  • I think it would be nice to save users' preference of list/grid so when they restart it's on the same one
  • "Date string" and "Time ago" might be confusing to users. "String" is a bit of a technical term that users might not know. I'd maybe advocate for removing this option. One option I've seen apps use that I like is that everything on the current calendar day (or alternately the last 24 hours) has a relative time, everything else has a date/time (and entries with a relative time have the date/time as a tooltip).
  • I'd suggest a tooltip on the rename icon, since the column doesn't have a visible header and it's unclear what you're editing.
• Session files
  • I'd love to see the sessions have a custom file extension (e.g. .jbsession) that could be associated with JBrowse Desktop by the OS. Also, I think it would be good for users to choose where to save their session like you would with e.g. a Word file instead of it being saved to the user data directory.
    • To aid this, we could include the thumbnail as an extra field in the config JSON so it's not a separate file.
• File opening area
  
  • I would suggest three buttons here:
    • "Open sequence file" - same as current
    • "Open session..." - open a config file from somewhere on your hard drive (e.g. a .jbsession file, as mentioned above)
    • "Import JBrowse Web config" - renamed from "Open pre-existing-config". "Import" I think implies that the original file won't be altered, but used to create a new file, which is what this seems to do.
  • I think the "pre-loaded datasets" area should be configurable somehow. I'm imagining a user who has a set of base assembly/tracks they always want to use, but is not in our pre-exisiting datasets. I think they should be able to configure that as one of these selectable datasets so they don't have to go through "Open sequence file" and "add track" every time.
• File menu
  
  • Right now sessions autosave, so it's not clear what "Save sesion" does. Maybe we should get rid of autosave?
  • Using the session file model from above, "Save session as..." would probably be clearer than "Duplicate session"
  • "Import session" and "Export session" could probably be removed in desktop, since they don't mean the same thing as in web.
  • "Return to splash screen" might be confusing to users, since it might not be clear what a splash screen is. Maybe call it "start screen" or "home screen"?

[cmdcolin]

First comment, all items I generally agree on

Could use tooltips on the display mode toggle buttons. Previously the selector had "Table" and "Cards", but I'm not sure the user would be familiar with what "cards" are. I like "List view" and "Grid view," which are used in Google drive. Or maybe we could do "List view" and "Preview view" if we want to emphasize that there are screenshots.

List view and Grid view sounds good to me. I like to think that the natural curiosity of clicking on things will let people figure it out too

I think it would be nice to save users' preference of list/grid so when they restart it's on the same one

Agree. Could do localStorage perhaps, might not really make sense in a mst

"Date string" and "Time ago" might be confusing to users. "String" is a bit of a technical term that users might not know. I'd maybe advocate for removing this option. One option I've seen apps use that I like is that everything on the current calendar day (or alternately the last 24 hours) has a relative time, everything else has a date/time (and entries with a relative time have the date/time as a tooltip).

Sounds pretty good to me, I was just having fun with the timeago library

I'd suggest a tooltip on the rename icon, since the column doesn't have a visible header and it's unclear what you're editing.

Sounds good to me

Right now sessions autosave, so it's not clear what "Save sesion" does. Maybe we should get rid of autosave?

It could be more like jbrowse-web with a "current autosave" perhaps, and then a more explicit session save. This would help with #615

Using the session file model from above, "Save session as..." would probably be clearer than "Duplicate session"

Probably reasonable to me

"Import session" and "Export session" could probably be removed in desktop, since they don't mean the same thing as in web.

Could be ok, I suppose user would return to start screen to import perhaps, but no export? Would "Save session as..." let them save to a file on filesystem? Is this the concept for the .jbsession files right is making them exportable and shareable?

"Return to splash screen" might be confusing to users, since it might not be clear what a splash screen is. Maybe call it "start screen" or "home screen"?

Renaming to start screen is ok to me

[cmdcolin]

Other discussion/debate points...on the tough items...the buttons and stuff

I would suggest three buttons here:
"Open sequence file" - same as current
"Open session..." - open a config file from somewhere on your hard drive (e.g. a .jbsession file, as mentioned above)
"Import JBrowse Web config" - renamed from "Open pre-existing-config". "Import" I think implies that the original file won't be altered, but used to create a new file, which is what this seems to do.

I'm a little bit ambivalent on the idea of the .jbsession file. I don't necessarily see the double-click as a needed feature, or a common one either, so kind of would just say to use json extension but not really tied to that.

Also the difference between a "Import JBrowse Web config" and a "Open session..." is a little weird to me. At the very least, it might be nice if they both said "Open" instead of one saying Import and one saying Open. I acknowledge they are slightly different in a way, but they are both essentially a config file, so presenting them similarly might be useful.

Also I like to avoid making the user confront the concept of a session right on startup. I think it is not an intuitive word, so avoiding it on those buttons is somewhat good to me, but i'm not committed to that (I don't find it as problematic on the list of previous sessions table)

Also, I am not a fan of the "JBrowse Web" capitalization in general...would maybe like to avoid using it if possible...

[cmdcolin]

also, much thanks for the detailed feedback 👍

[rbuels]

Action items on this from the UI meeting just now:

• expand preconfigured datasets list to take up more screen real estate
• rename open pre-configured to open jbrowse-web config
• figure out how can a user can start a novel synteny session

[cmdcolin]

new builds uploaded over the old ones

https://jbrowse.org/test/jbrowse-desktop-1.3.5-beta.0-win.exe
https://jbrowse.org/test/jbrowse-desktop-1.3.5-beta.0-mac.dmg
https://jbrowse.org/test/jbrowse-desktop-1.3.5-beta.0-linux.AppImage

has a number of the improvements that were suggested, including localStorage setting for list/grid, expand preconfigured datasets list to take up more screen real estate, rename open pre-configured to open jbrowse-web config, and synteny sessions can be potentially launched by multi-selection of assemblies in the pre-selected dataset list

[cmdcolin]

(might take a minute to upload those files to become live)

[cmdcolin]

should be live now

[cmdcolin]

New set of builds uploaded, over the old one. Could maybe start making them tag as beta.0,1,2,3 or have new filenames just for clarity.

https://jbrowse.org/test/jbrowse-desktop-1.3.5-beta.0-win.exe
https://jbrowse.org/test/jbrowse-desktop-1.3.5-beta.0-mac.dmg
https://jbrowse.org/test/jbrowse-desktop-1.3.5-beta.0-linux.AppImage

New changes

1. Makes it have a "New Session ${date}" again, but that logic is done only on first creation of the session rather than when revisiting sessions
2. Added a little magnifying glass toggle button for the filtering preloaded datasets textfield (not visible by default)

[cmdcolin]

how it looks now :) we decided to remove the "Open jbrowse web config" for now, and then will prolly just merge this as is