Add sort by last modified date and name to file tree

[captainsafia]

Closes #930.

Working on adding sorting by last modified date.

cc: @minrk

[ellisonbg]

We should use moment.js to format the last modified datetime...

[captainsafia]

I'm currently using moment. Just creating a light wrapper function with the format string.

[ellisonbg]

Great!

On Sat, Jan 9, 2016 at 10:58 PM, Safia Abdalla notifications@github.com
wrote:

I'm currently using moment. Just creating a light wrapper function with
the format string.

—
Reply to this email directly or view it on GitHub
#943 (comment).

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

[dsblank]

This is brilliant! This will help so much in managing courses based on the notebook. It will help in finding recent lecture notes, for finding assignments submitted early/late, and myriad other tasks. Thank you!

[captainsafia]

OK. So sorting on the front-end now works.

I'm figuring out how to make the last modified button in the header have a more meaningful text. I'm thinking of having it say "Sort By Date Modified" and then an arrow icon that indicates in what order the list will be sorted on if you click the button. Thoughts on the UX for this?

[captainsafia]

OK. Taking the WIP flag off of this. I set up the UX to work as follows.

1. User lands on the file tree page for the first time. The arrow in the button is pointing upwards.
2. User clicks the button.
3. Items are sorted in ascending order and arrow in button points downward.
4. User clicks the button.
5. Items are sorted in descending order and arrow in button points upward.
6. Rinse and repeat.

EDIT: Updated gif screencast.

[ellisonbg]

Safia, I think that being able to sort by last modified is very nice. Love
that.

However, I think the last modified dates should be written in plain english
as GitHub does such as:

• a few seconds ago
• 5 minutes ago
• 3 days ago
• 4 month ago

That was what I meant about using moment.js for that.

On Mon, Jan 11, 2016 at 4:34 PM, Safia Abdalla notifications@github.com
wrote:

OK. Taking the WIP flag off of this. I set up the UX to work as follows.

1. User lands on the file tree page for the first time. The arrow in
   the button is pointing upwards.
2. User clicks the button.
3. Items are sorted in ascending order and arrow in button points
   downward.
4. User clicks the button.
5. Items are sorted in descending order and arrow in button points
   upward.
6. Rinse and repeat.

[image: notebook-filetree-sorting-with-arrow]
https://cloud.githubusercontent.com/assets/1857993/12251112/c65f405e-b891-11e5-9229-fe1e5c8794e2.gif

EDIT: Updated gif screencast.

—
Reply to this email directly or view it on GitHub
#943 (comment).

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

[blink1073]

Share and share alike! https://github.com/jupyter/jupyter-js-filebrowser/blob/master/src/listing.ts#L933

[ellisonbg]

Thanks!

On Mon, Jan 11, 2016 at 4:39 PM, Steven Silvester notifications@github.com
wrote:

Share and share alike!
https://github.com/jupyter/jupyter-js-filebrowser/blob/master/src/listing.ts#L933

—
Reply to this email directly or view it on GitHub
#943 (comment).

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

[captainsafia]

@ellisonbg: OOOOOOOOOOOOOOOOOOOOHHHHHHHHHHHHHHHHHHH!

codes furiously

[ellisonbg]

LOL :-)

On Mon, Jan 11, 2016 at 4:47 PM, Safia Abdalla notifications@github.com
wrote:

@ellisonbg https://github.com/ellisonbg:
OOOOOOOOOOOOOOOOOOOOHHHHHHHHHHHHHHHHHHH!

[image: giphy-14]
https://cloud.githubusercontent.com/assets/1857993/12251323/bb7167e2-b893-11e5-801a-1fda79341f3a.gif

codes furiously

—
Reply to this email directly or view it on GitHub
#943 (comment).

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

[captainsafia]

OK. Updated to have human-friendly dates now. Thanks @blink1073 for that handy-dandy function.

[ellisonbg]

Very nice, I think that will be a huge help to folks. Question - after
sorting by Last Modified, is it possible to get back to sorting using the
default ordering?

On Mon, Jan 11, 2016 at 5:03 PM, Safia Abdalla notifications@github.com
wrote:

OK. Updated to have human-friendly dates now. Thanks @blink1073
https://github.com/blink1073 for that handy-dandy function.

[image: notebook-filetree-sorting-human-friendly-dates]
https://cloud.githubusercontent.com/assets/1857993/12251607/e082c5a6-b895-11e5-8fb9-2a546c7ea2c9.gif

—
Reply to this email directly or view it on GitHub
#943 (comment).

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

[captainsafia]

Question - after sorting by Last Modified, is it possible to get back to sorting using the default ordering?

