Skip to content

Config tree wip#1411

Merged
demiankatz merged 21 commits into
UniversalViewer:devfrom
LlGC-mag:config-tree-wip
Jun 4, 2025
Merged

Config tree wip#1411
demiankatz merged 21 commits into
UniversalViewer:devfrom
LlGC-mag:config-tree-wip

Conversation

@LlGC-mag

@LlGC-mag LlGC-mag commented May 12, 2025

Copy link
Copy Markdown
Contributor

Adds function to process current config and merge any custom config, then display the results at the bottom of the page in a very poorly styled accordion.

Drill down through the tree to see the config options, and display the current value (if any). If there is no value, the button will appear inactive.

Requires work from #1407

NB. very much a work in progress and there are likely to be bugs - please let me know if you come across any

@vercel

vercel Bot commented May 12, 2025

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 May 29, 2025 8:23am

@LanieOkorodudu

Copy link
Copy Markdown
Contributor

@LlGC-mag, Just a quick note, while testing with a custom config, I was a bit confused by the 'Clear saved viewer state before applying' option. I expected it to remove what I had just pasted, similar to how 'Clear annotation' works. But it seems to keep the pasted config regardless. I know this is still a WIP, and my feedback might be a bit out of scope for this PR, but I just thought I’d mention it in case it helps with refining the config workflow.

@demiankatz

Copy link
Copy Markdown
Contributor

@LanieOkorodudu, the "Clear saved viewer state" erases the browser's storage to reset the viewer state to default (e.g. forgetting any panel open/closed states that were stored as the result of user action). This is important because if you change default panel settings but the viewer remembers user activities, it appears as if the configuration had no effect, because the browser storage overrides the configurations. Maybe we need a better label for this checkbox to make its behavior more clear. Do you have any suggestions? Maybe something like "Reset browser storage to default state when applying configuration"?

@LlGC-mag

LlGC-mag commented May 13, 2025

Copy link
Copy Markdown
Contributor Author

@LanieOkorodudu Maybe the wording needs changing? The function is to remove any user settings stored by the browser which override the config which is pasted in or loaded by default. That work was in #1407 but it is required for the accordion menu underneath the main options.
At the moment, this draft PR is mainly to show what is loaded in as a config when the viewer is rendered so we can get an idea of the available options. I'm planning to expand it into something with more functionality but it's very basic at the moment - more a proof of concept

@demiankatz

Copy link
Copy Markdown
Contributor

@LlGC-mag, since #1407 has now been merged, you should be able to merge the dev branch back into this branch to reduce the diffs showing in this PR.

@demiankatz

Copy link
Copy Markdown
Contributor

I took a closer look at this, and it's off to an excellent start! A few comments:

  1. It seems like applying a custom config creates multiple accordions on the page. That probably won't be a problem in the long term if we create a target element on the page to inject the accordion into, rather than appending it to the end of the document. Maybe we should discuss where that would be most useful/appropriate -- above or below the config box, perhaps?
  2. It might be helpful to alphabetically sort the options at each level for findability/readability.
  3. Is the planned next step to make things editable in the tree? Seems like it might not be a huge step from here to make the individual items clickable so that they turn into inputs, and editing the inputs adjusts the JSON in the custom config box. There would be a little complexity in merging the existing config with new configs, and in type-sniffing to format the content from the input box correctly in the JSON, but I don't think those would be insurmountable problems.
  4. The code needs some style tweaking (inconsistent indentation, etc.). I know it's in a draft condition, so you're probably already aware of this, but we'll want to clean it up a little when it's closer to being finalized!
  5. Can some of the commented out code be removed at this point to clean things up?

@LlGC-mag

Copy link
Copy Markdown
Contributor Author

@demiankatz I've just pushed some changes and I hadn't seen your message until now. Most of the things you mention are things I've added:

  1. Dropping the accordion in at the end of the page was temporary - it should sit better in the page now.
  2. Makes sense to do this - not sure on the complexity of it with it being nested objects but I can have a look
  3. Yes, that was the intention. Boolean values should now be true/false select options with everything else in a text input. Still some work to do on using it to update the config
  4. The code is awful :D but at the moment I'm just getting everything working and capturing it before I fiddle too much and break it. Once there's something working I'll go through and tidy the code and the inline styles etc.
  5. I've removed a bit of commented code - just leaving in the bits I may need in the future for now

I imagine that I'll get this branch in a useable state, get it tested, then create a new branch and tidy things up before making a new PR

@demiankatz

Copy link
Copy Markdown
Contributor

