Skip to content

Extending the thumbnail label to reveal more text #758#950

Merged
LanieOkorodudu merged 79 commits into
UniversalViewer:devfrom
Saira-A:758
Dec 3, 2024
Merged

Extending the thumbnail label to reveal more text #758#950
LanieOkorodudu merged 79 commits into
UniversalViewer:devfrom
Saira-A:758

Conversation

@Saira-A

@Saira-A Saira-A commented Jan 5, 2024

Copy link
Copy Markdown
Contributor

Issue #758
Screenshot 2024-01-19 at 01 00 01
Screenshot 2024-01-19 at 01 00 23

@codesandbox

codesandbox Bot commented Jan 5, 2024

Copy link
Copy Markdown

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

@vercel

vercel Bot commented Jan 5, 2024

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
universalviewer ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 2, 2024 8:41pm

@codesandbox-ci

codesandbox-ci Bot commented Jan 5, 2024

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@edsilv

edsilv commented Jan 17, 2024

Copy link
Copy Markdown
Member

it looks like the label span isn't filling the whole width of its containing element? Might make things easier to read.
usually settings with checkboxes associated are located in the settings dialogue (cog icon, top right)

@demiankatz demiankatz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @Saira-A. I don't claim to have done a particularly thorough review, but a few small suggestions below.

We should talk about code reviews and PR handling at the next Community Call, to see what strategy we can come up with to keep things moving while @edsilv is busy elsewhere. I unfortunately don't have a lot of time to keep on top of UV things, but I'll at least try to help a little when I can. :-)

Comment thread __tests__/test.js Outdated
Comment thread src/content-handlers/iiif/modules/uv-contentleftpanel-module/GalleryView.ts Outdated
Comment thread src/content-handlers/iiif/modules/uv-dialogues-module/SettingsDialogue.ts Outdated
@demiankatz

Copy link
Copy Markdown
Contributor

@Saira-A, I also think some more work may be needed to support this functionality in extensions other than OpenSeadragon. At least, when I tested this with a multi-PDF manifest, the labels did not expand. You can see this here:

https://universalviewer-git-fork-saira-a-758-mnemoscene.vercel.app/#?xywh=-1210%2C-424%2C10923%2C8463&iiifManifestId=https%3A%2F%2Fdigital.library.villanova.edu%2FItem%2Fvudl%3A294631%2FManifest

@Saira-A

Saira-A commented Jan 24, 2024

Copy link
Copy Markdown
Contributor Author

@Saira-A, I also think some more work may be needed to support this functionality in extensions other than OpenSeadragon. At least, when I tested this with a multi-PDF manifest, the labels did not expand. You can see this here:

https://universalviewer-git-fork-saira-a-758-mnemoscene.vercel.app/#?xywh=-1210%2C-424%2C10923%2C8463&iiifManifestId=https%3A%2F%2Fdigital.library.villanova.edu%2FItem%2Fvudl%3A294631%2FManifest

I've done it so that when thumbnails are one up, they're extended by default as there's more space for them anyway so now the checkbox only affects two-up view

@demiankatz demiankatz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See below for a few more thoughts and minor nitpicks.

Beyond that, though, there seems to be a bigger issue. I definitely like what you've done with 1-up labels, but it seems that 2-up mode has somehow gotten broken in the process. When I look at the original test case, it comes up in 1-up mode and I don't see a way to switch it to 2-up.

Here's a link for convenience:

https://universalviewer-git-fork-saira-a-758-mnemoscene.vercel.app/#?xywh=-1538%2C0%2C11578%2C7617&iiifManifestId=https%3A%2F%2Fcollections.st-andrews.ac.uk%2F762295%2Fmanifest

Comment thread package.json Outdated
Comment thread src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts Outdated
Comment thread src/content-handlers/iiif/modules/uv-dialogues-module/SettingsDialogue.ts Outdated
@Saira-A

Saira-A commented Jan 24, 2024

Copy link
Copy Markdown
Contributor Author

See below for a few more thoughts and minor nitpicks.

Beyond that, though, there seems to be a bigger issue. I definitely like what you've done with 1-up labels, but it seems that 2-up mode has somehow gotten broken in the process. When I look at the original test case, it comes up in 1-up mode and I don't see a way to switch it to 2-up.

Here's a link for convenience:

https://universalviewer-git-fork-saira-a-758-mnemoscene.vercel.app/#?xywh=-1538%2C0%2C11578%2C7617&iiifManifestId=https%3A%2F%2Fcollections.st-andrews.ac.uk%2F762295%2Fmanifest

I think this happened prior to my commit? I went back to the docs branch and it has the same issue, and there's no icons to switch between one and two up, yet other manifests look fine

@Saira-A

Saira-A commented Oct 31, 2024

Copy link
Copy Markdown
Contributor Author

I added the tests back and they all pass except for 'loads the viewer images' - this doesn't pass in the dev branch either.

The Config option had also stopped working so I redid that so when it's set to false the option doesn't show in the settings dialogue.

@demiankatz demiankatz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @Saira-A! One other thing we should do before we merge this is get the new language string ("Truncate Thumbnail Labels") translated into all the supported languages. Can @erinburnand help coordinate that?

@demiankatz

Copy link
Copy Markdown
Contributor

@Saira-A, there also seems to be a problem with the setting not initializing correctly sometimes. When switching manifests or refreshing the viewer page, I several times encountered a situation where the "truncate" box was checked, but the labels were not truncated. Is it possible the setting is persisting inconsistently with the way it is being initialized in the dialog box?

I think steps to reproduce are:

1.) View a manifest like https://collections.st-andrews.ac.uk/762295/manifest
2.) Turn off truncation
3.) Refresh the page
4.) Truncation remains turned off, but if you go to the settings dialog, the box is unexpectedly checked

(This seems to consistently cause the bad state, though I've only tested in Firefox so far).

@Saira-A

Saira-A commented Nov 1, 2024

Copy link
Copy Markdown
Contributor Author

Thanks @demiankatz - I missed a bit, that should be fixed now. I'll start getting the translations as well

@demiankatz demiankatz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Saira-A, I'm a bit confused about the tests...

When I check out the current dev branch and run npm test, I get this:

> universalviewer@4.0.25 test
> jest

 PASS  __tests__/test.js (8.196 s)
 PASS  src/content-handlers/iiif/PubSub.spec.ts (9.138 s)
 PASS  src/content-handlers/iiif/modules/uv-shared-module/XYWHFragment.spec.ts (9.051 s)
 PASS  src/Utils.spec.ts (7.086 s)

Test Suites: 1 skipped, 4 passed, 4 of 5 total
Tests:       3 skipped, 7 passed, 10 total
Snapshots:   0 total
Time:        15.749 s, estimated 18 s
Ran all test suites.

When I switch to this branch and run the test suite, I get this:

Test Suites: 1 failed, 1 skipped, 3 passed, 4 of 5 total
Tests:       4 failed, 3 skipped, 5 passed, 12 total
Snapshots:   0 total
Time:        13.121 s

I notice that you've switched the tests to use port 8080 instead of port 4444. If I change that back, I then get more successes:

 PASS  src/content-handlers/iiif/PubSub.spec.ts (10.133 s)
 PASS  src/Utils.spec.ts
 PASS  src/content-handlers/iiif/modules/uv-shared-module/XYWHFragment.spec.ts (9.907 s)
 FAIL  __tests__/test.js (16.937 s)
  ● loads the viewer images

    thrown: "Exceeded timeout of 5000 ms for a test.
    Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

      63 |
      64 |
    > 65 | it('loads the viewer images', async () => {
         | ^
      66 |   await page.waitForSelector('#thumb-0');
      67 |   const imageSrc = await page.$eval('#thumb-0 img', e => e.src);
      68 |   expect(imageSrc).toEqual(

      at Object.<anonymous> (__tests__/test.js:65:1)

Test Suites: 1 failed, 1 skipped, 3 passed, 4 of 5 total
Tests:       1 failed, 3 skipped, 8 passed, 12 total
Snapshots:   0 total
Time:        17.345 s
Ran all test suites.

I'm a little bit confused about all this, but I think I understand at least part of what is happening... there is some documentation which suggests that you need to run npm start before running the tests. That's going to put things up on port 8080, and I'm guessing that's why you changed the tests. However, in jest-puppeteer.config.js, the test suite is set up to run its own server on port 4444, which is presumably why things work in the dev branch even without starting anything up. The difference is that with npm start the code will automatically rebuild, and without it, you need to explicitly run npm run build to cause the latest changes to be tested.

So one issue seems to be that we need to decide on a single approach and configure/document everything accordingly!

In any case, it seems that the "loads the viewer images" test is commented out in the dev branch, so maybe we should leave it commented out here for now. I think fixing that problem is a separate issue.

I think if you comment out the failing test and change the port back from 8080 to 4444, we'll have this in a state where it can be merged safely, and we can figure out the rest through community conversation. What do you think?

@Saira-A

Saira-A commented Nov 12, 2024

Copy link
Copy Markdown
Contributor Author

Makes sense, thanks @demiankatz. I've also added the French, will post on the new Slack channel to get the rest :)

@demiankatz demiankatz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the progress, @Saira-A -- we're nearly done, but I'm having trouble with the tests. They're consistently failing in my environment, plus see below for a question about the commented-out "load the images" test.

I think this will be easier to manage if we can run tests as part of the GitHub process, so I've opened #1240 -- this will give us a common baseline so we're all running tests in the same environment, as well as catching changes that cause test failures. Maybe getting that merged into this PR will make further work here easier.

What do you think?

Comment thread __tests__/test.js Outdated
Comment on lines +64 to +72
// it('loads the viewer images', async () => {
// await page.waitForSelector('#thumb-0');
// const imageSrc = await page.$eval('#thumb-0 img', e => e.src);
// expect(imageSrc).toEqual(
// expect.stringContaining(
// 'https://iiif.wellcomecollection.org/image/b18035723_0001.JP2/full/90,/0/default.jpg'
// )
// );
// });

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test passes in the dev branch; is there a reason you have commented it out here?

@Saira-A

Saira-A commented Nov 28, 2024

Copy link
Copy Markdown
Contributor Author

Thanks @demiankatz - I'll have a look at your PR. I commented the other one out because for me my tests run but that one fails, both in my branch and the dev branch:
Screenshot 2024-11-28 at 12 13 27
Screenshot 2024-11-28 at 12 12 42

@demiankatz

Copy link
Copy Markdown
Contributor

@Saira-A, I occasionally see that failure in the dev branch, but it usually passes for me if I try again. I suspect there is some kind of timing/performance issue at play.

@demiankatz demiankatz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @Saira-A -- tests are passing for me locally now, and I've merged the dev branch into this PR to get the GitHub Actions updates in, and things are passing there as well.

I'm approving this, but I won't merge yet just in case you have any further changes you wish to make (or in case @LanieOkorodudu wants to double-check anything). If you're happy, though, please feel free to hit merge!

@LanieOkorodudu

Copy link
Copy Markdown
Contributor

@demiankatz and @Saira-A, I tested it again, and the fix looks great. Thank you both for the excellent work. I'm merging it now.

@LanieOkorodudu LanieOkorodudu merged commit de30eee into UniversalViewer:dev Dec 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Completed

Development

Successfully merging this pull request may close these issues.

5 participants