I think it is possible. I can copy and modify the callback in the sort function call inside the draw_notebook_list function and have the order of the clicks be sort ascending -> sort descending -> return to default sort (which is a combination of sorting on type and name).

Let me see if I can get that to work.

[dsblank]

Although the fromNow time span is useful in knowing approximately how old something is, for assignments and other date-oriented tasks, the actual date/time is more useful. How many students turned their assignments in in the last few moments before the due date? Can we see both date and span? Or make it toggle between them?

[ellisonbg]

What about adding the actual date/time as a tooltip?

On Mon, Jan 11, 2016 at 6:20 PM, Doug Blank notifications@github.com
wrote:

Although the fromNow time span is useful in knowing approximately how old
something is, for assignments and other date-oriented tasks, the actual
date/time is more useful. How many students turned their assignments in in
the last few moments before the due date? Can we see both date and span? Or
make it toggle between them?

—
Reply to this email directly or view it on GitHub
#943 (comment).

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

[dsblank]

What about adding the actual date/time as a tooltip?

Yes, that would be better. Although, you might consider showing the date/time in the list and having the more casual, human fromNow() text be the tooltip. That would be more standard (I couldn't find any example of file date/time listings that show anything other than date/time.... Google Docs, my file manager, ls, etc.)

[takluyver]

I couldn't find any example of file date/time listings that show anything other than date/time

The Github web interface shows e.g. '3 days ago':

https://github.com/jupyter/notebook

I can see arguments either way. For a quick 'about how recent is this', I prefer the 'ago' style, but sometimes it's useful to have the detailed information.

[dsblank]

I guess the github method is very relevant to github, because files are always seen in terms of their last changed status to the whole project. But I don't think that is typical for a list of files of unknown relationships to each other, or to the user's goals/intentions.

Tooltip or not, this is a great usability gain!

[Carreau]

What about adding the actual date/time as a tooltip?

+1

How does that looks with started kernels, selected files ?

[captainsafia]

Can this be merged?

[ellisonbg]

Great work!

On Sat, Jan 16, 2016 at 10:30 AM, Matthias Bussonnier <
notifications@github.com> wrote:

Merged #943 #943.

—
Reply to this email directly or view it on GitHub
#943 (comment).

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

[gnestor]

What do you guys think about including in this in a minor release vs. major? It was implemented in the beginning of the year and there's a good chance it won't make it into a release (5.0) until next year...

[rgbkrk]

I'm certainly a fan of targeting this to a minor release.

[michaelaye]

I am eagerly awaiting this feature!

[gnestor]

@Carreau @ellisonbg What do you say about including this in 4.3.1 or 4.4?

[takluyver]

I'd say no to 4.3.1, because it's not a bugfix. I'd like to do a feature release soon, whether we call that 4.4 or 5.0.

[gnestor]

Ok, I'm going to try to push this through with 4.4 because there are lots of users waiting for it and it's been almost a year since it was merged!

[Carreau]

I would be fine pushing things from 5.0 to 5.1, there are a lot of new feature in master and I think trying to backport will be too painful.

We should check that the shortcut editor still work (or fix it). It uses preact, but apparently we can move to react if needed now that the discussion has ended.

[takluyver]

Yeah, there are a range of new features in master that people would like to get out (I'm keen to see my clipboard work released, for instance). If 4.x is open to new features, then people will want to backport many things. I suspect it's easier to aim for a 5.0 release from master.

[gnestor]

Ok, I agree with you guys. However, a 5.0 release will require a revert back to no Webpack (#1554), correct? I know @blink1073 did some exploration (#1793) and determined that reverting is our the option, so I think that leaves that task up to him or me. Additionally, if we intend to release 5.0 soon, we have 150 issues to triage! 😮 So I suppose that we should work on the bug fixes and critical ones and mark the rest as "5.x".

[esvhd]

Hi guys,

This is a great feature, thank you very much for the effort.

After upgrading to notebook 5.0 (Anaconda python 3.6) I noticed that while clicking on the Last Modified button sorts the files by time, if you go to a different tab in Chrome, or switch to another app, when you return to the notebook tab, the page reverts back to being sorted by name. This happens in both Mac and Windows.

This seems to be very confusing, reading the above, it feels like the refresh button is automatically triggered when you switch back to the tab, and therefore resetting the sort order chosen before.

Is there a way to change this so that the sort order does not reset when switching around tabs/apps?

Thanks.

Will

[michaelaye]

@esvhd note that bug is known and tracked by #1218, i think? Unless you think that is different?

[esvhd]

@michaelaye you are right. I think they might be the same. Any background event seems to be trigging a reset of sort order. Maybe changing the default is an easy workaround.

[deeTEEcee]

im a bit late here but what about adding "created at"?