Thanks, @LlGC-mag -- all sounds good! I don't think there's a need to create a separate PR, though; I see no disadvantage to just getting this one in shape and then squash-and-merging it when it's ready. :-)

@LanieOkorodudu

Copy link
Copy Markdown
Contributor

@LanieOkorodudu, the "Clear saved viewer state" erases the browser's storage to reset the viewer state to default (e.g. forgetting any panel open/closed states that were stored as the result of user action). This is important because if you change default panel settings but the viewer remembers user activities, it appears as if the configuration had no effect, because the browser storage overrides the configurations. Maybe we need a better label for this checkbox to make its behavior more clear. Do you have any suggestions? Maybe something like "Reset browser storage to default state when applying configuration"?

@demiankatz, I agree with what you suggested here. That makes sense to me.

@LanieOkorodudu

Copy link
Copy Markdown
Contributor

@LlGC-mag, @demiankatz, I'm a bit curious about this config option, "saveUserSettings". Does it refer to the settings tab? I tried changing the locale to something else, but when I set this config to true, it doesn't save my selected locale and instead defaults back to English.

Also;
termsOfUseEnabled", "seeAlsoEnabled" – I'm not sure what these config options are supposed to do when set to true. I tried using different sample manifests, but I didn’t notice any visible changes or results. I'm still testing the rest of it and using Saira's config doc to better understand the purpose of the remaining configurations.

@demiankatz

Copy link
Copy Markdown
Contributor

@LanieOkorodudu, I am also confused by saveUserSettings. The only impact I can definitely see it having has to do with the inclusion of the "remember settings" checkbox in the image adjustment control. That checkbox only appears when saveUserSettings is true. However, the code suggests that this setting should have broader impact, yet it doesn't seem to do what I would expect it to do, in terms of enabling/disabling use of browser storage more broadly. Browser storage seems to be used by default, even though the setting seems to be disabled by default. I think further investigation is needed.

termsOfUseEnabled controls whether a "terms of use" link appears in the footer of the Download and Share dialogs when a required statement is present. You can see this in the "Bride of the Tomb" manifest from Villanova, for example.

isSeeAlsoEnabled seems to be orphaned -- there's a method to retrieve the setting, but it's not used anywhere as far as I can tell.

@LanieOkorodudu

Copy link
Copy Markdown
Contributor

@LanieOkorodudu, I am also confused by saveUserSettings. The only impact I can definitely see it having has to do with the inclusion of the "remember settings" checkbox in the image adjustment control. That checkbox only appears when saveUserSettings is true. However, the code suggests that this setting should have broader impact, yet it doesn't seem to do what I would expect it to do, in terms of enabling/disabling use of browser storage more broadly. Browser storage seems to be used by default, even though the setting seems to be disabled by default. I think further investigation is needed.

termsOfUseEnabled controls whether a "terms of use" link appears in the footer of the Download and Share dialogs when a required statement is present. You can see this in the "Bride of the Tomb" manifest from Villanova, for example.

isSeeAlsoEnabled seems to be orphaned -- there's a method to retrieve the setting, but it's not used anywhere as far as I can tell.

I appreciate you taking the time to provide a detailed explanation.

@LanieOkorodudu

LanieOkorodudu commented May 20, 2025

Copy link
Copy Markdown
Contributor

I've tested most of the configuration options, and I wanted to highlight a few that left me a bit confused during testing, as it wasn’t always clear what behaviour to expect when applying them:

  • theme
  • tokenStorage
  • pessimisticAccessControl
  • multiSelectionMimeType
  • metrics
  • confinedImageSize
  • currentViewDisabledPercentage

It would be helpful to have some clarification or examples on what these configurations are intended to do, especially when defined. Most of the commonly used options, particularly those related to the footerPanel, worked as expected, which is great.

This is a broad and complex area, and we can't expect everything to be perfect right away. What I really appreciate about this PR is that it enables manual adjustment and testing of config options, which will be valuable going forward.

From my side, I'm happy for this PR to be merged. That said, others are more than welcome to add their input in case I've missed anything or didn’t cover enough in testing.

Thanks again @LlGC-mag and @demiankatz for the work you’ve both put into this!

@demiankatz demiankatz mentioned this pull request May 20, 2025
29 tasks
@demiankatz

Copy link
Copy Markdown
Contributor

@LanieOkorodudu, there is a checklist of settings that need better documentation on #1419. Several of the settings you mentioned were already on there, and I have added the others you mentioned to the list so we remember to investigate them further.

@LlGC-mag

Copy link
Copy Markdown
Contributor Author

After another look through the code there are some improvements I can see but nothing urgent enough to not merge it at this point if you're happy with the code and functionality?

@LlGC-mag LlGC-mag requested a review from demiankatz May 21, 2025 08:49
@LlGC-mag LlGC-mag self-assigned this May 21, 2025

@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, @LlGC-mag -- I think this is pretty close to being ready to merge. See below for a few comments and suggestions. There are some code style issues (mostly related to indentation) that we should definitely fix before merging, but which shouldn't be much work to address (especially the ones where you can just click to accept my suggestions automatically). I also had some broader suggestions about increased use of CSS and refactoring to smaller functions; you're welcome to use or ignore these ideas as you see fit -- I think they would help improve readability, but they shouldn't stand in the way of merging if you think it would be too much time/effort to implement them, or if you disagree with the approach.

Comment thread src/index.html Outdated
Comment thread src/index.html Outdated
Comment thread src/index.html Outdated
Comment thread src/index.html Outdated
Comment thread src/index.html

toggleButton.addEventListener("click", () => {
const isHidden = contentContainer.style.display === "none";
contentContainer.style.display = isHidden ? "block" : "none";

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.

More logic that feels like it might be more clearly implemented with a class and some CSS definitions.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Reworked this in one of the latest commits so that it toggles between classes

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.

It's still here -- has that change not been pushed up yet?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

It was pushed so the changes should be visible : a3d1ea7

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.

Ahh, I was looking for the direct .style.display assignment to be replaced with a class change, but I suppose that's not strictly necessary (unless we could use a single "open" / "closed" class to control both the icon and the visibility of the contents... but if that's too much work, no need to hack further).

Comment thread src/index.html
}
} else {
const valueElement = document.createElement("div");
if (typeof value === "boolean") {

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.

I don't insist on it, but it might improve readability to do some refactoring here -- e.g. create a getTrueFalseSelect function that you call for the inside of this if statement, etc., just so there's not so much code between the if/else clauses.

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 might also help reduce the chances of further indentation problems by keeping code blocks shorter and more self-contained).

Comment thread src/index.html
Comment thread src/index.html
Comment thread src/index.html Outdated
Comment thread src/index.html Outdated
LlGC-mag and others added 5 commits May 27, 2025 12:58
Co-authored-by: Demian Katz <demian.katz@villanova.edu>
Co-authored-by: Demian Katz <demian.katz@villanova.edu>
Co-authored-by: Demian Katz <demian.katz@villanova.edu>
Co-authored-by: Demian Katz <demian.katz@villanova.edu>
Co-authored-by: Demian Katz <demian.katz@villanova.edu>

@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, @LlGC-mag! I think this is in good enough shape to merge. Just noticed a couple of blank lines at the end of code blocks that we might as well tighten up. We also certainly could continue discussing refactoring/simplification, but if you feel we've reached a good stopping point, I don't see the need to drag things out forever and will be happy to approve and merge (after a final round of testing, of course).

Comment thread src/index.html Outdated
Comment thread src/index.html Outdated
Comment thread src/index.html

toggleButton.addEventListener("click", () => {
const isHidden = contentContainer.style.display === "none";
contentContainer.style.display = isHidden ? "block" : "none";

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.

Ahh, I was looking for the direct .style.display assignment to be replaced with a class change, but I suppose that's not strictly necessary (unless we could use a single "open" / "closed" class to control both the icon and the visibility of the contents... but if that's too much work, no need to hack further).

LlGC-mag and others added 2 commits May 29, 2025 09:21
Co-authored-by: Demian Katz <demian.katz@villanova.edu>
Co-authored-by: Demian Katz <demian.katz@villanova.edu>
@LlGC-mag

Copy link
Copy Markdown
Contributor Author

Thanks @demiankatz - those final bits of whitespace should be gone now and hopefully the testers won't find anything major!

@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, @LlGC-mag, I'm happy to approve this for now. It's still in draft mode, so if you're done, you should take it out of draft so it can be merged.

If you want to do more work related to my earlier suggestions, there's certainly further improvement that could be made, but that can also be addressed later. It's working and reasonable as-is!

@LlGC-mag LlGC-mag marked this pull request as ready for review June 4, 2025 08:19
@LlGC-mag

LlGC-mag commented Jun 4, 2025

Copy link
Copy Markdown
Contributor Author

@demiankatz Thanks Demian - moved to ready for review now

@demiankatz demiankatz merged commit 6a30f4b into UniversalViewer:dev Jun 4, 2025
4 checks passed
@demiankatz

Copy link
Copy Markdown
Contributor

Thanks, @LlGC-mag, I have merged this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants