Make objectives collapsible

[a-velasco]

Overview

This PR makes objective headings in each project optionally collapsible for the user. This should help reduce the visual clutter while browsing through objectives. (Addresses issue #134)

Changes:

• Added an event listener to project.html to catch when someone clicks on an objective heading, and toggle the collapsed attribute
• Some logic to update that state locally in the browser. (I don't think it is necessary for this property to get stored in the database)
• Minor changes to the CSS to make collapsed headings more discernible from one another
• A simple test in test-browser.py

How this has been tested

I tested this branch locally with the dev version of the application.

In the Google Chrome browser, I entered the Developer console and tested the following behavior while monitoring Application > Local storage:

1. Go to project 1, collapse "Agreeableness" and "Colourfulness". Refresh. These sections remain collapsed.
2. Return to dashboard, go to project 2. Nothing is collapsed. Collapse "Sound". Return to project 1. "Agreeableness and "Colourfulness" remain collapsed in 1.
3. Return to 2. "Sound" remains collapsed in 2.
4. Log in as superuser. "Agreeableness" and "Colourfulness" are collapsed in project 1 and "Sound" is collapsed in project 2.

This last behavior (4) is not ideal. If a different user logs into the dashboard in the same browser, I believe the dashboard will apply the previous users's collapsed preferences on the new user's view of the same projects. That being said, it's an unlikely scenario that two users would use the same browser instance and projects.

---

Manual checks

• If you changed the Dashboard application or the rock, have you increased the version number in rockcraft.yaml? Remember to use the same version number in README.md.

[a-velasco]

At first I tried using the unicode characters ▼ and ▶, but the browser renders them with different sizes. Even when I explicitly used the same variation selector for both.

Only quick way I found to keep them identical is to use the same symbol and rotate it, but I am very open to a better alternative.

[dwilding]

I suppose an alternative would be to use SVG? Your approach is neat, I like it. I suppose we could even have the icon rotate during the transform (but that's very not essential!)

[dwilding]

I tried this and it works great, thank you!

4. Log in as superuser. "Agreeableness" and "Colourfulness" are collapsed in project 1 and "Sound" is collapsed in project 2.

This last behavior (4) is not ideal. If a different user logs into the dashboard in the same browser, I believe the dashboard will apply the previous users's collapsed preferences on the new user's view of the same projects. That being said, it's an unlikely scenario that two users would use the same browser instance and projects.

I agree that it's very unlikely for two users to log in using the same browser, outside of testing scenarios. So I don't have any problem with this.

Since you requested the feature, I'm curious: How long would you want the expanded/collapsed setting to persist for? Is the idea that you want to be able to open and close objectives as you're doing a review, but don't mind if that doesn't persist for ever? Or is it more like you want to always (for you) close objectives that are eg not applicable?

If it's the former, we could consider session storage instead of local storage (I think) for a less persistent setting.

---

Let's find someone else to try out the design and get their impressions. I'll ping you internally.

[a-velasco]

@dwilding I personally would like this to persist beyond sessions. So every time I log in and look at my product objectives, whatever I collapsed last time remains collapsed.

That being said, I think storing this state in the database (for total persistence) is overkill and could hinder performance; so local browser storage seemed like a decent compromise for a setting that is purely a personal visualization preference.

Now that I think about similar patterns in other applications, it might be worth adding a button that collapses all and expands all.

Definitely agree that we need more opinions about the design before moving forward - I'll update the conversation here as it progresses.