Introduce watermark with click-through and non-selectable behavior

[TahaMjp]

✨ Add Watermark Feature

📄 Description

This PR introduces a fully functional watermark feature to the application.
The watermark is now implemented with proper interaction handling, styling, and responsive behavior.
It can be positioned, styled, and displayed without interfering with other UI components.

🔹 Key Changes

• Implemented watermark rendering logic.
• Added customizable positioning (supports different screen sizes).
• Improved styling:
  • Adjusted opacity for subtle but visible presence.
  • Balanced size for better readability without distraction.
• Ensured responsiveness on window resize.
• Maintained correct stacking order (avoids blocking interactive UI elements).
• Verified no performance impact on graph rendering or app interaction.

🛠 Implementation Notes

• Used z-index adjustments to ensure the watermark stays behind key UI elements where required.
• Added minimal gap between watermark text and any overlapping content.
• Designed to be easy to enable/disable without breaking layout.

✅ Testing

• Manually tested across different browsers and screen sizes.
• Verified that the watermark remains visible without blocking clicks or other UI interactions.
• Checked for accessibility compliance with appropriate contrast.

🔄 Additional Notes

Feel free to choose which approach/version you prefer — I can apply it and make the changes before merging.
Thanks for helping me and guiding me with your tips and feedback throughout the process.

---

Closes #45

[SakshayMahna]

Looks good!
Just a few suggestions:

• Instead of making changes to base.css. Consider creating a new CSS file watermark.css in the same folder.
• [Question] Is it possible to add the watermark without adding this line, directly importing the image in CSS:

const logoUri = webview.asWebviewUri(
    vscode.Uri.joinPath(extensionUri, 'assets', 'launchmap-logo.png')
  );

[SakshayMahna]

As well could you try running the playwright tests locally (If on a linux system) and see whether the tests are running fine:
npm run test:webview

Playwright tests work by comparing screenshots of the visualisations. Since, we made a change to the visualization (adding a watermark) I was expecting it to fail. So just need to ensure that once.

[TahaMjp]

Hi, thanks for the feedback and suggestions!

I’ve successfully split the watermark styles into a new watermark.css file within the same folder and linked it properly in the webview HTML. Everything is working well with the styles separated now.

Regarding your question about importing the watermark image directly in CSS without defining the logoUri in the extension code:

Due to the way VS Code Webviews work, we must use webview.asWebviewUri() to convert local file paths (like the logo image) into a secure, webview-safe URI. This is necessary because the webview sandbox prevents direct access to local extension files for security reasons.

Therefore, referencing the image directly in CSS with a static relative path isn’t reliable or supported. Injecting the converted URI dynamically via the extension code (like in an <img> tag or inline CSS) ensures the image loads correctly inside the webview.

Also, regarding the npm run test:webview command — I prefer not to run it because I’m on Windows, and in my experience it almost always throws environment-related errors. This makes it impractical to use for testing in my setup.

Thanks again for your guidance!

[SakshayMahna]

Cool! Everything looks fine.
Let me just investigate the visualization test issue. And I will get back to you.

[SakshayMahna]

Understood!
The playwright tests make use of an index.html file that is separate from the VSCode extension one, which you made edits to. Since this is a visual improvement and does not affect the core functionality, I think we can go forward with it.

Just last few changes, then we are good to go:

• Remove the comments from the CSS file. I think your code is already quite self descriptive. No need for comments.
• I ran the extension on my system, the watermark seems quite huge compared to the overall graph. Could you reduce the current size? I understand we can go on with these visual changes, and still can't get the overall aesthetics right. But I think this would be one last edit before merging.

For Reference:

Possibly making it halfway smaller should do the trick.

[TahaMjp]

Hi, I’ve cleaned up the comments in the CSS file and also reduced the watermark size to exactly half (0.5) as requested.
Really glad to hear you’ve approved the changes and that everything else is fine.

---

Preview

[SakshayMahna]

Perfect! Merging this now.
Thanks a lot for incorporating all the feedback!
Feel free to contribute to the other issue we discussed as well.