Much smaller "Last Modified" column, date #15948

JasonWeill · 2024-03-08T00:51:58Z

References

Code changes

Shortens dates to extremely short units, as short as one character (days becomes d) and no longer than three characters (min, mon). All numbers are assumed to be negative; if a file's timestamp is in the future, a + is prepended.

User-facing changes

Before the change, the relative timestamp was so long that the "last modified" minimum width was wider than the file name container's:

Now, the last modified column is shortened to "Modified", and is narrower:

One of three dates is displayed based on how wide the "Modified" column is:

jupyterlab-probot · 2024-03-08T00:52:00Z

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

andrii-i · 2024-03-08T01:12:28Z

In my subjective opinion, middleground between this PR and version proposed in #15947 would be a good compromise between saving space and maintaining readability: "Modified" for the column name and "7 months" or at least "7 mo." for value format (with a space and a dot).

packages/coreutils/src/time.ts

krassowski · 2024-03-08T09:02:14Z

I like the idea of having a shorter form when needed. I do not like forcing the shorter form and "Mod" header by default. Internationalisation-wise it would be great if we could off load this to self-contained package which supports such short format with translations.

jtpio · 2024-03-08T09:05:01Z

having a shorter form when needed.

Or at least configurable. For example Notebook 7 would likely keep the longer version by default.

krassowski · 2024-03-08T09:05:11Z

Of note, this filebrowser is also used in Jupyter Notebook where it takes full-width of the page. It can be also used by user widgets and in other places where the short form does not make sense.

On the other hand, the file selection dialog like FileDialog.getOpenFiles should probably always use the short form.

andrii-i · 2024-03-11T16:43:24Z

Here’s how macOS does it, timestamp format adjusted based on the width of the column.

JasonWeill · 2024-03-13T00:27:12Z

The same i18n-friendly library we use also supports a super-compact format called narrow, although it still includes ago or in:

const rtf1 = new Intl.RelativeTimeFormat('en', { style: 'narrow' });
console.log(rtf1.format(3, 'quarter'));
console.log(rtf1.format(-1, 'day'));

causes log messages:

> "in 3q"
> "1d ago"

JasonWeill · 2024-03-13T23:57:44Z

With the most recent change, the name and modified columns flex in width, and based on the container width, one of three dates is displayed.

Notably, the csstree/stylelint-validator module we use flags container queries as invalid CSS, even though all modern browsers support them, and even though we're using the newest version of this module.

krassowski · 2024-03-14T09:05:12Z

This UX is nice and who doesn't love the container queries (it's awesome that we finally can use them!) but rendering the three variants will have three times the cost. The file browser already has performance issues when the list of files is long - I would ~~strongly~~ suggest to attempt to reimplement the conditional rendering on JS rather than CSS level.

Notably, the csstree/stylelint-validator module we use flags container queries as invalid CSS, even though all modern browsers support them, and even though we're using the newest version of this module

If you do stick to CSS queries you can add ignore comments disabling the validator around the problematic rules.

krassowski · 2024-03-14T09:08:53Z

On the other hand, maybe it is fine to merge this as-is and look into performance improvements as a follow up.

One thing that would be needed here is visual snapshots at the two new levels.

JasonWeill · 2024-03-18T16:43:01Z

please update galata snapshots

github-actions · 2024-03-18T17:19:15Z

Galata snapshots updated.

JasonWeill · 2024-03-19T21:25:55Z

please update documentation snapshots

github-actions · 2024-03-19T21:41:52Z

Documentation snapshots updated.

JasonWeill · 2024-03-20T23:33:35Z

please update snapshots

github-actions · 2024-03-21T00:13:53Z

Galata snapshots updated.

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

krassowski · 2024-04-18T08:19:55Z

I think the commit "Adds test case for string replacement that contains query string" was meant to go to #15881 branch

…ing" This reverts commit fa849f0.

JasonWeill · 2024-04-18T15:20:12Z

Thanks for catching this! Reverted here and cherry-picked in the #15881 branch.

krassowski · 2024-04-18T15:49:53Z

bot please update snapshots

github-actions · 2024-04-18T16:05:13Z

Documentation snapshots updated.

github-actions · 2024-04-18T16:25:37Z

Galata snapshots updated.

krassowski · 2024-04-18T16:27:46Z

