"Collapse All", "Collapse Contents", "Collapse Layer", "Collapse Recursively", and "Collapse Others" Functionality for Tree and Text Mode

[Jediweirdo]

Thanks for working on this project! This is hands down the best JSON viewer I've ever used and is perfectly serviceable as it is now. This isn't an "issue" more than it's a feature request. When I collapse an object with multiple layers in Text or Tree mode, it'll preserve the collapsed status of every array/object inside the parent object. While there are times when I find lossless collapsing useful, there are many more when I wish I had more nuanced control over what collapses when. So, I propose these 5 collapse types (which are really just 2 types in a trench coat) for text and tree mode:

1. Collapse All
This is already in Tree Mode, but this would be nice to have in text mode as both a button and a keyboard shortcut.

2. Collapse Layer
There are times when I want to edit a dictionary entry I know the location of, but trying to find it quickly gets annoying when there's a gargantuan number of nested arrays and dictionaries between me and my destination. Using the Find/Replace menu helps, but I have to take my hands off the mouse to type the name of the entry. It's a first-world problem, but it gets infinitely more annoying the longer you have to do it. Instead, what if you could alt + click the parent object/array's collapse button to collapse every nested dictionary/array inside of it (but not the parent object itself)? This would basically be equivalent to collapsing every topmost entry by hand.

3. Collapse Contents
This is a very similar idea to Collapse layer, but Collapse Contents would recursively collapse the parent entry's contents instead of the normal lossless collapse that saves the collapse state of objects. Instead of alt + click, you would activate it with ctrl + click.

4. Collapse Recursively
Another similar type of collapse with a very minor difference. If you hold shift while content or layer collapsing a parent object, it'll collapse the parent as well. Think of it as a self-contained "Collapse all."

5. Collapse Others
Compared to the middle three suggestions, this one is pretty unique. If you're comparing an entry in a large object and jump to a difference that's in be in the middle of an object, it gets disorienting fast. Thanks to this, I often find myself collapsing neighboring entries so I can get a better idea of where I am. Digging my way through a dictionary like I'm stuck in a hole is one of my least favorite things to do when parsing a dictionary. If you could only "focus" on the dictionary you're inside of and automatically "hide" (collapse) everything else. Not only would this be helpful in comparison mode for reasons stated above, but it would also help maintain a sense of cleanliness if implemented in other modes like text/tree (ctrl + alt + click shortcut perhaps?).

Even implementing just one of these features would make my day. I hope you enjoy your day :)

[josdejong]

Thanks for your kind words! Glad to hear you like the editor and .

(1) Thanks to the recent #554 we can now control expand/collapse in tree mode too. It may be possible to implement recursively collapsing too, I see that doesn't work (i.e. editor.collapse([], true). Then, we can add a collapse all and expand all button to tree mode too. @CahierX do you have an idea in what would be needed to make recursive collapse work in text mode?

