From edbac34a2887f670ed041172c7fefa4984099cda Mon Sep 17 00:00:00 2001
From: Nicole Iftekhar <t-niftekhar@microsoft.com>
Date: Tue, 23 Jul 2024 09:54:01 -0700
Subject: [PATCH 1/8] IMDF Editor Tool including editing toolbar, clickable
 units, and geojson info

---
 package-lock.json                             | 238 +++++++++++-----
 package.json                                  |   3 +
 .../places-preview-map/indes.style.js         |  32 +++
 .../conversion/places-preview-map/index.js    | 258 +++++++++++++++---
 .../theme/floorPlanStyles.js                  |  10 +
 .../conversion/places-preview-map/utils.js    |  20 +-
 6 files changed, 457 insertions(+), 104 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5558902..23f99b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@turf/turf": "^6.5.0",
         "@zip.js/zip.js": "^2.7.31",
         "azure-maps-control": "^3.1.2",
+        "azure-maps-drawing-tools": "^1.0.3",
         "azure-maps-indoor": "^0.2.3",
         "cross-env": "^7.0.3",
         "file-saver": "^2.0.5",
@@ -36,6 +37,7 @@
         "@testing-library/jest-dom": "^6.1.4",
         "@testing-library/react": "^14.1.2",
         "@testing-library/user-event": "^14.5.1",
+        "css-loader": "^7.1.2",
         "cypress": "^13.6.0",
         "eslint-plugin-cypress": "^2.15.1",
         "flush-promises": "^1.0.2",
@@ -45,6 +47,7 @@
         "proj4": "^2.8.0",
         "prop-types": "^15.8.1",
         "react-scripts": "^5.0.1",
+        "style-loader": "^4.0.0",
         "webpack-bundle-analyzer": "^4.10.1"
       }
     },
@@ -9726,6 +9729,14 @@
         "@maplibre/maplibre-gl-style-spec": "^19.3.0"
       }
     },
+    "node_modules/azure-maps-drawing-tools": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/azure-maps-drawing-tools/-/azure-maps-drawing-tools-1.0.3.tgz",
+      "integrity": "sha512-MLShWL8pedVd71L5Iovb5gFA1vkqQ01EM0u3RLKfCEjz9b3VYHTqO607SbyYUkUxdU2l2UmazSNfWYdtCoU8ow==",
+      "dependencies": {
+        "azure-maps-control": "^2.3.2 || ^3.0.1"
+      }
+    },
     "node_modules/azure-maps-indoor": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/azure-maps-indoor/-/azure-maps-indoor-0.2.3.tgz",
@@ -11214,29 +11225,38 @@
       }
     },
     "node_modules/css-loader": {
-      "version": "6.7.3",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
-      "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz",
+      "integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==",
       "dev": true,
       "dependencies": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.4.19",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
+        "postcss": "^8.4.33",
+        "postcss-modules-extract-imports": "^3.1.0",
+        "postcss-modules-local-by-default": "^4.0.5",
+        "postcss-modules-scope": "^3.2.0",
         "postcss-modules-values": "^4.0.0",
         "postcss-value-parser": "^4.2.0",
-        "semver": "^7.3.8"
+        "semver": "^7.5.4"
       },
       "engines": {
-        "node": ">= 12.13.0"
+        "node": ">= 18.12.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/webpack"
       },
       "peerDependencies": {
-        "webpack": "^5.0.0"
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.27.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
       }
     },
     "node_modules/css-loader/node_modules/lru-cache": {
@@ -22029,9 +22049,9 @@
       "dev": true
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
       "dev": true
     },
     "node_modules/picomatch": {
@@ -22224,9 +22244,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
       "dev": true,
       "funding": [
         {
@@ -22243,9 +22263,9 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -22916,9 +22936,9 @@
       }
     },
     "node_modules/postcss-modules-extract-imports": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
       "dev": true,
       "engines": {
         "node": "^10 || ^12 || >= 14"
@@ -22928,9 +22948,9 @@
       }
     },
     "node_modules/postcss-modules-local-by-default": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz",
+      "integrity": "sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==",
       "dev": true,
       "dependencies": {
         "icss-utils": "^5.0.0",
@@ -22945,9 +22965,9 @@
       }
     },
     "node_modules/postcss-modules-scope": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz",
+      "integrity": "sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==",
       "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.4"
@@ -24932,6 +24952,41 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/react-scripts/node_modules/css-loader": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
+      "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.33",
+        "postcss-modules-extract-imports": "^3.1.0",
+        "postcss-modules-local-by-default": "^4.0.5",
+        "postcss-modules-scope": "^3.2.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-scripts/node_modules/dedent": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -25796,6 +25851,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-scripts/node_modules/style-loader": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
+      "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
     "node_modules/react-scripts/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -26985,9 +27056,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -27386,19 +27457,19 @@
       }
     },
     "node_modules/style-loader": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
-      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
+      "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
       "dev": true,
       "engines": {
-        "node": ">= 12.13.0"
+        "node": ">= 18.12.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/webpack"
       },
       "peerDependencies": {
-        "webpack": "^5.0.0"
+        "webpack": "^5.27.0"
       }
     },
     "node_modules/stylehacks": {
@@ -36889,6 +36960,14 @@
         "@maplibre/maplibre-gl-style-spec": "^19.3.0"
       }
     },
+    "azure-maps-drawing-tools": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/azure-maps-drawing-tools/-/azure-maps-drawing-tools-1.0.3.tgz",
+      "integrity": "sha512-MLShWL8pedVd71L5Iovb5gFA1vkqQ01EM0u3RLKfCEjz9b3VYHTqO607SbyYUkUxdU2l2UmazSNfWYdtCoU8ow==",
+      "requires": {
+        "azure-maps-control": "^2.3.2 || ^3.0.1"
+      }
+    },
     "azure-maps-indoor": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/azure-maps-indoor/-/azure-maps-indoor-0.2.3.tgz",
@@ -38013,19 +38092,19 @@
       }
     },
     "css-loader": {
-      "version": "6.7.3",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
-      "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz",
+      "integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==",
       "dev": true,
       "requires": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.4.19",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
+        "postcss": "^8.4.33",
+        "postcss-modules-extract-imports": "^3.1.0",
+        "postcss-modules-local-by-default": "^4.0.5",
+        "postcss-modules-scope": "^3.2.0",
         "postcss-modules-values": "^4.0.0",
         "postcss-value-parser": "^4.2.0",
-        "semver": "^7.3.8"
+        "semver": "^7.5.4"
       },
       "dependencies": {
         "lru-cache": {
@@ -46241,9 +46320,9 @@
       "dev": true
     },
     "picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
       "dev": true
     },
     "picomatch": {
@@ -46386,14 +46465,14 @@
       }
     },
     "postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       }
     },
     "postcss-attribute-case-insensitive": {
@@ -46772,16 +46851,16 @@
       }
     },
     "postcss-modules-extract-imports": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
       "dev": true,
       "requires": {}
     },
     "postcss-modules-local-by-default": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz",
+      "integrity": "sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==",
       "dev": true,
       "requires": {
         "icss-utils": "^5.0.0",
@@ -46790,9 +46869,9 @@
       }
     },
     "postcss-modules-scope": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz",
+      "integrity": "sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==",
       "dev": true,
       "requires": {
         "postcss-selector-parser": "^6.0.4"
@@ -48233,6 +48312,22 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "css-loader": {
+          "version": "6.11.0",
+          "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
+          "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
+          "dev": true,
+          "requires": {
+            "icss-utils": "^5.1.0",
+            "postcss": "^8.4.33",
+            "postcss-modules-extract-imports": "^3.1.0",
+            "postcss-modules-local-by-default": "^4.0.5",
+            "postcss-modules-scope": "^3.2.0",
+            "postcss-modules-values": "^4.0.0",
+            "postcss-value-parser": "^4.2.0",
+            "semver": "^7.5.4"
+          }
+        },
         "dedent": {
           "version": "0.7.0",
           "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -48893,6 +48988,13 @@
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
         },
+        "style-loader": {
+          "version": "3.3.4",
+          "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
+          "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==",
+          "dev": true,
+          "requires": {}
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -49799,9 +49901,9 @@
       "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
     },
     "source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "dev": true
     },
     "source-map-loader": {
@@ -50116,9 +50218,9 @@
       "dev": true
     },
     "style-loader": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
-      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
+      "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
       "dev": true,
       "requires": {}
     },
diff --git a/package.json b/package.json
index c480db0..a74af26 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@turf/turf": "^6.5.0",
     "@zip.js/zip.js": "^2.7.31",
     "azure-maps-control": "^3.1.2",
+    "azure-maps-drawing-tools": "^1.0.3",
     "azure-maps-indoor": "^0.2.3",
     "cross-env": "^7.0.3",
     "file-saver": "^2.0.5",
@@ -31,6 +32,7 @@
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
+    "css-loader": "^7.1.2",
     "cypress": "^13.6.0",
     "eslint-plugin-cypress": "^2.15.1",
     "flush-promises": "^1.0.2",
@@ -40,6 +42,7 @@
     "proj4": "^2.8.0",
     "prop-types": "^15.8.1",
     "react-scripts": "^5.0.1",
