Skip to content

docs: improve Layers panel and comment features #519

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions content/en/kanvas/advanced/performance/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,20 @@ To improve the performance of your design, consider optimizing by disabling one
<figcaption>Control which layers of your design are visible using the Layers panel.</figcaption>
</figure>

Some layers specifically offer control of visibility of components, while other layers offer control over the ongoing evaluation of relationships between components. Depending on the type of layer disabled, either specific components or all components by type will display or not be displayed, allowing you to finely tune the performance of you design rendering experience by saving design resources and improving the performance of Kanvas as you adjust both the number and type of components in view. Note, that even though you might hide components, those components are not deleted or removed from your design. These components are simply hidden from current view.
Some layers specifically offer control of **visibility of components**, while other layers offer control over the **ongoing evaluation of relationships** between components.

In the same way, as you toggle the evaluation of different types of relationships, understand that this releationships between your components still exist. Those relationsihps are simply temporarily hidding from view and the overhead of their evaluation eliminated while the respective type of relationship is disabled.
Depending on the type of layer disabled, either specific components or all components by type will display or not be displayed, allowing you to finely tune the performance of you design rendering experience by saving design resources and improving the performance of Kanvas as you adjust both the **number and type** of components in view.

> Even though you might hide components, those components are not deleted or removed from your design. These components are simply hidden from current view.

In the same way, as you toggle the evaluation of different types of relationships, understand that this releationships between your components still exist. Those relationsihps are simply **temporarily hidding** from view and the overhead of their evaluation eliminated while the respective type of relationship is disabled.

Using the Layers panel you control the level of sophistication or simplicity of the rendering of components and relationships in your designs. You can both simplify your design layout by removing unnecessary elements and improve performance simultaneously. Alternatively, you can increase the level of detail in your design by enabling additional layers and relationships, while controlling the balance between detail and performance.

{{< alert type="info" title="Keep It Lightweight" >}}
Hide layers you don’t need at the moment to keep your workspace lightweight and responsive.
{{< /alert >}}

### Optimize use of Images in your Design

To optimize performance, consider the following:
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 38 additions & 9 deletions content/en/kanvas/designer/comments/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ aliases:
- /meshmap/designer/comments
---

Kanvas's Designer offers enables you to place comments "inline" with your infrastructure as code. Use comments to offer feedback to team members, take detailed design notes, capture helpful tips for your team members, and include justification as to your infrastructure and application configuration decisions. Pay it forward to your future self by leaving historical record for reference later.
Copy link
Member

Choose a reason for hiding this comment

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

good catch!

Kanvas's Designer enables you to place comments "inline" with your infrastructure as code. Use comments to offer feedback to team members, take detailed design notes, capture helpful tips for your team members, and include justification as to your infrastructure and application configuration decisions. Pay it forward to your future self by leaving historical record for reference later.

<figure style="width:400px;">
<img src="./kanvas-comment.png" alt="Comments in Designer" />
Expand Down Expand Up @@ -57,9 +57,7 @@ Context-click on any area of your design, and from the contextual menu, select "

Any number of users can participate in a single comment. When more than one user makes a remark in the same comment, a comment thread ensues.

When a new thr is added, existing comments are typically pushed down within the same comment thread. This means that the new comment appears at the bottom of the thread, with earlier comments remaining visible but lower in the list.

Initiate a comment thread by just adding a remark on an existing comment. Collaborators can reply directly to comments in real-time (approximating a chat). Comment threads create a structured dialogue around each point of feedback for easy reference.
You can initiate a comment thread by adding a remark to an existing comment. Collaborators can reply directly to comments in real-time (approximating a chat). Comment threads create a structured dialogue around each point of feedback for easy reference.

### Utilize Mentions

Expand Down Expand Up @@ -88,11 +86,36 @@ You can also reopen comments.

Manage your comment history by clicking on the "View Comment History" button. This allows you to revisit past discussions and decisions, ensuring that important context is never lost.

### Reopening (unresolving) Comments
### Hide Comments Using the Layers Panel

You can temporarily hide or reveal open comments using the Layers panel—just like toggling layers in Photoshop.
This helps you focus on the most important parts of your design and improves clarity during reviews.

<figure style="width:400px;">
<img src="./comments-hide.png" alt="Hide comments using Layers" />
<figcaption>Hide comments using the Layers panel</figcaption>
</figure>

{{< alert type="info" title="Explore More Panel Features" >}}
Want to improve the performance of your workspace? [Learn more about using the Layers panel](https://docs.layer5.io/kanvas/advanced/performance/#optimize-your-design-using-the-layers-panel).
{{< /alert >}}

### Name Comments for Easy Access

After a comment has been resolved, you might need to reopen the discussion. Reopening a comment allows you to reinitiate conversations, address additional concerns, or make further changes.
If you plan to keep certain comments in your design for documentation, team reference, or historical context, it's a good idea to give them meaningful names. This simple habit improves clarity for both you and your team—especially when reviewing or revisiting designs later.

If a comment is resolved by mistake, it can be reopened. Adding a new comment to a resolved discussion will also re-open the thread.
<figure style="width:400px;">
<img src="./naming-comments.png" alt="Naming a comment in Designer" />
</figure>

{{< alert type="info" title="Best Practice" >}}
Give long-lived comments short, descriptive names like `"Needs Load Balancer"` or `"Review DNS settings"`
so you can quickly find them in the Layers panel later on.
{{< /alert >}}

### Reopen a Resolved Comment

If a comment is resolved by mistake, it can be reopened. Adding a new comment to a resolved discussion will also re-open the thread. Reopening a comment allows you to reinitiate conversations, address additional concerns, or make further changes.

Follow the steps below to reopen a comment:

Expand All @@ -105,7 +128,6 @@ Follow the steps below to reopen a comment:

Each time that a new comment is made in a design, remark placed into existing comment, a comment is resolved or reopened, you and your collaborators might receive notification via email.


<figure style="width:400px;">
<img src="./example-notification-email.png" alt="Example email notification received when design comment is made" />
<figcaption>Example email notification received when design comment is made.</figcaption>
Expand All @@ -130,6 +152,13 @@ Customize your notification preferences to mute email notifications for comments
<figcaption>Example of comments in Designer</figcaption>
</figure>

You can also manage all your comment notification settings centrally through the **Cloud -> Account -> [Preference](https://docs.layer5.io/cloud/identity/users/notification-preferences/)**.

<figure style="width:400px;">
<img src="./comment-cloud-manage.png" alt="Manage comment notifications in the Cloud Portal" style="width:auto">
<figcaption>Manage all comment notifications centrally in the Cloud</figcaption>
</figure>

**What Muting Affects:**

- *Muted Design's Comment Thread:* This includes all subsequent replies within the same thread, whether directed at you or not.
Expand All @@ -154,7 +183,7 @@ Kanvas does not track the read or unread status of messages inside comment threa

### Be specific and actionable

Provide specific feedback rather that the design can act on. Vague comments can lead to misunderstandings and delays in the design process. Support your feedback with examples or references. This can help clarify your point and provide the designer with tangible suggestions for improvement.
Provide specific feedback that the designer can act on. Vague comments can lead to misunderstandings and delays in the design process. Support your feedback with examples or references. This can help clarify your point and provide the designer with tangible suggestions for improvement.

### Balance positive and contructive feedback

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.