(2, 3, 4) To recursively collapse or expand a nested object/array, you can ctrl+click its Expand button (I think that is you're idea of alt+click). Maybe that covers your ideas already?

(5) "Collapse everyting else" is an interesting idea! I'm not sure yet what a good name for this feature would be or what a good way would be to expose this to the user: a quick key like ctrl+alt+click, or maybe a button in the main menu or in the context menu. Thinking...🤔

[Jediweirdo]

Wow, I wasn't expecting such a speedy reply! Sorry for only seeing this half a day later.

(2, 3, 4) To recursively collapse or expand a nested object/array, you can ctrl+click its Expand button (I think that is you're idea of alt+click). Maybe that covers your ideas already?

It sort of does, but I'm now realizing that it's probably hard to tell the (admittedly minor) differences between 2, 3, and 4. So, let me give an example of what I mean:

Say you're editing a dictionary and after some tinkering, you come up with this (... means the object is collapsed):

{
  "Test Dictionary": {
    "a": {
      "1": "bar",
      "2": {
        "lore": "ispbum"
      }
    },
    "b": {
      "3": "bar",
      "4": {...}
    },
    "c": [
      "5",
      "6"
    ],
    "dee": "foo"
  }
}

But darn! When you go to use the dictionary in your program, you realize that the program can't find the "d" key's value due to an unknown typo! You could scroll all the way to the key in question and fix it, but scrolling through all those open dictionaries would be a pain. You also can't search for the "dee" key through find/replace because you don't know what the typo is. Normally, you would be forced to take 5 minutes doom scrolling through your dictionary and manually fix the key. But instead, you simply alt + click on "Test Dictionary"'s collapse button and this happens:

{
  "Test Dictionary": {
    "a": {...},
    "b": {...},
    "c": [...],
    "dee": "foo"
  }
}

All the objects inside "Test Dictionary" would collapse, but "Test Dictionary" itself stays expanded. From there, you could then easily fix "dee"'s typo.

The only difference between Collapse Layer (alt + click) and Collapse Contents (ctrl + click) is how recursive the collapse is:

• If you collapse the layer with alt + click, then your collapse history inside "a", "b", and "c" remains untouched. That would mean that the collapsed dictionary in "b.4" would stay collapsed, but the expanded dictionary in "a.2" would still be expanded. (Feature 2)
• But if you instead collapsed the contents with ctrl + click, both dictionaries in "a.2" and "b.4" would be collapsed. (Feature 3)
• Holding shift while doing layer collapsing or contents collapsing would not only perform their respective actions, but also collapse "Test Dictionary" so the dictionary would look like { "Test Dictionary": { ... } }. (Feature 4)

Hopefully, that makes things clearer.

(5) "Collapse everyting else" is an interesting idea! I'm not sure yet what a good name for this feature would be or what a good way would be to expose this to the user: a quick key like ctrl+alt+click, or maybe a button in the main menu or in the context menu. Thinking...🤔

Why not both?

• In text mode, it would collapse everything that isn't the immediate object/array the cursor is residing in through the quick key
• In tree mode, it could be an option in the right-click menu (maybe something along the lines of "Collapse Neighbors" or "Focus on Selected") and collapse everything that isn't the dictionary/array the right-click menu is currently editing.
• In comparison mode, it could be toggled through a checkbox called "Collapse Matching Objects" or something. Now that I think about it, this feature would also be amazing in the find/replace menu...

[CahierX]

Thanks for your kind words! Glad to hear you like the editor and .

(1) Thanks to the recent #554 we can now control expand/collapse in tree mode too. It may be possible to implement recursively collapsing too, I see that doesn't work (i.e. editor.collapse([], true). Then, we can add a collapse all and expand all button to tree mode too. @CahierX do you have an idea in what would be needed to make recursive collapse work in text mode?

(2, 3, 4) To recursively collapse or expand a nested object/array, you can ctrl+click its Expand button (I think that is you're idea of alt+click). Maybe that covers your ideas already?

(5) "Collapse everyting else" is an interesting idea! I'm not sure yet what a good name for this feature would be or what a good way would be to expose this to the user: a quick key like ctrl+alt+click, or maybe a button in the main menu or in the context menu. Thinking...🤔

Support text Mode collapse recursive #558

[josdejong]

Wow, I wasn't expecting such a speedy reply!

Ehhh, sorry for that? 😂

All the objects inside "Test Dictionary" would collapse, but "Test Dictionary" itself stays expanded.

So basically you want an option to collapse all childs of an array/object in a non-recursive way. The current feature that comes closest is first recursively collapsing "Test Dictionary" and (ctrl+click) then non-recursively expanding it again (click). Only difference is that then "a.2" and "b.4" are collapsed too. You can of course expand them recursively again with a ctrl+click.

I now clearly understand the differenes between your Feature 2, 3, and 4, thanks. These cases are quite specific though. I think adding more features behind different shortcut keys like alt+click and shift+click can help a power user like you, but are generally hard to explain to the average user. Have a set of similar but subtly different options can obfuscate/confuse what you're looking for, so generally it's best to try to keep an API as concise as possible. It took quite some effort to explain your ideas of 2, 3, and 4, that tells something 😉. I think the current options expand collapse and recursive or not are the the most important ones, providing concise but quite flexible control. I would like to leave it at this to keep the API simple to explain and understand.

A different idea: I think the power of performing queries on your data may be underexposed. For example, to debug your "dee" issue, you could right click on "Test dictionary", click "Transform", and then enter keys() as query to quickly inspect all keys in the dictionary and spot the typo in the preview window. Then you just close the "Transform" modal again without executing it. Maybe some way we can better expose what you can do with queries.

About (5). Yeah indeed, good ideas! Your idea for collapsing all but differences in comparison mode is nice! What comes closest to that right now is first recursively collapsing both documents, and then stepping through the differences.