+    "style-loader": "^4.0.0",
     "webpack-bundle-analyzer": "^4.10.1"
   },
   "overrides": {
diff --git a/src/pages/conversion/places-preview-map/indes.style.js b/src/pages/conversion/places-preview-map/indes.style.js
index 2fa0cac..d3458c6 100644
--- a/src/pages/conversion/places-preview-map/indes.style.js
+++ b/src/pages/conversion/places-preview-map/indes.style.js
@@ -1,10 +1,42 @@
 import { css } from '@emotion/css';
 
+export const mapTextWrapper = css `
+  display: flex;
+  gap: 10px;
+`
+
 export const imdfPreviewMapWrapper = css`
   position: relative;
+  width: 100%;
+  flex: 5 1 70px;                              
 `;
 
 export const imdfPreviewMap = css`
   width: 100%;
   height: 500px;
 `;
+
+export const layerSelect = css `
+  position: relative;
+  top: 65%;
+`;
+
+export const textWrapper = css `
+  flex: 1 1 70px; 
+  position: relative;
+  display: inline;
+  margin-top: 1%;
+`;
+
+export const textArea = css `
+  width: 95%;
+  height: 95%;
+  white-space: nowrap;
+  resize: none;
+`;
+
+export const saveButtonWrapper = css `
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+`;
diff --git a/src/pages/conversion/places-preview-map/index.js b/src/pages/conversion/places-preview-map/index.js
index 5039c30..756ab41 100644
--- a/src/pages/conversion/places-preview-map/index.js
+++ b/src/pages/conversion/places-preview-map/index.js
@@ -1,11 +1,16 @@
 import { Map, control, layer, source } from 'azure-maps-control';
+import {control as draw_control, drawing} from 'azure-maps-drawing-tools';
 import { getDomain, useConversionStore, useLevelsStore, useUserStore } from 'common/store';
 import { useEffect, useMemo, useState } from 'react';
-import { imdfPreviewMap, imdfPreviewMapWrapper } from './indes.style';
+import { DefaultButton } from '@fluentui/react';
+import { logsButton } from '../style';
+import { imdfPreviewMap, imdfPreviewMapWrapper, layerSelect, textWrapper, textArea, mapTextWrapper, saveButtonWrapper } from './indes.style';
 import LevelSelector from './level-selector';
+import LayerSelector from './layer-selector';
 import MapNotification from './map-notification';
 import { calculateBoundingBox, getFeatureLabel, getFillStyles, getLineStyles, getTextStyle, processZip } from './utils';
-
+import { currentEditData, groupAndSort, drawingModeChanged, writeToInfoPanel, grabToPointer } from './imdf-model-helpers';
+import 'azure-maps-drawing-tools/dist/atlas-drawing.min.css';
 import 'azure-maps-control/dist/atlas.min.css';
 
 const PlacesPreviewMap = ({ style }) => {
@@ -16,16 +21,23 @@ const PlacesPreviewMap = ({ style }) => {
   const [units, setUnits] = useState({ features: [] });
   const [levels, setLevels] = useState({ features: [] });
 
+  // const [building, setBuilding] = useState({ features: [] }); // building will be used eventually
+  const [footprint, setFootprint] = useState({ features: [] });
+
   useEffect(() => {
     if (!imdfPackageLocation) return;
 
     processZip(imdfPackageLocation).then(files => {
       const unitFile = files.find(file => file.filename === 'unit.geojson');
       const levelFile = files.find(file => file.filename === 'level.geojson');
+      const buildingFile = files.find(file => file.filename === 'building.geojson');
+      const footprintFile = files.find(file => file.filename === 'footprint.geojson');
 
-      if (unitFile && levelFile) {
+      if (unitFile && levelFile && buildingFile && footprintFile) {
         setUnits(unitFile.content);
         setLevels(levelFile.content);
+        // setBuilding(buildingFile.content);
+        setFootprint(footprintFile.content);
       }
     });
   }, [imdfPackageLocation]);
@@ -35,15 +47,17 @@ const PlacesPreviewMap = ({ style }) => {
   const selectedLevel = useMemo(() => {
     const level = levels.features.find(item => item.id === selectedLevelId) || levels.features[0] || {};
     setSelectedLevelId(level.id);
-
     return level;
   }, [levels, selectedLevelId]);
 
+  const [selectedLayerId, setSelectedLayerId] = useState(null);
+
   useEffect(() => {
+    var drawingManager;
     const map = new Map('azure-maps-container', {
       bounds: calculateBoundingBox(levels),
       subscriptionKey: subscriptionKey,
-      language: 'en-US',
+      language: 'en-US', 
       domain: getDomain(geography),
       staticAssetsDomain: getDomain(geography),
       style: 'blank',
@@ -54,64 +68,238 @@ const PlacesPreviewMap = ({ style }) => {
     });
 
     map.events.add('ready', () => {
-      const groupedFeatures = {};
-      units.features
-        .filter(item => item.properties.level_id === selectedLevel.id)
-        .forEach(feature => {
-          const { category } = feature.properties;
-          if (!groupedFeatures[category]) groupedFeatures[category] = { features: [] };
-          groupedFeatures[category].features.push({
-            ...feature,
-            properties: { ...feature.properties, label: getFeatureLabel(feature, language) },
-          });
+      var drawingToolbar = new draw_control.DrawingToolbar({ 
+        position: 'bottom-right', 
+        style: 'light', 
+        buttons: ['edit-geometry', 'erase-geometry', 'draw-polygon'] 
+      });    
+
+      if(selectedLayerId === 'unitButton') {
+        drawingManager = new drawing.DrawingManager(map, {
+          toolbar: drawingToolbar
         });
+        unitInteractions(units, drawingManager, map);
+      } else if(selectedLayerId === 'levelButton') {
+        // Retrieve information about the level currently chosen by user
+        const selectedLevelDetails = levels.features.filter(item => item.id === selectedLevel.id);
 
-      const keys = Object.keys(groupedFeatures);
+        const dataSource = new source.DataSource();
+        map.sources.add(dataSource);
+        dataSource.add(selectedLevelDetails);
+        
+        // Displays outline of level + change in color when cursor is hovering
+        var lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
+        var lineHoverLayer = new layer.LineLayer(dataSource, null, {
+          fillColor: 'rgba(150, 50, 255, 0.2)',
+          filter: ['==', ['get', '_azureMapsShapeId'], '']
+        });
 
-      keys.forEach(category => {
-        const features = groupedFeatures[category].features;
+        map.layers.add([lineLayer, lineHoverLayer], 'walkwayPolygons');
+        grabToPointer([lineLayer, lineHoverLayer], map);
+        featureHover(lineLayer, lineHoverLayer);
+      } else if(selectedLayerId === 'footprintButton') {
+        const groupedFeatures = {};
+        const keys = Object.keys(groupedFeatures);
 
         const dataSource = new source.DataSource();
         map.sources.add(dataSource);
-        dataSource.add(features);
+        dataSource.add(footprint);
+
+        // Displays outline of footprint + change in color when cursor is hovering
+        var footprintLines = new layer.LineLayer(dataSource, null, getLineStyles('footprint', 'walkway'));
+        var footprintLayer = new layer.PolygonLayer(dataSource, 'footprintClick', getFillStyles('footprint', keys.category));
+        var footprintHoverLayer = new layer.PolygonLayer(dataSource, null, {
+          fillColor: 'rgba(150, 50, 255, 0.2)',
+          filter: ['==', ['get', '_azureMapsShapeId'], '']
+        });
+
+        map.layers.add([footprintLayer, footprintHoverLayer, footprintLines], 'roomPolygons');
+        grabToPointer([footprintLayer, footprintHoverLayer], map);
+        featureHover(footprintLayer, footprintHoverLayer);
+      } else {
+        // Displays levels + units
+        const groupedFeatures = groupAndSort(units, language, selectedLevel);
+        const keys = Object.keys(groupedFeatures); 
+
+        keys.forEach(category => {
+          const features = groupedFeatures[category].features;
+
+          const dataSource = new source.DataSource();
+          map.sources.add(dataSource);
+          dataSource.add(features);
+
+          // Displays outline of unit(s), the fill color of unit(s), + change in color when cursor is hovering
+          var unitLayer = new layer.PolygonLayer(dataSource, 'unitClick', getFillStyles('unit', category));
+          var unitLines = new layer.LineLayer(dataSource, null, getLineStyles('unit', category));
+          var polygonHoverLayer = new layer.PolygonLayer(dataSource, null, {
+            fillColor: 'rgba(150, 50, 255, 0.2)',
+            filter: ['==', ['get', '_azureMapsShapeId'], '']
+          });
+
+          map.layers.add([unitLayer, polygonHoverLayer, unitLines], 'roomPolygons');
+          map.layers.add(new layer.SymbolLayer(dataSource, null, getTextStyle(category)), 'roomLabels');
+          grabToPointer([unitLayer, polygonHoverLayer], map);
+          featureHover(unitLayer, polygonHoverLayer);
+        });
 
-        map.layers.add(new layer.PolygonLayer(dataSource, null, getFillStyles('unit', category)), 'roomPolygons');
-        map.layers.add(new layer.LineLayer(dataSource, null, getLineStyles('unit', category)), 'roomLines');
+        // Level display information below
+        const dataSource = new source.DataSource();
+        map.sources.add(dataSource);
+        dataSource.add(levels);
+
+        lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
+        lineHoverLayer = new layer.LineLayer(dataSource, null, {
+          fillColor: 'rgba(150, 50, 255, 0.2)',
+          filter: ['==', ['get', '_azureMapsShapeId'], '']
+        });
+
+        map.layers.add([lineLayer, lineHoverLayer], 'walkwayPolygons');
+        grabToPointer([lineLayer, lineHoverLayer], map);
+        featureHover(lineLayer, lineHoverLayer);
+      }
+    });
+
+    // Recognizes which layer button is clicked and sets features data to display accordingly
+    map.events.add('click', function(e){
+      var features;
+      if(selectedLayerId === 'unitButton')
+        features = map.layers.getRenderedShapes(e.position, 'unitClick');
+      else if(selectedLayerId === 'levelButton')
+        features = map.layers.getRenderedShapes(e.position, 'levelClick');
+      else if(selectedLayerId === 'footprintButton')
+        features = map.layers.getRenderedShapes(e.position, 'footprintClick');
+      else
+        features = map.layers.getRenderedShapes(e.position, ['unitClick', 'levelClick']);
+
+      features.forEach(function (feature) {
+          writeToInfoPanel(feature.data);
+      }); 
+    });
+
+    // Shows change in corresponding feature color when mouse hovers over that feature
+    function featureHover(layerName, polygonHoverLayer) {
+      map.events.add('mousemove', layerName, function (e) {
+        polygonHoverLayer.setOptions({ filter: ['==', ['get', '_azureMapsShapeId'], e.shapes[0].getProperties()['_azureMapsShapeId']] });
       });
 
-      const dataSource = new source.DataSource();
-      map.sources.add(dataSource);
-      dataSource.add(levels);
-      map.layers.add(new layer.LineLayer(dataSource, null, getLineStyles('level', 'walkway')), 'walkwayPolygons');
+      map.events.add('mouseleave', layerName, function (e) {
+          polygonHoverLayer.setOptions({ filter: ['==', ['get', '_azureMapsShapeId'], ''] });
+      });
+    }
 
+    // Entry point when "unit.geojson" is pressed; the following code should be refactored due to redundancy
+    function unitInteractions(units, drawingManager, map) { 
+      var unitLayer, unitLines, polygonHoverLayer; 
+      var layersAdded = [unitLayer, unitLines, polygonHoverLayer];
+      const groupedFeatures = groupAndSort(units, language, selectedLevel);
+      const keys = Object.keys(groupedFeatures);
+        
       keys.forEach(category => {
         const features = groupedFeatures[category].features;
+  
         const dataSource = new source.DataSource();
         map.sources.add(dataSource);
         dataSource.add(features);
+  
+        unitLayer = new layer.PolygonLayer(dataSource, 'unitClick', getFillStyles('unit', category));
+        unitLines = new layer.LineLayer(dataSource, null, getLineStyles('unit', category));
+        polygonHoverLayer = new layer.PolygonLayer(dataSource, null, {
+          fillColor: 'rgba(150, 50, 255, 0.2)',
+          filter: ['==', ['get', 'id'], '']
+        });
+  
+        map.layers.add([unitLayer, polygonHoverLayer, unitLines], 'roomPolygons');
+  
+        grabToPointer([unitLayer, polygonHoverLayer], map);
+        featureHover(unitLayer, polygonHoverLayer);
+  
         map.layers.add(new layer.SymbolLayer(dataSource, null, getTextStyle(category)), 'roomLabels');
+  
+        var drawingSource = drawingManager.getSource();
+        drawingSource.add(features);
+  
+        var dmLayers = drawingManager.getLayers();
+        dmLayers.polygonLayer.setOptions({ visible: false });
+        dmLayers.polygonOutlineLayer.setOptions({ visible: false });
+  
+        map.events.add('drawingmodechanged', drawingManager, (e) => {
+          var dmLayers = drawingManager.getLayers();
+          layersAdded = [unitLayer, unitLines, polygonHoverLayer];
+  
+          if (e === 'idle') {
+            dmLayers.polygonLayer.setOptions({ visible: false });
+            dmLayers.polygonOutlineLayer.setOptions({ visible: false });
+            map.layers.remove([unitLayer, unitLines, polygonHoverLayer]);
+  
+            unitLayer = new layer.PolygonLayer(drawingManager.getSource(), 'unitClick', getFillStyles('unit', category));
+            unitLines = new layer.LineLayer(drawingManager.getSource(), null, getLineStyles('unit', category));
+            polygonHoverLayer = new layer.PolygonLayer(drawingManager.getSource(), null, {
+              fillColor: 'rgba(150, 50, 255, 0.2)',
+              filter: ['==', ['get', 'id'], '']
+            });
+  
+            map.layers.add([unitLayer, polygonHoverLayer, unitLines], 'roomPolygons');
+  
+            grabToPointer([unitLayer, polygonHoverLayer], map);
+            featureHover(unitLayer, polygonHoverLayer);
+            layersAdded = [unitLayer, unitLines, polygonHoverLayer];
+          }
+          else if (e === 'edit-geometry' || e === 'erase-geometry' || e === 'draw-polygon') {      
+            drawingModeChanged(layersAdded); 
+            dmLayers.polygonLayer.setOptions({ visible: true });
+            dmLayers.polygonOutlineLayer.setOptions({ visible: true });
+          }
+        });   
+  
+        currentEditData(map, drawingManager);
       });
-    });
+    }
 
     // Cleanup function to remove the map instance when component unmounts or reinitializes
     return () => {
       map.dispose();
     };
-  }, [units, levels, selectedLevel, subscriptionKey, geography, language]);
+  }, [units, levels, footprint, selectedLevel, selectedLayerId, subscriptionKey, geography, language]);
 
   const handleLevelChange = levelId => {
     setSelectedLevelId(levelId);
   };
 
+  const handleLayerChange = layerId => {
+    setSelectedLayerId(layerId);
+  };
+
   return (
-    <div className={imdfPreviewMapWrapper}>
-      <LevelSelector
-        selectedKey={selectedLevelId}
-        onChange={handleLevelChange}
-        options={levels.features.map(level => ({ key: level.id, text: getFeatureLabel(level, language) }))}
-      />
-      <MapNotification>Zoom in to see labels and icons.</MapNotification>
-      <div id="azure-maps-container" className={imdfPreviewMap} style={style} />
+    <div>
+      <div className={mapTextWrapper}>
+        <div className={imdfPreviewMapWrapper}>
+          <LevelSelector
+            selectedKey={selectedLevelId}
+            onChange={handleLevelChange}
+            options={levels.features.map(level => ({ key: level.id, text: getFeatureLabel(level, language) }))}
+          />
+
+          <div className={layerSelect}>
+            <LayerSelector
+              selectedKey={selectedLayerId}
+              onChange={handleLayerChange}
+            />
+          </div>
+
+          <MapNotification>Zoom in to see labels and icons.</MapNotification>
+          <div id="azure-maps-container" className={imdfPreviewMap} style={style}/>
+        </div>
+
+        <div id="panel" className={textWrapper}>
+          <textarea id="infoPanel-json" className={textArea}></textarea>
+        </div>
+
+      </div>
+
+      <div className={saveButtonWrapper}>
+        <DefaultButton className={logsButton}>Save Changes</DefaultButton>
+      </div>
+      
     </div>
   );
 };
diff --git a/src/pages/conversion/places-preview-map/theme/floorPlanStyles.js b/src/pages/conversion/places-preview-map/theme/floorPlanStyles.js
index 4aaf812..9821952 100644
--- a/src/pages/conversion/places-preview-map/theme/floorPlanStyles.js
+++ b/src/pages/conversion/places-preview-map/theme/floorPlanStyles.js
@@ -36,6 +36,16 @@ export const levelStyles = {
   lineWidth: 3,
 };
 
+export const levelOnlyStyles = {
+  lineColor: getPaletteAsRawColors().placesWall,
+  lineWidth: 2,
+};
+
+export const footprintStyles = {
+  lineColor: getPaletteAsRawColors().placesWall,
+  lineWidth: 2,
+};
+
 const defaultIconMinZoom = 17;
 const textMinZoom = 19.8;
 
diff --git a/src/pages/conversion/places-preview-map/utils.js b/src/pages/conversion/places-preview-map/utils.js
index 3be100f..037fa07 100644
--- a/src/pages/conversion/places-preview-map/utils.js
+++ b/src/pages/conversion/places-preview-map/utils.js
@@ -4,7 +4,7 @@ import deskpool from './assets/deskpool.svg';
 import elevator from './assets/elevator.svg';
 import restroom from './assets/restroom.svg';
 import stairs from './assets/stairs.svg';
-import { categoryToFillColor, defaultFillColor, levelStyles, textStyles, unitStyles } from './theme/floorPlanStyles';
+import { categoryToFillColor, defaultFillColor, levelStyles, levelOnlyStyles, textStyles, footprintStyles, unitStyles } from './theme/floorPlanStyles';
 
 export function getFillStyles(featureType, category) {
   if (featureType !== 'unit') {
@@ -44,6 +44,24 @@ export function getLineStyles(featureType, category) {
     };
   }
 
+  if (featureType === 'levelOnly') {
+    paintStyle = {
+      strokeColor: levelOnlyStyles.lineColor,
+      strokeWidth: levelOnlyStyles.lineWidth,
+      lineJoin: 'round',
+      lineCap: 'round',
+    };
+  }
+
+  if (featureType === 'footprint') {
+    paintStyle = {
+      strokeColor: footprintStyles.lineColor,
+      strokeWidth: footprintStyles.lineWidth,
+      lineJoin: 'round',
+      lineCap: 'round',
+    };
+  }
+
   return paintStyle;
 }
 

From df0b73ed14a21027a7e96035c2547ccdb6c30c35 Mon Sep 17 00:00:00 2001
From: Nicole Iftekhar <iftekhan@uci.edu>
Date: Tue, 23 Jul 2024 14:49:26 -0700
Subject: [PATCH 2/8] Pushing imdf-model-helpers and layer-selector folders

---
 .../imdf-model-helpers/index.js               | 63 +++++++++++++++++++
 .../layer-selector/index.js                   | 37 +++++++++++
 .../layer-selector/index.style.js             | 44 +++++++++++++
 3 files changed, 144 insertions(+)
 create mode 100644 src/pages/conversion/places-preview-map/imdf-model-helpers/index.js
 create mode 100644 src/pages/conversion/places-preview-map/layer-selector/index.js
 create mode 100644 src/pages/conversion/places-preview-map/layer-selector/index.style.js

diff --git a/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js b/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js
new file mode 100644
index 0000000..3a79404
--- /dev/null
+++ b/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js
@@ -0,0 +1,63 @@
+import { getFeatureLabel } from '../utils';
+
+import 'azure-maps-drawing-tools/dist/atlas-drawing.min.css';
+import 'azure-maps-control/dist/atlas.min.css';
+
+// Sets polygon, line, and symbol layers to invisible
+function drawingModeChanged(allLayers) {
+    allLayers.forEach(layer => {
+        layer.setOptions({ visible:  false });
+    });
+}
+
+// Displays information of a feature that is being drawn/edited, at time of click
+function currentEditData(map, drawingManager) {
+    map.events.add('drawingstarted', drawingManager, (f) => {
+        if(f && f.data) {
+        var shapeId = f.data.id;
+        var geojsonData = drawingManager.getSource().getShapeById(shapeId).data;
+        document.getElementById('infoPanel-json').value = JSON.stringify(geojsonData, null, 2);
+        }
+    });
+}
+
+// Groups features together by category and filters them by levels
+function groupAndSort(units, language, selectedLevel) {
+    const groupedFeatures = {};
+    units.features
+        .filter(item => item.properties.level_id === selectedLevel.id)
+        .forEach(feature => {
+        const { category } = feature.properties;
+        if (!groupedFeatures[category]) groupedFeatures[category] = { features: [] };
+        groupedFeatures[category].features.push({
+            ...feature,
+            properties: { ...feature.properties, label: getFeatureLabel(feature, language) },
+        });
+    });
+
+    return groupedFeatures;
+}
+
+function writeToInfoPanel(geojsonData) {
+    const { map, ...obj } = geojsonData;
+    document.getElementById('infoPanel-json').value = JSON.stringify(obj, null, 2);
+}
+
+// Changes the cursor to be a pointer when a clickable feature is hovered over
+function grabToPointer(layerName, map) {
+    map.events.add('mouseover', layerName, function () {
+        map.getCanvasContainer().style.cursor = 'pointer';
+    });
+
+    map.events.add('mouseout', layerName, function () {
+        map.getCanvasContainer().style.cursor = 'grab';
+    });
+}
+
+export {
+    currentEditData,
+    groupAndSort,
+    drawingModeChanged,
+    writeToInfoPanel,
+    grabToPointer
+};
\ No newline at end of file
diff --git a/src/pages/conversion/places-preview-map/layer-selector/index.js b/src/pages/conversion/places-preview-map/layer-selector/index.js
new file mode 100644
index 0000000..8f74911
--- /dev/null
+++ b/src/pages/conversion/places-preview-map/layer-selector/index.js
@@ -0,0 +1,37 @@
+import { cx } from '@emotion/css';
+import { useState } from 'react';
+import { buttonStyle, layerSelectorWrapper, selectedButtonStyle } from './index.style';
+
+const LayerSelector = props => {
+    const {onChange = () => {} } = props;
+    const [selectedButtonId, setSelectedButtonId] = useState(null);
+
+    const handleLayerClick = (id) => {
+        setSelectedButtonId(id); 
+        onChange(id);
+    };
+
+    const layerButtons = [
+      // will need to add a "buildingButton" once basemap is loaded
+      {id: 'fullViewButton', text: 'full view'}, 
+      {id: 'footprintButton', text: 'footprint.geojson'},
+      {id: 'levelButton', text: 'level.geojson'},
+      {id: 'unitButton', text: 'unit.geojson'},
+    ];
+
+  return (
+    <div className={layerSelectorWrapper}>
+      {layerButtons.map(button => (
+        <button
+          className={cx(buttonStyle, {[selectedButtonStyle]: selectedButtonId === button.id})}
+          id={button.id}
+          onClick={() => handleLayerClick(button.id)}
+        >
+          {button.text}
+        </button>
+      ))}   
+    </div>
+  );
+};
+
+export default LayerSelector;
diff --git a/src/pages/conversion/places-preview-map/layer-selector/index.style.js b/src/pages/conversion/places-preview-map/layer-selector/index.style.js
new file mode 100644
index 0000000..f148e12
--- /dev/null
+++ b/src/pages/conversion/places-preview-map/layer-selector/index.style.js
@@ -0,0 +1,44 @@
+import { css } from '@emotion/css';
+
+export const layerSelectorWrapper = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+`;
+
+export const buttonStyle = css`
+  color: #47494b;
+  background-color: #fff;
+  box-shadow: rgba(0, 0, 0, 0.16) 0 0 4px;
+  background-size: 12px 12px;
+  position: relative;
+  user-select: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-collapse: collapse;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 10px;
+  text-align: center;
+  cursor: pointer;
+  line-height: 32px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  overflow: hidden;
+
+  &:hover {
+    color: #31acce;
+  }
+`;
+
+export const selectedButtonStyle = css`
+  background-color: #f0f0f0;
+  color: #31acce;
+`;
+
+

From 971629aa1c305cdcaa07f4588c0674474aa865e5 Mon Sep 17 00:00:00 2001
From: Nicole Iftekhar <iftekhan@uci.edu>
Date: Tue, 23 Jul 2024 15:53:59 -0700
Subject: [PATCH 3/8] Attempted import fix

---
 src/pages/conversion/places-preview-map/index.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/conversion/places-preview-map/index.js b/src/pages/conversion/places-preview-map/index.js
index 756ab41..34971ef 100644
--- a/src/pages/conversion/places-preview-map/index.js
+++ b/src/pages/conversion/places-preview-map/index.js
@@ -1,5 +1,5 @@
-import { Map, control, layer, source } from 'azure-maps-control';
-import {control as draw_control, drawing} from 'azure-maps-drawing-tools';
+import { Map, layer, source, control } from 'azure-maps-control';
+import * as azdraw from 'azure-maps-drawing-tools';
 import { getDomain, useConversionStore, useLevelsStore, useUserStore } from 'common/store';
 import { useEffect, useMemo, useState } from 'react';
 import { DefaultButton } from '@fluentui/react';
@@ -54,6 +54,7 @@ const PlacesPreviewMap = ({ style }) => {
 
   useEffect(() => {
     var drawingManager;
+
     const map = new Map('azure-maps-container', {
       bounds: calculateBoundingBox(levels),
       subscriptionKey: subscriptionKey,
@@ -68,14 +69,14 @@ const PlacesPreviewMap = ({ style }) => {
     });
 
     map.events.add('ready', () => {
-      var drawingToolbar = new draw_control.DrawingToolbar({ 
+      var drawingToolbar = new azdraw.control.DrawingToolbar({ 
         position: 'bottom-right', 
         style: 'light', 
         buttons: ['edit-geometry', 'erase-geometry', 'draw-polygon'] 
       });    
 
       if(selectedLayerId === 'unitButton') {
-        drawingManager = new drawing.DrawingManager(map, {
+        drawingManager = new azdraw.drawing.DrawingManager(map, {
           toolbar: drawingToolbar
         });
         unitInteractions(units, drawingManager, map);

From 1f63823284d78e54d3c9f675682767f03fdb73a3 Mon Sep 17 00:00:00 2001
From: Nicole Iftekhar <iftekhan@uci.edu>
Date: Thu, 25 Jul 2024 16:01:11 -0700
Subject: [PATCH 4/8] Fixed import statement, implemented suggestions

---
 package.json                                  |  3 +-
 src/common/mocks/azure-maps-drawing-tools.js  | 11 +++++
 .../imdf-model-helpers/index.js               |  3 --
 .../places-preview-map/indes.style.js         |  8 +--
 .../conversion/places-preview-map/index.js    | 49 +++++++++++--------
 .../layer-selector/index.js                   | 16 +++---
 .../layer-selector/index.style.js             |  3 +-
 7 files changed, 55 insertions(+), 38 deletions(-)
 create mode 100644 src/common/mocks/azure-maps-drawing-tools.js

diff --git a/package.json b/package.json
index a74af26..688f4ce 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,8 @@
     "moduleNameMapper": {
       "react-azure-maps": "<rootDir>/src/common/mocks/react-azure-maps.js",
       "azure-maps-control": "<rootDir>/src/common/mocks/azure-maps-control.js",
-      "azure-maps-indoor": "<rootDir>/src/common/mocks/azure-maps-indoor.js"
+      "azure-maps-indoor": "<rootDir>/src/common/mocks/azure-maps-indoor.js",
+      "azure-maps-drawing-tools": "<rootDir>/src/common/mocks/azure-maps-drawing-tools.js"
     }
   },
   "scripts": {
diff --git a/src/common/mocks/azure-maps-drawing-tools.js b/src/common/mocks/azure-maps-drawing-tools.js
new file mode 100644
index 0000000..fca5e2b
--- /dev/null
+++ b/src/common/mocks/azure-maps-drawing-tools.js
@@ -0,0 +1,11 @@
+export const control = {
+    DrawingToolbar: function (options) {
+        return options;
+    }
+};
+
+export const drawing = {
+    DrawingManager: function (map, options) {
+        return [map, options];
+    }
+};
\ No newline at end of file
diff --git a/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js b/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js
index 3a79404..3574155 100644
--- a/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js
+++ b/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js
@@ -1,8 +1,5 @@
 import { getFeatureLabel } from '../utils';
 
-import 'azure-maps-drawing-tools/dist/atlas-drawing.min.css';
-import 'azure-maps-control/dist/atlas.min.css';
-
 // Sets polygon, line, and symbol layers to invisible
 function drawingModeChanged(allLayers) {
     allLayers.forEach(layer => {
diff --git a/src/pages/conversion/places-preview-map/indes.style.js b/src/pages/conversion/places-preview-map/indes.style.js
index d3458c6..95557d6 100644
--- a/src/pages/conversion/places-preview-map/indes.style.js
+++ b/src/pages/conversion/places-preview-map/indes.style.js
@@ -2,18 +2,18 @@ import { css } from '@emotion/css';
 
 export const mapTextWrapper = css `
   display: flex;
-  gap: 10px;
+  gap: 2rem;
 `
 
 export const imdfPreviewMapWrapper = css`
   position: relative;
   width: 100%;
-  flex: 5 1 70px;                              
+  flex: 5 1 4rem;                              
 `;
 
 export const imdfPreviewMap = css`
   width: 100%;
-  height: 500px;
+  height: 30rem;
 `;
 
 export const layerSelect = css `
@@ -22,7 +22,7 @@ export const layerSelect = css `
 `;
 
 export const textWrapper = css `
-  flex: 1 1 70px; 
+  flex: 1 1 4rem; 
   position: relative;
   display: inline;
   margin-top: 1%;
diff --git a/src/pages/conversion/places-preview-map/index.js b/src/pages/conversion/places-preview-map/index.js
index 34971ef..50553a5 100644
--- a/src/pages/conversion/places-preview-map/index.js
+++ b/src/pages/conversion/places-preview-map/index.js
@@ -1,5 +1,5 @@
 import { Map, layer, source, control } from 'azure-maps-control';
-import * as azdraw from 'azure-maps-drawing-tools';
+import { control as draw_control, drawing } from 'azure-maps-drawing-tools';
 import { getDomain, useConversionStore, useLevelsStore, useUserStore } from 'common/store';
 import { useEffect, useMemo, useState } from 'react';
 import { DefaultButton } from '@fluentui/react';
@@ -69,35 +69,22 @@ const PlacesPreviewMap = ({ style }) => {
     });
 
     map.events.add('ready', () => {
-      var drawingToolbar = new azdraw.control.DrawingToolbar({ 
+      var drawingToolbar = new draw_control.DrawingToolbar({ 
         position: 'bottom-right', 
         style: 'light', 
         buttons: ['edit-geometry', 'erase-geometry', 'draw-polygon'] 
       });    
 
       if(selectedLayerId === 'unitButton') {
-        drawingManager = new azdraw.drawing.DrawingManager(map, {
+        drawingManager = new drawing.DrawingManager(map, {
           toolbar: drawingToolbar
         });
         unitInteractions(units, drawingManager, map);
       } else if(selectedLayerId === 'levelButton') {
-        // Retrieve information about the level currently chosen by user
-        const selectedLevelDetails = levels.features.filter(item => item.id === selectedLevel.id);
-
-        const dataSource = new source.DataSource();
-        map.sources.add(dataSource);
-        dataSource.add(selectedLevelDetails);
-        
-        // Displays outline of level + change in color when cursor is hovering
-        var lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
-        var lineHoverLayer = new layer.LineLayer(dataSource, null, {
-          fillColor: 'rgba(150, 50, 255, 0.2)',
-          filter: ['==', ['get', '_azureMapsShapeId'], '']
+        drawingManager = new drawing.DrawingManager(map, {
+          toolbar: drawingToolbar
         });
-
-        map.layers.add([lineLayer, lineHoverLayer], 'walkwayPolygons');
-        grabToPointer([lineLayer, lineHoverLayer], map);
-        featureHover(lineLayer, lineHoverLayer);
+        levelInteractions(levels, drawingManager, map);
       } else if(selectedLayerId === 'footprintButton') {
         const groupedFeatures = {};
         const keys = Object.keys(groupedFeatures);
@@ -148,8 +135,8 @@ const PlacesPreviewMap = ({ style }) => {
         map.sources.add(dataSource);
         dataSource.add(levels);
 
-        lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
-        lineHoverLayer = new layer.LineLayer(dataSource, null, {
+        var lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
+        var lineHoverLayer = new layer.LineLayer(dataSource, null, {
           fillColor: 'rgba(150, 50, 255, 0.2)',
           filter: ['==', ['get', '_azureMapsShapeId'], '']
         });
@@ -256,6 +243,26 @@ const PlacesPreviewMap = ({ style }) => {
       });
     }
 
+    function levelInteractions(levels, drawingManager, map) {
+      // Retrieve information about the level currently chosen by user
+      const selectedLevelDetails = levels.features.filter(item => item.id === selectedLevel.id);
+
+      const dataSource = new source.DataSource();
+      map.sources.add(dataSource);
+      dataSource.add(selectedLevelDetails);
+      
+      // Displays outline of level + change in color when cursor is hovering
+      var lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
+      var lineHoverLayer = new layer.LineLayer(dataSource, null, {
+        fillColor: 'rgba(150, 50, 255, 0.2)',
+        filter: ['==', ['get', '_azureMapsShapeId'], '']
+      });
+
+      map.layers.add([lineLayer, lineHoverLayer], 'walkwayPolygons');
+      grabToPointer([lineLayer, lineHoverLayer], map);
+      featureHover(lineLayer, lineHoverLayer);
+    }
+
     // Cleanup function to remove the map instance when component unmounts or reinitializes
     return () => {
       map.dispose();
diff --git a/src/pages/conversion/places-preview-map/layer-selector/index.js b/src/pages/conversion/places-preview-map/layer-selector/index.js
index 8f74911..62b1592 100644
--- a/src/pages/conversion/places-preview-map/layer-selector/index.js
+++ b/src/pages/conversion/places-preview-map/layer-selector/index.js
@@ -2,6 +2,14 @@ import { cx } from '@emotion/css';
 import { useState } from 'react';
 import { buttonStyle, layerSelectorWrapper, selectedButtonStyle } from './index.style';
 
+const layerButtons = [
+  // will need to add a "buildingButton" once basemap is loaded
+  {id: 'fullViewButton', text: 'full view'}, 
+  {id: 'footprintButton', text: 'footprint.geojson'},
+  {id: 'levelButton', text: 'level.geojson'},
+  {id: 'unitButton', text: 'unit.geojson'},
+];
+
 const LayerSelector = props => {
     const {onChange = () => {} } = props;
     const [selectedButtonId, setSelectedButtonId] = useState(null);
@@ -11,14 +19,6 @@ const LayerSelector = props => {
         onChange(id);
     };
 
-    const layerButtons = [
-      // will need to add a "buildingButton" once basemap is loaded
-      {id: 'fullViewButton', text: 'full view'}, 
-      {id: 'footprintButton', text: 'footprint.geojson'},
-      {id: 'levelButton', text: 'level.geojson'},
-      {id: 'unitButton', text: 'unit.geojson'},
-    ];
-
   return (
     <div className={layerSelectorWrapper}>
       {layerButtons.map(button => (
diff --git a/src/pages/conversion/places-preview-map/layer-selector/index.style.js b/src/pages/conversion/places-preview-map/layer-selector/index.style.js
index f148e12..c66977a 100644
--- a/src/pages/conversion/places-preview-map/layer-selector/index.style.js
+++ b/src/pages/conversion/places-preview-map/layer-selector/index.style.js
@@ -4,7 +4,8 @@ export const layerSelectorWrapper = css`
   position: absolute;
   top: 0;
   left: 0;
-  padding: 10px;
+  padding-left: 0.5rem;
+  padding-top: 3rem;
   display: flex;
   flex-direction: column;
   z-index: 100;

From 8c2856b450c6f9679407c5c3c928de8930b50b41 Mon Sep 17 00:00:00 2001
From: Nicole Iftekhar <iftekhan@uci.edu>
Date: Thu, 25 Jul 2024 22:19:52 -0700
Subject: [PATCH 5/8] Level layer editing functionality implemented

---
 .../conversion/places-preview-map/index.js    | 42 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/pages/conversion/places-preview-map/index.js b/src/pages/conversion/places-preview-map/index.js
index 50553a5..9af616e 100644
--- a/src/pages/conversion/places-preview-map/index.js
+++ b/src/pages/conversion/places-preview-map/index.js
@@ -81,6 +81,11 @@ const PlacesPreviewMap = ({ style }) => {
         });
         unitInteractions(units, drawingManager, map);
       } else if(selectedLayerId === 'levelButton') {
+        var drawingToolbar = new draw_control.DrawingToolbar({ 
+          position: 'bottom-right', 
+          style: 'light', 
+          buttons: ['edit-geometry'] 
+        });    
         drawingManager = new drawing.DrawingManager(map, {
           toolbar: drawingToolbar
         });
@@ -209,6 +214,7 @@ const PlacesPreviewMap = ({ style }) => {
         var dmLayers = drawingManager.getLayers();
         dmLayers.polygonLayer.setOptions({ visible: false });
         dmLayers.polygonOutlineLayer.setOptions({ visible: false });
+        layersAdded = [unitLayer, unitLines, polygonHoverLayer];
   
         map.events.add('drawingmodechanged', drawingManager, (e) => {
           var dmLayers = drawingManager.getLayers();
@@ -246,21 +252,53 @@ const PlacesPreviewMap = ({ style }) => {
     function levelInteractions(levels, drawingManager, map) {
       // Retrieve information about the level currently chosen by user
       const selectedLevelDetails = levels.features.filter(item => item.id === selectedLevel.id);
+      var lineLayer, lineHoverLayer;
+      var layersAdded = [lineLayer, lineHoverLayer];
 
       const dataSource = new source.DataSource();
       map.sources.add(dataSource);
       dataSource.add(selectedLevelDetails);
       
       // Displays outline of level + change in color when cursor is hovering
-      var lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
-      var lineHoverLayer = new layer.LineLayer(dataSource, null, {
+      lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
+      lineHoverLayer = new layer.LineLayer(dataSource, null, {
         fillColor: 'rgba(150, 50, 255, 0.2)',
         filter: ['==', ['get', '_azureMapsShapeId'], '']
       });
 
       map.layers.add([lineLayer, lineHoverLayer], 'walkwayPolygons');
       grabToPointer([lineLayer, lineHoverLayer], map);
+      layersAdded = [lineLayer, lineHoverLayer];
       featureHover(lineLayer, lineHoverLayer);
+
+      var drawingSource = drawingManager.getSource();
+      drawingSource.add(selectedLevelDetails);
+
+      var dmLayers = drawingManager.getLayers();
+      dmLayers.polygonLayer.setOptions({ visible: false });
+      dmLayers.polygonOutlineLayer.setOptions({visible: false});
+
+      map.events.add('drawingmodechanged', drawingManager, (e) => {
+        var dmLayers = drawingManager.getLayers();
+        if (e === 'idle') {
+          dmLayers.polygonOutlineLayer.setOptions({ visible: false });
+
+          var lineLayer = new layer.LineLayer(drawingManager.getSource(), 'levelClick', getLineStyles('level', 'walkway'));
+          lineHoverLayer = new layer.LineLayer(drawingManager.getSource(), null, {
+            fillColor: 'rgba(150, 50, 255, 0.2)',
+            filter: ['==', ['get', '_azureMapsShapeId'], '']
+          });
+
+          map.layers.add([lineLayer, lineHoverLayer], 'walkwayPolygons');
+          grabToPointer([lineLayer, lineHoverLayer], map);
+          layersAdded = [lineLayer, lineHoverLayer];
+          featureHover(lineLayer, lineHoverLayer);
+        }
+        else if (e === 'edit-geometry' || e === 'erase-geometry' || e === 'draw-polygon') {    
+          drawingModeChanged(layersAdded);  
+          dmLayers.polygonOutlineLayer.setOptions({ visible: true });
+        }
+      }); 
     }
 
     // Cleanup function to remove the map instance when component unmounts or reinitializes

From 15f60f980a5871f886cbc3dfac150f0985a8a55c Mon Sep 17 00:00:00 2001
From: Nicole Iftekhar <iftekhan@uci.edu>
Date: Mon, 29 Jul 2024 15:59:46 -0700
Subject: [PATCH 6/8] Footprint and full view layers now have edit
 functionalities

---
 .../imdf-model-helpers/index.js               |   2 +-
 .../conversion/places-preview-map/index.js    | 164 +++++++++++-------
 2 files changed, 107 insertions(+), 59 deletions(-)

diff --git a/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js b/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js
index 3574155..3c3a29b 100644
--- a/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js
+++ b/src/pages/conversion/places-preview-map/imdf-model-helpers/index.js
@@ -10,7 +10,7 @@ function drawingModeChanged(allLayers) {
 // Displays information of a feature that is being drawn/edited, at time of click
 function currentEditData(map, drawingManager) {
     map.events.add('drawingstarted', drawingManager, (f) => {
-        if(f && f.data) {
+        if(f?.data) {
         var shapeId = f.data.id;
         var geojsonData = drawingManager.getSource().getShapeById(shapeId).data;
         document.getElementById('infoPanel-json').value = JSON.stringify(geojsonData, null, 2);
diff --git a/src/pages/conversion/places-preview-map/index.js b/src/pages/conversion/places-preview-map/index.js
index 9af616e..9c71ba4 100644
--- a/src/pages/conversion/places-preview-map/index.js
+++ b/src/pages/conversion/places-preview-map/index.js
@@ -79,76 +79,43 @@ const PlacesPreviewMap = ({ style }) => {
         drawingManager = new drawing.DrawingManager(map, {
           toolbar: drawingToolbar
         });
+
         unitInteractions(units, drawingManager, map);
-      } else if(selectedLayerId === 'levelButton') {
-        var drawingToolbar = new draw_control.DrawingToolbar({ 
+      } else if(selectedLayerId === 'levelButton') {  
+        drawingToolbar = new draw_control.DrawingToolbar({ 
           position: 'bottom-right', 
           style: 'light', 
           buttons: ['edit-geometry'] 
-        });    
+        });   
         drawingManager = new drawing.DrawingManager(map, {
           toolbar: drawingToolbar
         });
+        
         levelInteractions(levels, drawingManager, map);
       } else if(selectedLayerId === 'footprintButton') {
-        const groupedFeatures = {};
-        const keys = Object.keys(groupedFeatures);
-
-        const dataSource = new source.DataSource();
-        map.sources.add(dataSource);
-        dataSource.add(footprint);
+        drawingToolbar = new draw_control.DrawingToolbar({ 
+          position: 'bottom-right', 
+          style: 'light', 
+          buttons: ['edit-geometry'] 
+        });   
 
-        // Displays outline of footprint + change in color when cursor is hovering
-        var footprintLines = new layer.LineLayer(dataSource, null, getLineStyles('footprint', 'walkway'));
-        var footprintLayer = new layer.PolygonLayer(dataSource, 'footprintClick', getFillStyles('footprint', keys.category));
-        var footprintHoverLayer = new layer.PolygonLayer(dataSource, null, {
-          fillColor: 'rgba(150, 50, 255, 0.2)',
-          filter: ['==', ['get', '_azureMapsShapeId'], '']
+        drawingManager = new drawing.DrawingManager(map, {
+          toolbar: drawingToolbar
         });
 
-        map.layers.add([footprintLayer, footprintHoverLayer, footprintLines], 'roomPolygons');
-        grabToPointer([footprintLayer, footprintHoverLayer], map);
-        featureHover(footprintLayer, footprintHoverLayer);
+        footprintInteractions(footprint, drawingManager, map);
       } else {
-        // Displays levels + units
-        const groupedFeatures = groupAndSort(units, language, selectedLevel);
-        const keys = Object.keys(groupedFeatures); 
-
-        keys.forEach(category => {
-          const features = groupedFeatures[category].features;
-
-          const dataSource = new source.DataSource();
-          map.sources.add(dataSource);
-          dataSource.add(features);
-
-          // Displays outline of unit(s), the fill color of unit(s), + change in color when cursor is hovering
-          var unitLayer = new layer.PolygonLayer(dataSource, 'unitClick', getFillStyles('unit', category));
-          var unitLines = new layer.LineLayer(dataSource, null, getLineStyles('unit', category));
-          var polygonHoverLayer = new layer.PolygonLayer(dataSource, null, {
-            fillColor: 'rgba(150, 50, 255, 0.2)',
-            filter: ['==', ['get', '_azureMapsShapeId'], '']
-          });
-
-          map.layers.add([unitLayer, polygonHoverLayer, unitLines], 'roomPolygons');
-          map.layers.add(new layer.SymbolLayer(dataSource, null, getTextStyle(category)), 'roomLabels');
-          grabToPointer([unitLayer, polygonHoverLayer], map);
-          featureHover(unitLayer, polygonHoverLayer);
-        });
-
-        // Level display information below
-        const dataSource = new source.DataSource();
-        map.sources.add(dataSource);
-        dataSource.add(levels);
+        drawingToolbar = new draw_control.DrawingToolbar({ 
+          position: 'bottom-right', 
+          style: 'light', 
+          buttons: ['edit-geometry'] 
+        });   
 
-        var lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
-        var lineHoverLayer = new layer.LineLayer(dataSource, null, {
-          fillColor: 'rgba(150, 50, 255, 0.2)',
-          filter: ['==', ['get', '_azureMapsShapeId'], '']
+        drawingManager = new drawing.DrawingManager(map, {
+          toolbar: drawingToolbar
         });
 
-        map.layers.add([lineLayer, lineHoverLayer], 'walkwayPolygons');
-        grabToPointer([lineLayer, lineHoverLayer], map);
-        featureHover(lineLayer, lineHoverLayer);
+        fullViewInteractions(units, levels, drawingManager, map);
       }
     });
 
@@ -211,13 +178,13 @@ const PlacesPreviewMap = ({ style }) => {
         var drawingSource = drawingManager.getSource();
         drawingSource.add(features);
   
-        var dmLayers = drawingManager.getLayers();
+        let dmLayers = drawingManager.getLayers();
         dmLayers.polygonLayer.setOptions({ visible: false });
         dmLayers.polygonOutlineLayer.setOptions({ visible: false });
         layersAdded = [unitLayer, unitLines, polygonHoverLayer];
   
         map.events.add('drawingmodechanged', drawingManager, (e) => {
-          var dmLayers = drawingManager.getLayers();
+          let dmLayers = drawingManager.getLayers();
           layersAdded = [unitLayer, unitLines, polygonHoverLayer];
   
           if (e === 'idle') {
@@ -243,12 +210,17 @@ const PlacesPreviewMap = ({ style }) => {
             dmLayers.polygonLayer.setOptions({ visible: true });
             dmLayers.polygonOutlineLayer.setOptions({ visible: true });
           }
+          else {
+            // This will eventually be a visible pop-up
+            console.log('Not a valid drawing toolbar option.');
+          }
         });   
   
         currentEditData(map, drawingManager);
       });
     }
 
+    // Entry point when "level.geojson" is pressed; the following code should be refactored due to redundancy
     function levelInteractions(levels, drawingManager, map) {
       // Retrieve information about the level currently chosen by user
       const selectedLevelDetails = levels.features.filter(item => item.id === selectedLevel.id);
@@ -274,13 +246,14 @@ const PlacesPreviewMap = ({ style }) => {
       var drawingSource = drawingManager.getSource();
       drawingSource.add(selectedLevelDetails);
 
-      var dmLayers = drawingManager.getLayers();
+      let dmLayers = drawingManager.getLayers();
       dmLayers.polygonLayer.setOptions({ visible: false });
       dmLayers.polygonOutlineLayer.setOptions({visible: false});
 
       map.events.add('drawingmodechanged', drawingManager, (e) => {
-        var dmLayers = drawingManager.getLayers();
+        let dmLayers = drawingManager.getLayers();
         if (e === 'idle') {
+          dmLayers.polygonLayer.setOptions({ visible: false });
           dmLayers.polygonOutlineLayer.setOptions({ visible: false });
 
           var lineLayer = new layer.LineLayer(drawingManager.getSource(), 'levelClick', getLineStyles('level', 'walkway'));
@@ -297,10 +270,85 @@ const PlacesPreviewMap = ({ style }) => {
         else if (e === 'edit-geometry' || e === 'erase-geometry' || e === 'draw-polygon') {    
           drawingModeChanged(layersAdded);  
           dmLayers.polygonOutlineLayer.setOptions({ visible: true });
+          dmLayers.polygonLayer.setOptions({ visible: false });
+        }
+        else {
+          // This will eventually be a visible pop-up
+          console.log('Not a valid drawing toolbar option.');
         }
       }); 
     }
 
+    // Entry point when "footprint.geojson" is pressed; the following code should be refactored due to redundancy
+    function footprintInteractions(footprint, drawingManager, map) {
+      var footprintLayer, footprintLines, footprintHoverLayer; 
+      var layersAdded = [footprintLayer, footprintLines, footprintHoverLayer];
+
+      const groupedFeatures = {};
+      const keys = Object.keys(groupedFeatures);
+
+      const dataSource = new source.DataSource();
+      map.sources.add(dataSource);
+      dataSource.add(footprint);
+
+      // Displays outline of footprint + change in color when cursor is hovering
+      footprintLines = new layer.LineLayer(dataSource, null, getLineStyles('footprint', 'walkway'));
+      footprintLayer = new layer.PolygonLayer(dataSource, 'footprintClick', getFillStyles('footprint', keys.category));
+      footprintHoverLayer = new layer.PolygonLayer(dataSource, null, {
+        fillColor: 'rgba(150, 50, 255, 0.2)',
+        filter: ['==', ['get', '_azureMapsShapeId'], '']
+      });
+
+      map.layers.add([footprintLayer, footprintHoverLayer, footprintLines], 'roomPolygons');
+      grabToPointer([footprintLayer, footprintHoverLayer], map);
+      featureHover(footprintLayer, footprintHoverLayer);
+      layersAdded = [footprintLayer, footprintLines, footprintHoverLayer];
+
+      
+      var drawingSource = drawingManager.getSource();
+      drawingSource.add(footprint);
+
+      let dmLayers = drawingManager.getLayers();
+      dmLayers.polygonLayer.setOptions({ visible: false });
+      dmLayers.polygonOutlineLayer.setOptions({visible: false});
+
+      map.events.add('drawingmodechanged', drawingManager, (e) => {
+        let dmLayers = drawingManager.getLayers();
+        if (e === 'idle') {
+          dmLayers.polygonLayer.setOptions({ visible: false });
+          dmLayers.polygonOutlineLayer.setOptions({ visible: false });
+
+          footprintLines = new layer.LineLayer(drawingManager.getSource(), null, getLineStyles('footprint', 'walkway'));
+          footprintLayer = new layer.PolygonLayer(drawingManager.getSource(), 'footprintClick', getFillStyles('footprint', keys.category));
+          footprintHoverLayer = new layer.PolygonLayer(drawingManager.getSource(), null, {
+            fillColor: 'rgba(150, 50, 255, 0.2)',
+            filter: ['==', ['get', '_azureMapsShapeId'], '']
+          });
+
+          map.layers.add([footprintLayer, footprintHoverLayer, footprintLines], 'roomPolygons');
+          grabToPointer([footprintLayer, footprintHoverLayer], map);
+          featureHover(footprintLayer, footprintHoverLayer);
+          layersAdded = [footprintLayer, footprintLines, footprintHoverLayer];
+        }
+        else if (e === 'edit-geometry' || e === 'erase-geometry' || e === 'draw-polygon') {    
+          drawingModeChanged(layersAdded);  
+          dmLayers.polygonLayer.setOptions({ visible: true });
+          dmLayers.polygonOutlineLayer.setOptions({ visible: true });
+        }
+        else {
+          // This will eventually be a visible pop-up
+          console.log('Not a valid drawing toolbar option.');
+        }
+      }); 
+    }
+
+    // Entry point when "full view" is pressed; the following code may need to be changed to allow fill color of units while editing
+    // Needs to be given edit properties
+    function fullViewInteractions(units, levels, drawingManager, map) {
+      unitInteractions(units, drawingManager, map);
+      levelInteractions(levels, drawingManager, map);
+    }
+
     // Cleanup function to remove the map instance when component unmounts or reinitializes
     return () => {
       map.dispose();

From bd579dce615ccc04cfab46328d94a95208ad23b9 Mon Sep 17 00:00:00 2001
From: Nicole Iftekhar <iftekhan@uci.edu>
Date: Tue, 30 Jul 2024 10:35:17 -0700
Subject: [PATCH 7/8] Fixed issue with unit.geojson

---
 package-lock.json                             | 219 +++++++++++++++---
 package.json                                  |   1 +
 .../places-preview-map/indes.style.js         |   2 +
 .../conversion/places-preview-map/index.js    |  33 +--
 4 files changed, 213 insertions(+), 42 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 23f99b7..699fa39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "react-id-generator": "^3.0.2",
         "react-json-view": "^1.21.3",
         "react-router-dom": "^6.20.0",
+        "styled-components": "^6.1.12",
         "zustand": "^4.4.7"
       },
       "devDependencies": {
@@ -2408,6 +2409,14 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
       "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
     "node_modules/@emotion/jest": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.11.0.tgz",
@@ -8259,6 +8268,11 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
@@ -10463,6 +10477,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -11194,6 +11216,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -11429,6 +11459,16 @@
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
       "dev": true
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -11632,9 +11672,9 @@
       "dev": true
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/cypress": {
       "version": "13.6.0",
@@ -21340,7 +21380,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -22051,8 +22090,7 @@
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "dev": true
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -23520,8 +23558,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/postcss-values-parser": {
       "version": "6.0.2",
@@ -26869,6 +26906,11 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -27059,7 +27101,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -27472,6 +27513,65 @@
         "webpack": "^5.27.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.12",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz",
+      "integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -28103,9 +28203,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -31339,6 +31439,14 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
       "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
     "@emotion/jest": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.11.0.tgz",
@@ -35893,6 +36001,11 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
+    "@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
+    },
     "@types/trusted-types": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
@@ -37524,6 +37637,11 @@
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
       "dev": true
     },
+    "camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -38075,6 +38193,11 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+    },
     "css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -38220,6 +38343,16 @@
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
       "dev": true
     },
+    "css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -38374,9 +38507,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "cypress": {
       "version": "13.6.0",
@@ -45808,8 +45941,7 @@
     "nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -46322,8 +46454,7 @@
     "picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "dev": true
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -47217,8 +47348,7 @@
     "postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "postcss-values-parser": {
       "version": "6.0.2",
@@ -49754,6 +49884,11 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -49903,8 +50038,7 @@
     "source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
     },
     "source-map-loader": {
       "version": "3.0.2",
@@ -50224,6 +50358,39 @@
       "dev": true,
       "requires": {}
     },
+    "styled-components": {
+      "version": "6.1.12",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz",
+      "integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==",
+      "requires": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.4.38",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+          "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+          "requires": {
+            "nanoid": "^3.3.7",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.2.0"
+          }
+        },
+        "stylis": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+          "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
+        }
+      }
+    },
     "stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -50722,9 +50889,9 @@
       }
     },
     "tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "tsutils": {
       "version": "3.21.0",
diff --git a/package.json b/package.json
index 688f4ce..9f0fd49 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "react-id-generator": "^3.0.2",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^6.20.0",
+    "styled-components": "^6.1.12",
     "zustand": "^4.4.7"
   },
   "devDependencies": {
diff --git a/src/pages/conversion/places-preview-map/indes.style.js b/src/pages/conversion/places-preview-map/indes.style.js
index 95557d6..0f78087 100644
--- a/src/pages/conversion/places-preview-map/indes.style.js
+++ b/src/pages/conversion/places-preview-map/indes.style.js
@@ -40,3 +40,5 @@ export const saveButtonWrapper = css `
   flex-direction: row;
   justify-content: flex-end;
 `;
+
+
diff --git a/src/pages/conversion/places-preview-map/index.js b/src/pages/conversion/places-preview-map/index.js
index 9c71ba4..66084ba 100644
--- a/src/pages/conversion/places-preview-map/index.js
+++ b/src/pages/conversion/places-preview-map/index.js
@@ -69,29 +69,29 @@ const PlacesPreviewMap = ({ style }) => {
     });
 
     map.events.add('ready', () => {
-      var drawingToolbar = new draw_control.DrawingToolbar({ 
-        position: 'bottom-right', 
-        style: 'light', 
-        buttons: ['edit-geometry', 'erase-geometry', 'draw-polygon'] 
-      });    
-
+      var drawingToolbar;
       if(selectedLayerId === 'unitButton') {
-        drawingManager = new drawing.DrawingManager(map, {
-          toolbar: drawingToolbar
-        });
-
-        unitInteractions(units, drawingManager, map);
-      } else if(selectedLayerId === 'levelButton') {  
         drawingToolbar = new draw_control.DrawingToolbar({ 
           position: 'bottom-right', 
           style: 'light', 
-          buttons: ['edit-geometry'] 
-        });   
+          buttons: ['edit-geometry', 'erase-geometry', 'draw-polygon'] 
+        });  
         drawingManager = new drawing.DrawingManager(map, {
           toolbar: drawingToolbar
         });
-        
-        levelInteractions(levels, drawingManager, map);
+
+        unitInteractions(units, drawingManager, map);
+      } else if(selectedLayerId === 'levelButton') {  
+          drawingToolbar = new draw_control.DrawingToolbar({ 
+            position: 'bottom-right', 
+            style: 'light', 
+            buttons: ['edit-geometry'] 
+          });   
+          drawingManager = new drawing.DrawingManager(map, {
+            toolbar: drawingToolbar
+          });
+          
+          levelInteractions(levels, drawingManager, map);
       } else if(selectedLayerId === 'footprintButton') {
         drawingToolbar = new draw_control.DrawingToolbar({ 
           position: 'bottom-right', 
@@ -372,6 +372,7 @@ const PlacesPreviewMap = ({ style }) => {
             onChange={handleLevelChange}
             options={levels.features.map(level => ({ key: level.id, text: getFeatureLabel(level, language) }))}
           />
+          
 
           <div className={layerSelect}>
             <LayerSelector

From 39d5e888be65118884a82cd6167d9c734b339b48 Mon Sep 17 00:00:00 2001
From: Nicole Iftekhar <iftekhan@uci.edu>
Date: Tue, 30 Jul 2024 10:56:24 -0700
Subject: [PATCH 8/8] Update labels accordingly with edits/deletions

---
 .../conversion/places-preview-map/index.js    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/pages/conversion/places-preview-map/index.js b/src/pages/conversion/places-preview-map/index.js
index 66084ba..1807348 100644
--- a/src/pages/conversion/places-preview-map/index.js
+++ b/src/pages/conversion/places-preview-map/index.js
@@ -149,8 +149,8 @@ const PlacesPreviewMap = ({ style }) => {
 
     // Entry point when "unit.geojson" is pressed; the following code should be refactored due to redundancy
     function unitInteractions(units, drawingManager, map) { 
-      var unitLayer, unitLines, polygonHoverLayer; 
-      var layersAdded = [unitLayer, unitLines, polygonHoverLayer];
+      var unitLayer, unitLines, polygonHoverLayer, unitSymbols; 
+      var layersAdded = [unitLayer, unitLines, polygonHoverLayer, unitSymbols];
       const groupedFeatures = groupAndSort(units, language, selectedLevel);
       const keys = Object.keys(groupedFeatures);
         
@@ -167,13 +167,15 @@ const PlacesPreviewMap = ({ style }) => {
           fillColor: 'rgba(150, 50, 255, 0.2)',
           filter: ['==', ['get', 'id'], '']
         });
+
+        unitSymbols = new layer.SymbolLayer(dataSource, null, getTextStyle(category));
   
-        map.layers.add([unitLayer, polygonHoverLayer, unitLines], 'roomPolygons');
+        map.layers.add([unitLayer, polygonHoverLayer, unitLines, unitSymbols], 'roomPolygons');
   
         grabToPointer([unitLayer, polygonHoverLayer], map);
         featureHover(unitLayer, polygonHoverLayer);
   
-        map.layers.add(new layer.SymbolLayer(dataSource, null, getTextStyle(category)), 'roomLabels');
+        // map.layers.add(new layer.SymbolLayer(dataSource, null, getTextStyle(category)), 'roomLabels');
   
         var drawingSource = drawingManager.getSource();
         drawingSource.add(features);
@@ -181,11 +183,11 @@ const PlacesPreviewMap = ({ style }) => {
         let dmLayers = drawingManager.getLayers();
         dmLayers.polygonLayer.setOptions({ visible: false });
         dmLayers.polygonOutlineLayer.setOptions({ visible: false });
-        layersAdded = [unitLayer, unitLines, polygonHoverLayer];
+        layersAdded = [unitLayer, unitLines, polygonHoverLayer, unitSymbols];
   
         map.events.add('drawingmodechanged', drawingManager, (e) => {
           let dmLayers = drawingManager.getLayers();
-          layersAdded = [unitLayer, unitLines, polygonHoverLayer];
+          layersAdded = [unitLayer, unitLines, polygonHoverLayer, unitSymbols];
   
           if (e === 'idle') {
             dmLayers.polygonLayer.setOptions({ visible: false });
@@ -198,12 +200,13 @@ const PlacesPreviewMap = ({ style }) => {
               fillColor: 'rgba(150, 50, 255, 0.2)',
               filter: ['==', ['get', 'id'], '']
             });
+            unitSymbols = new layer.SymbolLayer(drawingManager.getSource(), null, getTextStyle(category));
   
-            map.layers.add([unitLayer, polygonHoverLayer, unitLines], 'roomPolygons');
+            map.layers.add([unitLayer, polygonHoverLayer, unitLines, unitSymbols], 'roomPolygons');
   
             grabToPointer([unitLayer, polygonHoverLayer], map);
             featureHover(unitLayer, polygonHoverLayer);
-            layersAdded = [unitLayer, unitLines, polygonHoverLayer];
+            layersAdded = [unitLayer, unitLines, polygonHoverLayer, unitSymbols];
           }
           else if (e === 'edit-geometry' || e === 'erase-geometry' || e === 'draw-polygon') {      
             drawingModeChanged(layersAdded);