update Global Tsunami Hazard map service: remove rate fileds, enlarge plots, enlarge info window (#45)

Co-authored-by: Olesia Solonko <[email protected]>

Author: solonkoolesya

Makefile

@@ -16,6 +16,7 @@ TIPPE_IMAGE := emotionalcities/tippecanoe
 
 # Other flags
 LOCAL ?= false   # Set to 'true' to build and run with the local frontend image
+NOCACHE ?= false # Set to 'true' to force rebuild without cache
 
 # Paths
 DATA_DIR := $(CURDIR)/data
@@ -63,12 +64,17 @@ docker-up-%: ## Start a specific service
 	$(COMPOSE) --project-name $(PROJECT_NAME) up -d $*
 
 # Build and run with local or remote frontend image
-docker-build-frontend: ## Build local frontend Docker image
+docker-build-frontend: ## Build local frontend Docker image (use NOCACHE=true to force rebuild)
 	@echo "Building local frontend Docker image..."
-	docker build -t $(FRONTEND_IMAGE_LOCAL) ./$(FRONTEND_DIR)
+	@if [ "$(NOCACHE)" = "true" ]; then \
+		echo "Building WITHOUT cache..."; \
+		docker build --no-cache -t $(FRONTEND_IMAGE_LOCAL) ./$(FRONTEND_DIR); \
+	else \
+		docker build -t $(FRONTEND_IMAGE_LOCAL) ./$(FRONTEND_DIR); \
+	fi
 
 # Unified run target (use LOCAL=true to prefer the locally-built frontend image)
-docker-run: ## Run the stack (use LOCAL=true for local frontend build)
+docker-run: ## Run the stack (use LOCAL=true for local frontend build, NOCACHE=true to force rebuild)
 	@if [ "$(LOCAL)" = "true" ]; then \
 		echo "Building and running with local images..."; \
 		$(MAKE) docker-build-frontend; \

frontend/src/index.html

@@ -59,8 +59,8 @@
       border-radius: 8px;
       box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
       font-family: 'Roboto', 'Arial', sans-serif;
-      max-width: 480px;
-      max-height: 80vh;
+      max-width: 800px;
+      max-height: 85vh;
       overflow-y: auto;
       background: white;
     }
@@ -99,6 +99,8 @@
       margin: 12px 0;
       border-radius: 4px;
       background: #fafafa;
+      max-width: 100%;
+      height: auto;
     }
 
     .popup-table {
@@ -371,7 +373,7 @@
     }
 
     .info-content.expanded {
-      max-height: 500px;
+      max-height: 700px;
       padding: 16px;
     }
 
@@ -437,7 +439,8 @@
     .info-reference-link {
       color: #1a73e8;
       text-decoration: none;
-      word-break: break-all;
+      word-break: break-word;
+      overflow-wrap: anywhere;
     }
 
     .info-reference-link:hover {
@@ -682,13 +685,18 @@
     @media (max-width: 768px) {
       .maplibregl-popup-content {
         max-width: calc(100vw - 32px);
-        max-height: 70vh;
+        max-height: 75vh;
       }
 
       .hazard-popup {
         padding: 12px;
       }
 
+      .hazard-popup canvas {
+        width: 100% !important;
+        height: auto !important;
+      }
+
       .popup-table {
         font-size: 12px;
       }
@@ -705,7 +713,9 @@
         gap: 8px;
       }
 
-      .map-info.expanded,
+      .map-info.expanded {
+        max-width: 500px;
+      }
       .map-legend {
         min-width: auto;
         max-width: none;
@@ -813,6 +823,7 @@
         </div>
 
         <div class="info-instructions">
+          <p>The tsunami run-up heights displayed at shoreline locations have been estimated by interpolating from values from the nearest offshore hazard points using an Inverse Distance Weighted (IDW) method</p>
           <h4>How to Use:</h4>
           <ul>
             <li>Find dataset readme file here: <a href="https://zenodo.org/records/16964551" target="_blank"

frontend/src/js/hazard-layer.js

@@ -114,9 +114,9 @@ function addGlobalHazardTiles(map, apiBaseUrl = "http://localhost:5000") {
       const properties = e.features[0].properties;
       const featureId = properties.id || Date.now();
 
-      // Build limited properties table (first 7 items)
+      // Build limited properties table (first 7 items), excluding rate fields
       const propertyEntries = Object.entries(properties).filter(
-        ([key]) => key !== "id" && key !== "fid"
+        ([key]) => key !== "id" && key !== "fid" && !key.toLowerCase().includes("rate")
       );
       const visibleProperties = propertyEntries.slice(0, 7);
       const hiddenProperties = propertyEntries.slice(7);
@@ -135,10 +135,11 @@ function addGlobalHazardTiles(map, apiBaseUrl = "http://localhost:5000") {
       const canvasId = `rate-chart-${featureId}`;
       const downloadId = `download-${featureId}`;
 
+      // UPDATED: Increased canvas size from 400x160 to 650x350
       const html = `
         <div class="hazard-popup">
           <h3>Global Hazard Point</h3>
-          <canvas id="${canvasId}" width="400" height="160"></canvas>
+          <canvas id="${canvasId}" width="650" height="350"></canvas>
           <button class="download-btn" id="${downloadId}">Download CSV</button>
           <details class="properties-details">
             <summary>Properties (${propertyEntries.length} total)</summary>
@@ -154,9 +155,10 @@ function addGlobalHazardTiles(map, apiBaseUrl = "http://localhost:5000") {
           <div class="popup-hint">💡 Press <kbd>ESC</kbd> to close this popup</div>
         </div>`;
 
+      // UPDATED: Increased popup maxWidth from 480px to 750px
       // Create popup with improved configuration to prevent jumping
       currentPopup = new maplibregl.Popup({
-        maxWidth: "480px",
+        maxWidth: "750px",
         className: "chart-popup",
         closeOnClick: false,
         closeOnMove: false,
@@ -313,8 +315,16 @@ function addGlobalHazardTiles(map, apiBaseUrl = "http://localhost:5000") {
         const downloadBtn = document.getElementById(downloadId);
         if (downloadBtn) {
           downloadBtn.addEventListener("click", () => {
-            const header = Object.keys(properties).join(",");
-            const values = Object.values(properties).join(",");
+            // Filter out rate fields from CSV export
+            const filteredProperties = Object.entries(properties)
+              .filter(([key]) => !key.toLowerCase().includes("rate"))
+              .reduce((obj, [key, value]) => {
+                obj[key] = value;
+                return obj;
+              }, {});
+
+            const header = Object.keys(filteredProperties).join(",");
+            const values = Object.values(filteredProperties).join(",");
             const csv = `${header}\n${values}`;
             const blob = new Blob([csv], { type: "text/csv" });
             const link = document.createElement("a");