Repository: 390MiniCapstone/Polaris
Pull request #138: [TASK] Added SVG Tool and Appropriate Documentation
Author: login: JayC-SF
Labels: name: task
Created: 2025-03-17T01:38:02Z | Merged: 2025-03-17T02:16:19Z

## 🏗️ Task Implementation: Added SVG Tool and Appropriate Documentation

### ✅ **Changes Made**
This tool provides an accurate SVG coordinate finder, converting mouse positions from screen-based coordinates to the SVG coordinate system. It loads an external SVG file and tracks clicks or movements, displaying precise x, y values while correctly handling scaling, transformations, and viewBox adjustments. Unlike standard tools that return screen coordinates, this tool ensures precision by leveraging getScreenCTM().inverse(), making it ideal for working with dynamic or responsive SVGs.

The tool can be found under the `Polaris-FE/tools/SVGCoordinateTool.html` location in the project.

---

### 🔬 **How to Test**
<!-- Provide clear steps to test the implementation. -->
1. The SVG file to render is opened through a text editor to see the code.
2. The code is copied into the `SVGCoordinateTool.html` file.
3. Open the `SVGCoordinateTool.html` through the browser.
4. Open the Developer Tools to see the Console.
5. Start clicking on the map to find the coordinates for the location clicked.

---
### 📸 **Screenshots/Logs**
<!-- Attach any relevant screenshots or logs for verification. -->
https://github.com/user-attachments/assets/cb48ac65-c941-46ac-b023-d6d69648750f

---
### 📝 **Additional Notes (Optional)**
<!-- Any extra information or future considerations for this task. -->
No additional information.

---




Diff:
diff --git a/Polaris-FE/package.json b/Polaris-FE/package.json
index bd06b21..33bc067 100644
--- a/Polaris-FE/package.json
+++ b/Polaris-FE/package.json
@@ -113,7 +113,7 @@
     "typescript": "^5.3.3"
   },
   "lint-staged": {
-    "**/*.{js,jsx,ts,tsx,json,css,md}": [
+    "**/*.{js,jsx,ts,tsx,json,css,md,html}": [
       "npm run format:fix"
     ]
   },
diff --git a/Polaris-FE/tools/SVGCoordinateTool.html b/Polaris-FE/tools/SVGCoordinateTool.html
new file mode 100644
index 0000000..19df1bc
--- /dev/null
+++ b/Polaris-FE/tools/SVGCoordinateTool.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SVG Mouse Coordinates</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+      }
+      #coordinates {
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- PUT SVG BELOW HERE -->
+
+    <!-- PUT SVG ABOVE HERE -->
+    <p id="coordinates">Mouse Position: (0, 0)</p>
+
+    <script>
+      const svg = document.querySelector('svg');
+      const coordsText = document.getElementById('coordinates');
+
+      function getSVGCoords(event) {
+        let pt = svg.createSVGPoint();
+        pt.x = event.clientX;
+        pt.y = event.clientY;
+        let svgCoords = pt.matrixTransform(svg.getScreenCTM().inverse());
+        const width = svg.getAttribute('width');
+        const height = svg.getAttribute('height');
+        svgCoords.x /= width;
+        svgCoords.y /= height;
+        return svgCoords;
+      }
+
+      svg.addEventListener('click', event => {
+        let coords = getSVGCoords(event);
+        coordsText.textContent = `Mouse Position: (${coords.x.toFixed(2)}, ${coords.y.toFixed(2)})`;
+        console.log(coords);
+      });
+    </script>
+  </body>
+</html>
diff --git a/docs/frontend/end-to-end-testing.md b/docs/frontend/end-to-end-testing.md
index bf3e323..b3e7b79 100644
--- a/docs/frontend/end-to-end-testing.md
+++ b/docs/frontend/end-to-end-testing.md
@@ -1,28 +1,37 @@
 # End-to-End Testing Polaris App with Maestro
-## 1. Global Requirements
+## 1. Table of Contents
+- [End-to-End Testing Polaris App with Maestro](#end-to-end-testing-polaris-app-with-maestro)
+  - [1. Table of Contents](#1-table-of-contents)
+  - [2. Global Requirements](#2-global-requirements)
+  - [3. Android Configuration](#3-android-configuration)
+    - [3.1 Requirements](#31-requirements)
+  - [4. IOS Configuration](#4-ios-configuration)
+    - [4.1 Install Maestro](#41-install-maestro)
+    - [4.2 Running Maestro on IOS Simulator](#42-running-maestro-on-ios-simulator)
+
+## 2. Global Requirements
 - Java.
 - Node.js version 22.14 or more.
-## 1. Android Configuration
+## 3. Android Configuration
 
-### 1. Requirements
+### 3.1 Requirements
 - Polaris App Installation
-- Java
 - Android Studio
 
 (more to come later)
 
-## 2. IOS Configuration
+## 4. IOS Configuration
 
 - XCode 14 or higher
 - Mac Operating System
 
-### 2.1 Install Maestro
+### 4.1 Install Maestro
 Using the `brew` package library, you can use the following command:
 ```bash
 brew install maestro
 ```
 
-### 2.2 Running Maestro on IOS Simulator
+### 4.2 Running Maestro on IOS Simulator
 Open one terminal running the native build code:
 
 ```bash
diff --git a/docs/frontend/tools.md b/docs/frontend/tools.md
new file mode 100644
index 0000000..74424b2
--- /dev/null
+++ b/docs/frontend/tools.md
@@ -0,0 +1,10 @@
+# Frontend Tools
+## 1. Table of Contents
+- [Frontend Tools](#frontend-tools)
+  - [1. Table of Contents](#1-table-of-contents)
+  - [2. SVG Coordinate Finder](#2-svg-coordinate-finder)
+
+## 2. SVG Coordinate Finder
+Finding an **SVG coordinate finder** is difficult because most tools return **screen coordinates** instead of **SVG coordinates**, leading to inaccuracies. Many solutions don’t handle scaling, `viewBox`, or transformations properly. Using an **`index.html` tool** allows full control, leveraging `getScreenCTM().inverse()` to map mouse positions accurately within the SVG.
+
+You may find the tool under [`Polaris-FE/tools/SVGCoordinateTool.html`](/Polaris-FE/tools/SVGCoordinateTool.html)
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index 1a45def..27037ee 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,7 +1,13 @@
 # Polaris Documentation
 
-More to come in this document in the future.
+More to come in this document in the future 🚀.
 
-## 1. Front-End Documentation
-- [Developer Installation](frontend/dev-installation.md)
-- [End-to-End Testing](frontend/end-to-end-testing.md)
\ No newline at end of file
+## 1. Table of Contents
+- [Polaris Documentation](#polaris-documentation)
+  - [1. Table of Contents](#1-table-of-contents)
+  - [2. Front-End Documentation](#2-front-end-documentation)
+
+## 2. Front-End Documentation
+- [Developer Installation](./frontend/dev-installation.md)
+- [End-to-End Testing](./frontend/end-to-end-testing.md)
+- [Frontend Tools](./frontend/tools.md)
\ No newline at end of file


Reviews:
user: login: GianlucaGirardi
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-17T02:02:16Z
user: login: GianlucaGirardi
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-17T02:03:26Z
user: login: GianlucaGirardi
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-17T02:04:03Z
user: login: GianlucaGirardi
body: I added some comments for discussion. 
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-17T02:05:25Z
user: login: JayC-SF
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-17T02:06:48Z
user: login: GianlucaGirardi
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-17T02:08:25Z
user: login: GianlucaGirardi
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-17T02:16:18Z
user: login: AsimRahman88
body: Great work! everything is working on my end
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-17T02:22:28Z

Review comments:
path: docs/index.md
user: login: GianlucaGirardi
body: Great idea providing documentation for the tool.
created_at: 2025-03-17T02:02:15Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SVG Mouse Coordinates</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+      }
+      #coordinates {
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- PUT SVG BELOW HERE -->
+
+    <!-- PUT SVG ABOVE HERE -->
+    <p id="coordinates">Mouse Position: (0, 0)</p>
+
+    <script>
+      const svg = document.querySelector('svg');
+      const coordsText = document.getElementById('coordinates');
+
+      function getSVGCoords(event) {
+        let pt = svg.createSVGPoint();
+        pt.x = event.clientX;
+        pt.y = event.clientY;
+        let svgCoords = pt.matrixTransform(svg.getScreenCTM().inverse());
+        const width = svg.getAttribute('width');
+        const height = svg.getAttribute('height');
+        svgCoords.x /= width;
+        svgCoords.y /= height;
+        return svgCoords;
+      }
+
+      svg.addEventListener('click', event => {
+        let coords = getSVGCoords(event);
+        coordsText.textContent = `Mouse Position: (${coords.x.toFixed(2)}, ${coords.y.toFixed(2)})`;
+        console.log(coords);
path: Polaris-FE/tools/SVGCoordinateTool.html
user: login: GianlucaGirardi
body: Should we `console.log` the `coords` variable or the `coordsText.textContent`?
created_at: 2025-03-17T02:03:26Z
author_association: COLLABORATOR
diff_hunk: @@ -113,7 +113,7 @@
     "typescript": "^5.3.3"
   },
   "lint-staged": {
-    "**/*.{js,jsx,ts,tsx,json,css,md}": [
+    "**/*.{js,jsx,ts,tsx,json,css,md,html}": [
path: Polaris-FE/package.json
user: login: GianlucaGirardi
body: Nice catch.
created_at: 2025-03-17T02:04:02Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SVG Mouse Coordinates</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+      }
+      #coordinates {
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- PUT SVG BELOW HERE -->
+
+    <!-- PUT SVG ABOVE HERE -->
+    <p id="coordinates">Mouse Position: (0, 0)</p>
+
+    <script>
+      const svg = document.querySelector('svg');
+      const coordsText = document.getElementById('coordinates');
+
+      function getSVGCoords(event) {
+        let pt = svg.createSVGPoint();
+        pt.x = event.clientX;
+        pt.y = event.clientY;
+        let svgCoords = pt.matrixTransform(svg.getScreenCTM().inverse());
+        const width = svg.getAttribute('width');
+        const height = svg.getAttribute('height');
+        svgCoords.x /= width;
+        svgCoords.y /= height;
+        return svgCoords;
+      }
+
+      svg.addEventListener('click', event => {
+        let coords = getSVGCoords(event);
+        coordsText.textContent = `Mouse Position: (${coords.x.toFixed(2)}, ${coords.y.toFixed(2)})`;
+        console.log(coords);
path: Polaris-FE/tools/SVGCoordinateTool.html
user: login: JayC-SF
body: I think for the sake of simplicity we should just console.log the coords variable, maybe we should consider adding more features into this tool later on and create another issue for it
created_at: 2025-03-17T02:06:48Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SVG Mouse Coordinates</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+      }
+      #coordinates {
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- PUT SVG BELOW HERE -->
+
+    <!-- PUT SVG ABOVE HERE -->
+    <p id="coordinates">Mouse Position: (0, 0)</p>
+
+    <script>
+      const svg = document.querySelector('svg');
+      const coordsText = document.getElementById('coordinates');
+
+      function getSVGCoords(event) {
+        let pt = svg.createSVGPoint();
+        pt.x = event.clientX;
+        pt.y = event.clientY;
+        let svgCoords = pt.matrixTransform(svg.getScreenCTM().inverse());
+        const width = svg.getAttribute('width');
+        const height = svg.getAttribute('height');
+        svgCoords.x /= width;
+        svgCoords.y /= height;
+        return svgCoords;
+      }
+
+      svg.addEventListener('click', event => {
+        let coords = getSVGCoords(event);
+        coordsText.textContent = `Mouse Position: (${coords.x.toFixed(2)}, ${coords.y.toFixed(2)})`;
+        console.log(coords);
path: Polaris-FE/tools/SVGCoordinateTool.html
user: login: GianlucaGirardi
body: I agree.
created_at: 2025-03-17T02:08:25Z
author_association: COLLABORATOR

PR comments:
user: login: codecov[bot]
created_at: 2025-03-17T02:01:07Z
body: ## [Codecov](https://app.codecov.io/gh/390MiniCapstone/Polaris/pull/138?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=390MiniCapstone) Report
All modified and coverable lines are covered by tests :white_check_mark:

<details><summary>🚀 New features to boost your workflow: </summary>

- ❄ [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- 📦 [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-03-17T02:01:40Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=390MiniCapstone_Polaris&pullRequest=138) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=390MiniCapstone_Polaris&pullRequest=138&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=390MiniCapstone_Polaris&pullRequest=138&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=390MiniCapstone_Polaris&pullRequest=138&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=390MiniCapstone_Polaris&pullRequest=138&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=390MiniCapstone_Polaris&pullRequest=138&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=390MiniCapstone_Polaris&pullRequest=138)


author_association: NONE
user: login: AsimRahman88
created_at: 2025-03-17T02:04:21Z
body: Are the coordinates of the map on the web browser the same for the application version?
author_association: COLLABORATOR
user: login: GianlucaGirardi
created_at: 2025-03-17T02:07:08Z
body: Please fill out the documentation section of the PR.
author_association: COLLABORATOR
user: login: JayC-SF
created_at: 2025-03-17T02:13:36Z
body: > Are the coordinates of the map on the web browser the same for the application version?

The coordinates do match since we base the coordinates off of the SVG width and height! 👍 
author_association: COLLABORATOR