feat: enhance web viewer with layer presets, measurements and notes #57
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Reviewer's GuideThis PR augments the web viewer by adding advanced layer management (filtering, bulk show/hide, persistent presets), a live measurement and annotation overlay with CSV export and quick-note workflow, and backend support for streaming measurements and notes over WebSocket. Sequence diagram for real-time measurement and note synchronization via WebSocketsequenceDiagram
participant Frontend
participant Backend
participant "KLayout"
actor User
User->>Frontend: Add ruler or note
Frontend->>Backend: Send annotation event via WebSocket
Backend->>"KLayout": Update annotation state
"KLayout"-->>Backend: Triggers annotation changed event
Backend->>Frontend: Send measurement-update (rulers & notes)
Frontend->>Frontend: Update overlay with measurements and notes
Class diagram for new and updated frontend data structures (layer presets, measurements, notes)classDiagram
class Layer {
+id: number
+name: string
+v: boolean
+children: Layer[]
}
class LayerPreset {
+[layerId: number]: boolean
}
class Measurement {
+id: number
+label: string
+length: number
+dx: number
+dy: number
+angle: number
+p1: Point
+p2: Point
}
class Note {
+id: number
+text: string
+position: Point
}
class Point {
+x: number
+y: number
}
Layer "1" -- "*" Layer : children
Measurement "1" -- "1" Point : p1
Measurement "1" -- "1" Point : p2
Note "1" -- "1" Point : position
Class diagram for updated backend annotation and measurement streamingclassDiagram
class LayoutViewServerEndpoint {
+note_category: str
+viewport_point_to_layout(x, y): DPoint
+measurement_dump(): list
+note_dump(): list
+send_measurements(websocket): None
}
class Annotation {
+id(): int
+category: str
+style: str
+p1: DPoint
+p2: DPoint
+text(): str
}
LayoutViewServerEndpoint "1" -- "*" Annotation : manages
Annotation "1" -- "1" DPoint : p1
Annotation "1" -- "1" DPoint : p2
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `src/kweb/static/viewer.js:611-617` </location>
<code_context>
+ renderLayerTable();
+}
+
+function setVisibilityRecursively(layers, visible) {
+ layers.forEach((layer) => {
+ layer.v = visible;
+ updateLayerVisibilityClassById(layer.id, visible);
+ if (layer.children) {
+ setVisibilityRecursively(layer.children, visible);
+ }
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Check for Array type before recursing into children.
If layer.children is not an array, setVisibilityRecursively may throw. Use Array.isArray(layer.children) to ensure safe recursion.
```suggestion
function setVisibilityRecursively(layers, visible) {
layers.forEach((layer) => {
layer.v = visible;
updateLayerVisibilityClassById(layer.id, visible);
if (Array.isArray(layer.children)) {
setVisibilityRecursively(layer.children, visible);
}
```
</issue_to_address>
### Comment 2
<location> `src/kweb/static/viewer.js:911-917` </location>
<code_context>
+ return { x, y };
+}
+
+function openAnnotationDialog() {
+ if (!canvas || !socket || socket.readyState !== WebSocket.OPEN) {
+ return;
+ }
+ const text = prompt("Nota (se usará la última posición del cursor)", "");
+ if (text === null) {
+ return;
</code_context>
<issue_to_address>
**suggestion:** Prompt text is hardcoded in Spanish.
Consider making the prompt message configurable or localizable to support internationalization.
```suggestion
+// Simple localization/messages object. Extend as needed.
+const messages = {
+ en: {
+ annotationPrompt: "Note (the last cursor position will be used)",
+ },
+ es: {
+ annotationPrompt: "Nota (se usará la última posición del cursor)",
+ },
+ // Add more languages as needed
+};
+
+// Function to get user's language, fallback to 'en'
+function getUserLanguage() {
+ return navigator.language?.slice(0,2) || 'en';
+}
+
+function getMessage(key) {
+ const lang = getUserLanguage();
+ return messages[lang]?.[key] || messages['en'][key];
+}
+
+function openAnnotationDialog() {
+ if (!canvas || !socket || socket.readyState !== WebSocket.OPEN) {
+ return;
+ }
+ const text = prompt(getMessage("annotationPrompt"), "");
+ if (text === null) {
+ return;
```
</issue_to_address>
### Comment 3
<location> `src/kweb/static/viewer.js:902` </location>
<code_context>
let x = lastPointer.x;
</code_context>
<issue_to_address>
**suggestion (code-quality):** Prefer object destructuring when accessing and using properties. ([`use-object-destructuring`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/use-object-destructuring))
```suggestion
let {x} = lastPointer;
```
<br/><details><summary>Explanation</summary>Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.
From the [Airbnb Javascript Style Guide](https://airbnb.io/javascript/#destructuring--object)
</details>
</issue_to_address>
### Comment 4
<location> `src/kweb/static/viewer.js:903` </location>
<code_context>
let y = lastPointer.y;
</code_context>
<issue_to_address>
**suggestion (code-quality):** Prefer object destructuring when accessing and using properties. ([`use-object-destructuring`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/use-object-destructuring))
```suggestion
let {y} = lastPointer;
```
<br/><details><summary>Explanation</summary>Object destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.
From the [Airbnb Javascript Style Guide](https://airbnb.io/javascript/#destructuring--object)
</details>
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Added layer panel enhancements: text filter, show/hide all, persistent presets stored in localStorage, and state synchronization with KLayout.
Introduced real-time measurement panel with length/Δx/Δy/angle, ruler export to CSV, and automatic updates from backend events.
Implemented quick annotations workflow: “Add Note” prompt tied to last cursor position, notes persisted via WebSocket, and unified overlay displaying both rulers and notes.
Summary by Sourcery
Enhance the web viewer by extending the layer panel with search, visibility controls, and persistent presets; introduce a real-time measurement and notes overlay with CSV export; and add a quick annotations workflow tied to cursor position and synchronized with the backend.
New Features:
Enhancements: