From 5b33b7ffcf2105d91d026b4903b577e61dbdd20f Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Mon, 16 Feb 2026 18:49:07 +0000
Subject: [PATCH] Switch cell detail page to libremap rendering

---
 html/static/js/map-cell.js            | 167 ++++++++++++++++++++++++++
 html/template/sync/cell.html          |  31 ++---
 html/template/sync/component/map.html |  87 --------------
 html/template/sync/dashboard.html     |   2 -
 scss/custom.scss                      |   1 +
 scss/sync/cell.scss                   |  12 ++
 sync/cell.go                          | 102 ++++++++++++++++
 sync/dash.go                          |  93 --------------
 8 files changed, 295 insertions(+), 200 deletions(-)
 create mode 100644 html/static/js/map-cell.js
 delete mode 100644 html/template/sync/component/map.html
 create mode 100644 scss/sync/cell.scss
 create mode 100644 sync/cell.go

diff --git a/html/static/js/map-cell.js b/html/static/js/map-cell.js
new file mode 100644
index 00000000..8e4dcea2
--- /dev/null
+++ b/html/static/js/map-cell.js
@@ -0,0 +1,167 @@
+var map = null;
+// A map for showing a single h3 cell
+class MapCell extends HTMLElement {
+	constructor() {
+		super();
+
+		// Create a shadow DOM
+		this.attachShadow({ mode: "open" });
+
+		this._markers = [];
+		// Initial render
+		this.render();
+	}
+
+	// Lifecycle: when element is added to the DOM
+	connectedCallback() {
+		// Initialize the map when the element is added to the DOM
+		setTimeout(() => this._initializeMap(), 0);
+	}
+
+	disconnectedCallback() {
+		if (this._map) {
+			this._map.remove();
+		}
+	}
+
+	// Lifecycle: watch these attributes for changes
+	static get observedAttributes() {
+		return [
+			"api-key",
+			"latitude",
+			"longitude",
+			"organization-id",
+			"tegola",
+			"zoom",
+		];
+	}
+
+	// Lifecycle: respond to attribute changes
+	attributeChangedCallback(name, oldValue, newValue) {
+		// Only handle if map exists and values actually changed
+		if (!this._map || oldValue === newValue) return;
+
+		if (name === "api-key") {
+			this._apiKey = newValue;
+		}
+
+		if (name === "latitude" || name === "longitude") {
+			if (this.hasAttribute("latitude") && this.hasAttribute("longitude")) {
+				const lat = Number(this.getAttribute("latitude"));
+				const lng = Number(this.getAttribute("longitude"));
+				this._map.setCenter([lat, lng]);
+			}
+		}
+
+		if (name === "organization-id") {
+			this._organizationID = newValue;
+		}
+
+		if (name === "tegola") {
+			this._tegola = newValue;
+		}
+
+		if (name === "zoom") {
+			this._map.setZoom(Number(newValue));
+		}
+	}
+
+	_initializeMap() {
+		const geojson = JSON.parse(this.getAttribute("geojson"));
+		const lat = Number(this.getAttribute("latitude") || 36.2);
+		const lng = Number(this.getAttribute("longitude") || -119.2);
+		const organization_id = Number(this.getAttribute("organization-id") || 0);
+		const tegola = this.getAttribute("tegola");
+		const zoom = Number(this.getAttribute("zoom") || 15);
+
+		const mapElement = this.shadowRoot.querySelector("#map");
+		this._map = new maplibregl.Map({
+			container: mapElement,
+			center: {
+				lat: lat,
+				lng: lng,
+			},
+			style: "https://tiles.stadiamaps.com/styles/alidade_smooth.json",
+			zoom: zoom,
+		});
+		const layer_id = "geojson-layer";
+		const source_id = "geojson-source";
+		this._map.on("load", () => {
+			this._map.addSource(source_id, {
+				data: geojson,
+				type: "geojson",
+			});
+			this._map.addLayer({
+				id: layer_id,
+				interactive: false,
+				paint: {
+					"fill-opacity": 0.3,
+					"fill-color": "#dc3545",
+				},
+				source: source_id,
+				type: "fill",
+			});
+		});
+	}
+
+	// Initial render of component
+	render() {
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import url("//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css");
+				.map-container {
+					background-color: #e9ecef;
+					border-radius: 10px;
+					box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+					height: 500px;
+					margin-top: 20px;
+					position: relative;
+				}
+				#map {
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					height: 100%;
+					width: 100%
+				}
+			</style>
+			
+			<div id="map-container" class="map-container">
+				<div id="map"></div>
+			</div>
+		`;
+	}
+
+	jumpTo(args) {
+		this._map.jumpTo(args);
+	}
+
+	setMarker(coords) {
+		console.log("Setting map marker", coords);
+		this._map.jumpTo({
+			center: coords,
+			zoom: 14,
+		});
+		this._markers.forEach((marker) => marker.remove());
+
+		const marker = new maplibregl.Marker({
+			color: "#FF0000",
+			draggable: true,
+		})
+			.setLngLat(coords)
+			.addTo(this._map);
+		marker.on("dragend", function (e) {
+			const markerDraggedEvent = new CustomEvent("markerdragend", {
+				detail: {
+					marker: marker,
+				},
+			});
+			mapContainer.dispatchEvent(markerDraggedEvent);
+		});
+		this._markers = [marker];
+	}
+}
+
+customElements.define("map-cell", MapCell);
diff --git a/html/template/sync/cell.html b/html/template/sync/cell.html
index a450448f..734870c1 100644
--- a/html/template/sync/cell.html
+++ b/html/template/sync/cell.html
@@ -2,21 +2,11 @@
 
 {{ define "title" }}Dash{{ end }}
 {{ define "extraheader" }}
-	{{ template "map" .MapData }}
-	<style>
-		.address-container {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-		}
-
-		.section-header {
-			margin-top: 30px;
-			margin-bottom: 15px;
-			padding-bottom: 10px;
-			border-bottom: 1px solid #dee2e6;
-		}
-	</style>
+	<script
+		type="text/javascript"
+		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
+	></script>
+	<script src="/static/js/map-cell.js"></script>
 {{ end }}
 {{ define "content" }}
 	<div class="container mt-4 mb-5">
@@ -30,9 +20,14 @@
 		<!-- Map and Address Section - Side by Side -->
 		<div class="row mb-4">
 			<div class="col-md-8">
-				<div class="map-container">
-					<div id="map"></div>
-				</div>
+				<map-cell
+					geojson="{{ .MapData.GeoJSON|json }}"
+					latitude="{{ .MapData.Center.Lat }}"
+					longitude="{{ .MapData.Center.Lng }}"
+					organization-id="{{ .User.Organization.ID }}"
+					tegola="{{ .URL.Tegola }}"
+					zoom="{{ .MapData.Zoom }}"
+				/>
 			</div>
 			<div class="col-md-4">
 				<div class="card h-100">
diff --git a/html/template/sync/component/map.html b/html/template/sync/component/map.html
deleted file mode 100644
index 7f486c8c..00000000
--- a/html/template/sync/component/map.html
+++ /dev/null
@@ -1,87 +0,0 @@
-{{ define "sync/component/map.html" }}
-	<script src="https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js"></script>
-	<link
-		href="https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css"
-		rel="stylesheet"
-	/>
-<script>
-const geojson = JSON.parse({{.GeoJSON}})
-function addMarkers(map, markers) {
-	for (let i = 0; i < markers.length; i++) {
-		let marker = markers[i];
-		marker.addTo(map);
-	}
-}
-function mapMarkers() {
-	const markers = [
-	{{ range .Markers }}
-		new mapboxgl.Marker().setLngLat([{{.LatLng.Lng}}, {{.LatLng.Lat}}])
-	{{end}}
-	];
-	return markers;
-}
-
-function onLoad() {
-	console.log("Setting up the map...", geojson);
-	mapboxgl.accessToken = {{ .MapboxToken }};
-	const map = new mapboxgl.Map({
-		container: "map",
-		center: [{{.Center.Lng}}, {{.Center.Lat}}],
-		style: 'mapbox://styles/mapbox/streets-v12', // style URL
-		zoom: {{.Zoom}},
-	});
-	map.on("load", function() {
-		console.log("Map post-load...");
-		addMarkers(map, mapMarkers());
-		const sourceId = 'h3-hexes';
-		const layerId = 'h3-hexes-layer';
-		let source = map.getSource(sourceId);
-
-		if (!source) {
-			map.addSource(sourceId, {
-				type: 'geojson',
-				data: geojson
-			});
-			map.addLayer({
-				id: layerId,
-				source: sourceId,
-				type: 'fill',
-				interactive: false,
-				paint: {
-					'fill-color': '#F00000',
-					'fill-opacity': 0.3
-				}
-			});
-			source = map.getSource(sourceId);
-		}
-		source.setData(geojson);
-
-		console.log("Map post-load done.");
-	});
-	console.log("Map init done.");
-}
-window.addEventListener("load", onLoad);
-</script>
-	<style>
-		.map-container {
-			background-color: #e9ecef;
-			border-radius: 10px;
-			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-			height: 500px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			margin-top: 20px;
-		}
-		#map {
-			height: 500px;
-			width: 100%;
-			margin-bottom: 10px;
-		}
-		#map img {
-			max-width: none;
-			min-width: 0px;
-			height: auto;
-		}
-	</style>
-{{ end }}
diff --git a/html/template/sync/dashboard.html b/html/template/sync/dashboard.html
index 7b841523..6fdcfb2d 100644
--- a/html/template/sync/dashboard.html
+++ b/html/template/sync/dashboard.html
@@ -7,7 +7,6 @@
 		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
 	></script>
 	<script src="/static/js/map-aggregate.js"></script>
-	<style></style>
 	<script>
 		function onLoad() {
 			const map = document.querySelector("map-aggregate");
@@ -144,7 +143,6 @@
 	<div class="row">
 		<div class="col-12">
 			<map-aggregate
-				api-key="{{ .MapData.MapboxToken }}"
 				latitude="36.3"
 				longitude="-119.2"
 				organization-id="{{ .User.Organization.ID }}"
diff --git a/scss/custom.scss b/scss/custom.scss
index 088ac247..9a653a71 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -50,6 +50,7 @@ $theme-colors: map-merge(
 @import "./rmo/nuisance.scss";
 @import "./rmo/root.scss";
 @import "./rmo/status.scss";
+@import "./sync/cell.scss";
 @import "./sync/dashboard.scss";
 @import "./sync/notification.scss";
 @import "./sync/pool-csv-upload.scss";
diff --git a/scss/sync/cell.scss b/scss/sync/cell.scss
new file mode 100644
index 00000000..016f275f
--- /dev/null
+++ b/scss/sync/cell.scss
@@ -0,0 +1,12 @@
+.address-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.section-header {
+	margin-top: 30px;
+	margin-bottom: 15px;
+	padding-bottom: 10px;
+	border-bottom: 1px solid #dee2e6;
+}
diff --git a/sync/cell.go b/sync/cell.go
new file mode 100644
index 00000000..43a9bb16
--- /dev/null
+++ b/sync/cell.go
@@ -0,0 +1,102 @@
+package sync
+
+import (
+	"net/http"
+
+	"github.com/Gleipnir-Technology/nidus-sync/db"
+	"github.com/Gleipnir-Technology/nidus-sync/db/models"
+	"github.com/Gleipnir-Technology/nidus-sync/h3utils"
+	"github.com/Gleipnir-Technology/nidus-sync/html"
+	"github.com/go-chi/chi/v5"
+	"github.com/uber/h3-go/v4"
+)
+
+type contentCell struct {
+	BreedingSources []BreedingSourceSummary
+	CellBoundary    h3.CellBoundary
+	Inspections     []Inspection
+	MapData         ComponentMap
+	Traps           []TrapSummary
+	Treatments      []Treatment
+	URL             ContentURL
+	User            User
+}
+
+func getCellDetails(w http.ResponseWriter, r *http.Request, user *models.User) {
+	cell_str := chi.URLParam(r, "cell")
+	if cell_str == "" {
+		respondError(w, "There should always be a cell", nil, http.StatusBadRequest)
+		return
+	}
+	c, err := HexToInt64(cell_str)
+	if err != nil {
+		respondError(w, "Cannot convert provided cell to uint64", err, http.StatusBadRequest)
+		return
+	}
+	ctx := r.Context()
+	org, err := user.Organization().One(ctx, db.PGInstance.BobDB)
+	if err != nil {
+		respondError(w, "Failed to get org", err, http.StatusInternalServerError)
+		return
+	}
+	userContent, err := contentForUser(ctx, user)
+	if err != nil {
+		respondError(w, "Failed to get user", err, http.StatusInternalServerError)
+		return
+	}
+	center, err := h3.Cell(c).LatLng()
+	if err != nil {
+		respondError(w, "Failed to get center", err, http.StatusInternalServerError)
+		return
+	}
+	boundary, err := h3.Cell(c).Boundary()
+	if err != nil {
+		respondError(w, "Failed to get boundary", err, http.StatusInternalServerError)
+		return
+	}
+	inspections, err := inspectionsByCell(ctx, org, h3.Cell(c))
+	if err != nil {
+		respondError(w, "Failed to get inspections by cell", err, http.StatusInternalServerError)
+		return
+	}
+	geojson, err := h3utils.H3ToGeoJSON([]h3.Cell{h3.Cell(c)})
+	if err != nil {
+		respondError(w, "Failed to get boundaries", err, http.StatusInternalServerError)
+		return
+	}
+	resolution := h3.Cell(c).Resolution()
+	sources, err := breedingSourcesByCell(ctx, org, h3.Cell(c))
+	if err != nil {
+		respondError(w, "Failed to get sources", err, http.StatusInternalServerError)
+		return
+	}
+	traps, err := trapsByCell(ctx, org, h3.Cell(c))
+	if err != nil {
+		respondError(w, "Failed to get traps", err, http.StatusInternalServerError)
+		return
+	}
+
+	treatments, err := treatmentsByCell(ctx, org, h3.Cell(c))
+	if err != nil {
+		respondError(w, "Failed to get treatments", err, http.StatusInternalServerError)
+		return
+	}
+	data := contentCell{
+		BreedingSources: sources,
+		CellBoundary:    boundary,
+		Inspections:     inspections,
+		MapData: ComponentMap{
+			Center: h3.LatLng{
+				Lat: center.Lat,
+				Lng: center.Lng,
+			},
+			GeoJSON: geojson,
+			Zoom:    resolution + 5,
+		},
+		Traps:      traps,
+		Treatments: treatments,
+		URL:        newContentURL(),
+		User:       userContent,
+	}
+	html.RenderOrError(w, "sync/cell.html", &data)
+}
diff --git a/sync/dash.go b/sync/dash.go
index b99d1c93..8e6250dc 100644
--- a/sync/dash.go
+++ b/sync/dash.go
@@ -13,11 +13,9 @@ import (
 	"github.com/Gleipnir-Technology/nidus-sync/config"
 	"github.com/Gleipnir-Technology/nidus-sync/db"
 	"github.com/Gleipnir-Technology/nidus-sync/db/models"
-	"github.com/Gleipnir-Technology/nidus-sync/h3utils"
 	"github.com/Gleipnir-Technology/nidus-sync/html"
 	"github.com/go-chi/chi/v5"
 	"github.com/google/uuid"
-	"github.com/uber/h3-go/v4"
 )
 
 // Authenticated pages
@@ -41,15 +39,6 @@ type ContentTrap struct {
 	Trap    Trap
 	User    User
 }
-type ContentCell struct {
-	BreedingSources []BreedingSourceSummary
-	CellBoundary    h3.CellBoundary
-	Inspections     []Inspection
-	MapData         ComponentMap
-	Traps           []TrapSummary
-	Treatments      []Treatment
-	User            User
-}
 type ContentDashboard struct {
 	CountTraps           int
 	CountMosquitoSources int
@@ -70,20 +59,6 @@ type ContentDistrict struct {
 	MapboxToken string
 }
 
-func getCellDetails(w http.ResponseWriter, r *http.Request, user *models.User) {
-	cell_str := chi.URLParam(r, "cell")
-	if cell_str == "" {
-		respondError(w, "There should always be a cell", nil, http.StatusBadRequest)
-		return
-	}
-	c, err := HexToInt64(cell_str)
-	if err != nil {
-		respondError(w, "Cannot convert provided cell to uint64", err, http.StatusBadRequest)
-		return
-	}
-	cell(r.Context(), w, user, c)
-}
-
 func getDistrict(w http.ResponseWriter, r *http.Request) {
 	context := ContentDistrict{
 		MapboxToken: config.MapboxToken,
@@ -182,74 +157,6 @@ func getTrap(w http.ResponseWriter, r *http.Request, u *models.User) {
 	trap(w, r, u, globalid)
 }
 
-func cell(ctx context.Context, w http.ResponseWriter, user *models.User, c int64) {
-	org, err := user.Organization().One(ctx, db.PGInstance.BobDB)
-	if err != nil {
-		respondError(w, "Failed to get org", err, http.StatusInternalServerError)
-		return
-	}
-	userContent, err := contentForUser(ctx, user)
-	if err != nil {
-		respondError(w, "Failed to get user", err, http.StatusInternalServerError)
-		return
-	}
-	center, err := h3.Cell(c).LatLng()
-	if err != nil {
-		respondError(w, "Failed to get center", err, http.StatusInternalServerError)
-		return
-	}
-	boundary, err := h3.Cell(c).Boundary()
-	if err != nil {
-		respondError(w, "Failed to get boundary", err, http.StatusInternalServerError)
-		return
-	}
-	inspections, err := inspectionsByCell(ctx, org, h3.Cell(c))
-	if err != nil {
-		respondError(w, "Failed to get inspections by cell", err, http.StatusInternalServerError)
-		return
-	}
-	geojson, err := h3utils.H3ToGeoJSON([]h3.Cell{h3.Cell(c)})
-	if err != nil {
-		respondError(w, "Failed to get boundaries", err, http.StatusInternalServerError)
-		return
-	}
-	resolution := h3.Cell(c).Resolution()
-	sources, err := breedingSourcesByCell(ctx, org, h3.Cell(c))
-	if err != nil {
-		respondError(w, "Failed to get sources", err, http.StatusInternalServerError)
-		return
-	}
-	traps, err := trapsByCell(ctx, org, h3.Cell(c))
-	if err != nil {
-		respondError(w, "Failed to get traps", err, http.StatusInternalServerError)
-		return
-	}
-
-	treatments, err := treatmentsByCell(ctx, org, h3.Cell(c))
-	if err != nil {
-		respondError(w, "Failed to get treatments", err, http.StatusInternalServerError)
-		return
-	}
-	data := ContentCell{
-		BreedingSources: sources,
-		CellBoundary:    boundary,
-		Inspections:     inspections,
-		MapData: ComponentMap{
-			Center: h3.LatLng{
-				Lat: center.Lat,
-				Lng: center.Lng,
-			},
-			GeoJSON:     geojson,
-			MapboxToken: config.MapboxToken,
-			Zoom:        resolution + 5,
-		},
-		Traps:      traps,
-		Treatments: treatments,
-		User:       userContent,
-	}
-	html.RenderOrError(w, "sync/cell.html", &data)
-}
-
 func dashboard(ctx context.Context, w http.ResponseWriter, user *models.User) {
 	org, err := user.Organization().One(ctx, db.PGInstance.BobDB)
 	if err != nil {