Add ability to fold Group headings

[claremacrae]

From Discord

I'm using the Obsidian Tasks plugin and have a query like this:

```tasks
not done
group by filename
group by heading
path includes 90-Projects
```

Can you add a fold icon to the filenames and the headlines? It like to collapse some items when going through the list.

[claremacrae]

See #1323 - a request to fold indented tasks when viewed in reading mode.

[claremacrae]

See #1466 - another request to fold group headings.

[st--]

@claremacrae this is something I'd be very keen on too; I had a look at the code, how to make it work with the is-collapsed class (see #1323 (comment)) would be beyond me, but I was wondering if a simpler solution for folding away groups would be to just make use of the <detail> tag, i.e. edit

obsidian-tasks/src/Renderer/QueryRenderer.ts

Lines 314 to 322 in e65dd75

	private async addAllTaskGroups(tasksSortedLimitedGrouped: TaskGroups, content: HTMLDivElement) {
	for (const group of tasksSortedLimitedGrouped.groups) {
	// If there were no 'group by' instructions, group.groupHeadings
	// will be empty, and no headings will be added.
	await this.addGroupHeadings(content, group.groupHeadings);
	await this.createTaskList(group.tasks, content);
	}
	}

into something like this:

    private async addAllTaskGroups(tasksSortedLimitedGrouped: TaskGroups, content: HTMLDivElement) {
        for (const group of tasksSortedLimitedGrouped.groups) {
            // If there were no 'group by' instructions, group.groupHeadings
            // will be empty, and no headings will be added.

            const detailsGroup = content.createEl('details');
            const summaryItem = content.createEl('summary'); // or detailsGroup.createEl(...)?
            // detailsGroup.appendChild(summaryItem) ?
            await this.addGroupHeadings(summaryItem, group.groupHeadings);

            await this.createTaskList(group.tasks, detailsGroup); // does this then create the new elements within the <details></details> tag?
        }
    }

It's been a while that I've dealt with javascript so my implementation might be completely off, but if you think that's going in the right direction, I would be happy to try and implement this. <details> should provide folding/unfolding out of the box at least...

[claremacrae]

Hi @st-- Thank you very much indeed for looking at this.

I am currently overwhelmed with work finishing off the Dependencies feature, so won't have the capacity to do much supporting on other PRs for a couple of weeks or more.

Re <detail> - I don't really know the consequences of this, but if Obsidian wasn't using <detail> to represent folding, then I think it will likely be trading one set of unhappy users for another...

I think Tasks should do whatever Obsidian does for folding headings. And it should honour the user settings as to whether folding is enabled or not.

I note that dataview-generated headings also don't support folding.

[st--]

Dataviews seems to have the same issue (and e.g. in this thread someone also suggests the <details> workaround). It might be a fundamentally challenging problem, as apparently the rendering of views like Dataview or Tasks plugin happens at a different stage to the rendering of the markdown. So I'm not sure if it's even possible to do it in the same way as Obsidian :(

I might try and implement the <details> approach at least for myself - and if I get it to work, you can see if you'd still want to include it in Tasks (perhaps with its own config flag) once you have capacity for it again.

[claremacrae]

That’s a great idea. Thank you very much indeed.

[claremacrae]

I've had a look at the generated HTML and asked the following in #theme-dev in Discord:

---

I'm not sure if this is a #plugin-dev or #theme-dev question... I think it needs more CSS expertise, so will start here....
The Tasks plugin can group tasks together under headings - Levels 4, 5, and 6.
I would love to be able to make those headings foldable: currently they don't fold.
I've looked at the HTML generated...

For ##### Later (3 tasks), in Reading mode, default theme, all snippets turned off, Obsidian generates:

<div>
    <h5 data-heading="Later (3 tasks)">
        <div class="heading-collapse-indicator collapse-indicator collapse-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                 class="svg-icon right-triangle">
                <path d="M3 8L12 17L21 8"></path>
            </svg>
        </div>
        Later (3 tasks)
    </h5>
</div>

(The above code is the same, regardless of whether or not Settings > Editor > Fold headings is enabled.

And Tasks generates:

<h5 class="tasks-group-heading">
    <p>Later (3 tasks)</p>
</h5>

Should I simply rewrite the heading-creation in Tasks, to mimic those 10 or so lines of Obsidian code (and would it then work on all platforms?)
Or is there a less verbose way of achieving the folding effect?
(in case it's relevant, the code is all generated inside a class that inherits MarkdownRenderChild.

---

[jamie9090]

[claremacrae]

Please don’t just +1 - they are an interruption and definite demotivation.
Use the up-vote facility, and new information that adds context or helps solve the issue is always welcome.

[jamie9090]

Sorry Clare! Well noted. Thank you for your efforts. 🙏️

[mdbraber]

As a very quick solution I've hacked together a working sample based on @st-- suggestion. This is no where polished enough to be used in production, but it might get this a bit further for those interested. Most importantly: this does not allow for folding of sub-levels so each level folds independently (which is not what you want)

diff --git a/src/Renderer/QueryResultsRenderer.ts b/src/Renderer/QueryResultsRenderer.ts
index d5a69b01..1e3bc56b 100644
--- a/src/Renderer/QueryResultsRenderer.ts
+++ b/src/Renderer/QueryResultsRenderer.ts
@@ -242,10 +242,12 @@ export class QueryResultsRenderer {
         for (const group of tasksSortedLimitedGrouped.groups) {
             // If there were no 'group by' instructions, group.groupHeadings
             // will be empty, and no headings will be added.
-            await this.addGroupHeadings(content, group.groupHeadings);
+            const detailsEl = createAndAppendElement('details', content);
+            const summaryItem = createAndAppendElement('summary', detailsEl);
+            await this.addGroupHeadings(summaryItem, group.groupHeadings);

             const renderedListItems: Set<ListItem> = new Set();
-            await this.createTaskList(group.tasks, content, queryRendererParameters, renderedListItems);
+            await this.createTaskList(group.tasks, detailsEl, queryRendererParameters, renderedListItems);
         }
     }

You can use this CSS to style:

 details summary .tasks-group-heading {
    margin: 0;
    display: inline-block;
}

[mdbraber]

Here's a better solution to allow folding all levels using the <details> and <summary>

diff --git a/src/Renderer/QueryResultsRenderer.ts b/src/Renderer/QueryResultsRenderer.ts
index d5a69b01..ba4881ca 100644
--- a/src/Renderer/QueryResultsRenderer.ts
+++ b/src/Renderer/QueryResultsRenderer.ts
@@ -239,13 +239,34 @@ export class QueryResultsRenderer {
         content: HTMLDivElement,
         queryRendererParameters: QueryRendererParameters,
     ) {
+        // Map from nestingLevel -> parent details element
+        const levelContainers = new Map<number, HTMLElement>();
+        levelContainers.set(0, content); // level 0 groups attach to root content
+
         for (const group of tasksSortedLimitedGrouped.groups) {
             // If there were no 'group by' instructions, group.groupHeadings
             // will be empty, and no headings will be added.
-            await this.addGroupHeadings(content, group.groupHeadings);
+            let detailsEl
+            for (const heading of group.groupHeadings) {
+                if(heading.nestingLevel == 0) {
+                    levelContainers.set(0, content); // level 0 groups attach to root content
+                }
+
+                // Decide where this group should be attached
+                const parentEl = levelContainers.get(heading.nestingLevel || 0) || content;
+
+                // Create details for this group
+                detailsEl = createAndAppendElement('details', parentEl);
+                const summaryItem = createAndAppendElement('summary', detailsEl);
+                await this.addGroupHeading(summaryItem, heading);
+
+                // Store this details element as the container for the *next level down*
+                levelContainers.set(heading.nestingLevel + 1, detailsEl);
+            }
 
+            // Add tasks inside
             const renderedListItems: Set<ListItem> = new Set();
-            await this.createTaskList(group.tasks, content, queryRendererParameters, renderedListItems);
+            await this.createTaskList(group.tasks, detailsEl || content, queryRendererParameters, renderedListItems);
         }
     }

[claremacrae]

For others, there is a useful discussion going on in Obsidian Discord #plugin-dev channel about how to preserve the folding-state information:
https://discord.com/channels/686053708261228577/840286264964022302/1421165141961085130

Thanks to @mdbraber for your work on this.

For your following question of how to identify headings in the saved folding state
From Obsidian Discord #tasks channel
https://discord.com/channels/686053708261228577/1257646566999588874/1421158563371417661

I'm working on folding code for Tasks which is going okay; I'm trying to figure out how to save folding state. I can save folding state in LocalStorage for folding headings; but if those headings appear in a different query that state is also applied there. I'd like to set / identify each query which a unique id (manual is fine). What would be a good way to set (or compute) a property for a query?
Several options to consider:

• Create a "YAML" style header like code-button in Codescript Toolkit
• Compute a property based on the query text
• Add an additional command id to set a unique id for a query

I am not sure, but I think that before we can answer that, we need to define the desired behaviour, and that will likely come out of exploratory testing.

But here are some initial ideas - which may give you ideas for exploratory testing.

Query.queryId

The simplest thing to use would be Query.queryId . That increments throughout an Obsidian session, for each Query instance that is created.

It might be that a QueryResultsRenderer retains the same Query for as long as the note containing it is open.

Or, in testing, you might find that under some circumstances the QueryResultsRenderer gets a new Query object, with a new queryId.

• Perhaps when properties are changed in the query-file?
• Perhaps when the query is re-read at midnight?

QueryResultsRenderer.someNewId or somewhere else?

In which case, you might need to add an Id in QueryResultsRenderer or perhaps QueryRenderChild instead....

(I don't know if it matters, but QueryResultsRenderer does not have access to the Obsidian API - QueryRenderChild does.)

[mdbraber]

Thanks @claremacrae. I think these are some of the requirements for determining a queryId for a query:

• Should be based on the file where the query exists (queries in different files keep different state)
• Should be based on the specific query (different queries in the same file keep different state)
• Should be based on the specific occurrence (similar queries in the same files keep different state)
• Should be independent on the location of the query in a file

Based on these requirements a 'queryId' should be computed and should be stable throughout different sessions. Therefore I think Query.queryId would not be stable enough to use. My suggestion would be a computed property based on:

• File location
• Query content
• Occurence of the same query in the same file (this would mean that when you change the order of exactly similar queries the state would be swapped)

[claremacrae]

@ilandikov has shared this with me - out-of-the-box collapsing in HTML

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details

Does this work in Obsidian?

[mdbraber]

Yes it does very well - I'm using it in my daily driver at the moment

[mericano1]

What's the latest on this, Does it mean we can already use it or is easier to implement it .. ?