...pyterlab/output-scrolling.test.ts-snapshots/prompt-overlay-hover-normal-jupyterlab-linux.png

I don't think this change is intended, but the new screenshot certainly looks better 😄

krassowski

Thank you @JasonWeill. Good to merge once all green.

krassowski · 2024-04-18T20:42:26Z

The only failure:

[jupyterlab] › test/jupyterlab/sidebars.test.ts:42:9 › Sidebars › Open Sidebar tab jp-running-sessions

should be fixed by merge of #16188 (review welcome!)

jtpio · 2024-04-19T06:41:14Z

packages/filebrowser/src/listing.ts

@@ -2297,7 +2368,7 @@ export namespace DirListing {
      const trans = translator.load('jupyterlab');
      const name = this.createHeaderItemNode(trans.__('Name'));
      const narrow = document.createElement('div');
-      const modified = this.createHeaderItemNode(trans.__('Last Modified'));
+      const modified = this.createHeaderItemNode(trans.__('Modified'));


Would it be possible to keep the original Last Modified here?

Since the file browser is also used in Notebook, and there is plenty of space to display it.

Noticed in jupyter/notebook#7333

@krassowski

* Revert "Alternate description for disabled filters" This reverts commit 059fb7e. * Revert "Revert "Alternate description for disabled filters"" This reverts commit 27ed1d0. * Uses extremely short units, shrinks the Last Modified column by 62 px * Lint fixes * Uses standard library in 'narrow' mode * Three-step container query to display longer or shorter date * Update Playwright Snapshots * Update Playwright Snapshots * WIP: Creates test files * Adds small and large sidebar tests specifically for filebrowser * Adds medium sidebar test for filebrowser * Fix loop issue * Update comment * Update Playwright Snapshots * Reinstates previous screen shots not modified by this change * Freezes dates at one day ago * Disable stylelint for container queries * Avoid using page in beforeAll * Uploads files with time stamp override in a separate test pass * Reverts screen shots not modified by this change * Reverts tests so I can put them into another branch * Reinstates screenshots without sample files This reverts commit d682f4ab8d014653b5c1648f88aef2c3ed7f533b. * Uses VirtualDOM.render() * Reverts screen shot that this branch should not modify * Updates sidebars test options to avoid timeouts * Reinstates older screenshot * Removes unused title parameter * Updates comment about ES version * Removes container queries, triple rendering; updates listings on resize * Removes comment about container queries, no longer valid * Only rerenders nodes if modified style has changed * Only updates modified dates on resize * Update visibility level of new member method * Null check for container width * Revisions per @krassowski * Update packages/filebrowser/src/listing.ts Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com> * Adds test case for string replacement that contains query string * Revert "Adds test case for string replacement that contains query string" This reverts commit fa849f0. * Update Playwright Snapshots * Update Playwright Snapshots * Update example snapshot, pick up more stable versions of flaky snapshots --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

JasonWeill added the enhancement label Mar 8, 2024

github-actions bot assigned JasonWeill Mar 8, 2024

github-actions bot added pkg:filebrowser pkg:coreutils tag:CSS For general CSS related issues and pecadilloes Design System CSS labels Mar 8, 2024

jtpio reviewed Mar 8, 2024

View reviewed changes

packages/coreutils/src/time.ts Show resolved Hide resolved

krassowski added this to the 4.2.0 milestone Mar 8, 2024

JasonWeill force-pushed the short-relative-date branch from 1ce2d56 to 0756539 Compare March 13, 2024 00:37

JasonWeill force-pushed the short-relative-date branch from fde5df2 to 1e9d0ed Compare March 19, 2024 00:12

github-actions bot added the tag:Testing label Mar 19, 2024

JasonWeill mentioned this pull request Mar 19, 2024

"Last Modified" is covered at first, then returns to normal #15979

Closed

JasonWeill linked an issue Mar 20, 2024 that may be closed by this pull request

"Last Modified" is covered at first, then returns to normal #15979

Closed

JasonWeill marked this pull request as ready for review March 21, 2024 01:57

JasonWeill and others added 6 commits April 17, 2024 13:08

Only rerenders nodes if modified style has changed

2771fa1

Only updates modified dates on resize

7ec4fc4

Update visibility level of new member method

7fef7dd

Null check for container width

42d40e0

Revisions per @krassowski

5c5d533

Update packages/filebrowser/src/listing.ts

e54531f

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

JasonWeill force-pushed the short-relative-date branch from 3df0e9e to e54531f Compare April 17, 2024 20:09

krassowski mentioned this pull request Apr 17, 2024

The bot does not update snapshots in examples #16183

Open

Adds test case for string replacement that contains query string

fa849f0

Revert "Adds test case for string replacement that contains query str…

0a2930a

…ing" This reverts commit fa849f0.

Update Playwright Snapshots

68d26a0

Update Playwright Snapshots

a4fe9bd

krassowski reviewed Apr 18, 2024

View reviewed changes

krassowski closed this Apr 18, 2024

krassowski reopened this Apr 18, 2024

Update example snapshot, pick up more stable versions of flaky snapshots

32d4cca

github-actions bot added the tag:Examples label Apr 18, 2024

krassowski approved these changes Apr 18, 2024

View reviewed changes

krassowski mentioned this pull request Apr 18, 2024

The filebrowser "Last Modified" column in narrow mode is not covered by tests #16192

Open

JasonWeill merged commit f23e308 into jupyterlab:main Apr 18, 2024
80 of 81 checks passed

jtpio reviewed Apr 19, 2024

View reviewed changes

jtpio mentioned this pull request Apr 19, 2024

"Modified" file browser column should be "Last Modified" when there is enough space to display #16197

Closed

Renegade334 mentioned this pull request May 5, 2024

coreutils and post-ES2018 Intl API features #16283

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Much smaller "Last Modified" column, date #15948

Much smaller "Last Modified" column, date #15948

JasonWeill commented Mar 8, 2024 •

edited

jupyterlab-probot bot commented Mar 8, 2024

andrii-i commented Mar 8, 2024 •

edited

krassowski commented Mar 8, 2024

jtpio commented Mar 8, 2024

krassowski commented Mar 8, 2024

andrii-i commented Mar 11, 2024

JasonWeill commented Mar 13, 2024

JasonWeill commented Mar 13, 2024

krassowski commented Mar 14, 2024 •

edited

krassowski commented Mar 14, 2024

JasonWeill commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

JasonWeill commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

JasonWeill commented Mar 20, 2024

github-actions bot commented Mar 21, 2024

krassowski commented Apr 18, 2024

JasonWeill commented Apr 18, 2024

krassowski commented Apr 18, 2024

github-actions bot commented Apr 18, 2024

github-actions bot commented Apr 18, 2024

krassowski Apr 18, 2024

JasonWeill Apr 18, 2024

krassowski left a comment

krassowski commented Apr 18, 2024

jtpio Apr 19, 2024

jtpio Apr 19, 2024

Much smaller "Last Modified" column, date #15948

Much smaller "Last Modified" column, date #15948

Conversation

JasonWeill commented Mar 8, 2024 • edited

References

Code changes

User-facing changes

jupyterlab-probot bot commented Mar 8, 2024

andrii-i commented Mar 8, 2024 • edited

krassowski commented Mar 8, 2024

jtpio commented Mar 8, 2024

krassowski commented Mar 8, 2024

andrii-i commented Mar 11, 2024

JasonWeill commented Mar 13, 2024

JasonWeill commented Mar 13, 2024

krassowski commented Mar 14, 2024 • edited

krassowski commented Mar 14, 2024

JasonWeill commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

JasonWeill commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

JasonWeill commented Mar 20, 2024

github-actions bot commented Mar 21, 2024

krassowski commented Apr 18, 2024

JasonWeill commented Apr 18, 2024

krassowski commented Apr 18, 2024

github-actions bot commented Apr 18, 2024

github-actions bot commented Apr 18, 2024

krassowski Apr 18, 2024

Choose a reason for hiding this comment

JasonWeill Apr 18, 2024

Choose a reason for hiding this comment

krassowski left a comment

Choose a reason for hiding this comment

krassowski commented Apr 18, 2024

jtpio Apr 19, 2024

Choose a reason for hiding this comment

jtpio Apr 19, 2024

Choose a reason for hiding this comment

JasonWeill commented Mar 8, 2024 •

edited

andrii-i commented Mar 8, 2024 •

edited

krassowski commented Mar 14, 2024 •

edited