refactor: extract tooltips and simplify map components

package.json

@@ -21,7 +21,8 @@
     "react-map-gl": "^7.0.16",
     "react-map-gl-geocoder": "^2.2.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^6.3.9"
   },
   "scripts": {
     "start": "webpack server --mode development",

src/App.js

@@ -19,14 +19,14 @@ const App = () => {
   const proposedTrails = LayerData.proposed;
   const landlines = LayerData.landline;
 
-  // Don't show intro modal if user navigates directly to communityTrailsProfile
+  // Don't show intro modal if user navigates directly to communityTrailsProfile or regionalTrailsProfile
   const [showIntroModal, toggleIntroModal] = useState(
-    location.pathname !== '/communityTrailsProfile'
+    location.pathname !== '/communityTrailsProfile' && location.pathname !== '/regionalTrailsProfile'
   );
 
   // Update intro modal visibility when path changes
   useEffect(() => {
-    if (location.pathname === '/communityTrailsProfile' && showIntroModal) {
+    if ((location.pathname === '/communityTrailsProfile' || location.pathname === '/regionalTrailsProfile') && showIntroModal) {
       toggleIntroModal(false);
     }
   }, [location.pathname]);
@@ -52,8 +52,8 @@ const App = () => {
   const [municipalityTrails, setMunicipalityTrails] = useState([]);
   const [showMunicipalityView, setShowMunicipalityView] = useState(false);
   const [showMunicipalityProfileMap, setShowMunicipalityProfileMap] = useState(false);
-  const [showProjectTrailsView, setShowProjectTrailsView] = useState(false);
-  const [showProjectTrailsProfileMap, setShowProjectTrailsProfileMap] = useState(false);
+  const [showRegionalTrailsView, setShowRegionalTrailsView] = useState(false);
+  const [showRegionalTrailsProfileMap, setShowRegionalTrailsProfileMap] = useState(false);
 
   // Layer toggle states for municipality profile
   const [showCommuterRail, setShowCommuterRail] = useState(false);
@@ -66,10 +66,9 @@ const App = () => {
   const [showTrailsRegNameSync, setShowTrailsRegNameSync] = useState(false);
   const [showTransitLandStops, setShowTransitLandStops] = useState(false);
 
-  // Project trails profile state
+  // Regional trails profile state
   const [projectRegNames, setProjectRegNames] = useState([]);
   const [selectedProjectRegName, setSelectedProjectRegName] = useState(null);
-  const [projectColorPalette, setProjectColorPalette] = useState({});
 
   return (
     <div className="App">
@@ -123,10 +122,10 @@ const App = () => {
               setShowMunicipalityView,
               showMunicipalityProfileMap,
               setShowMunicipalityProfileMap,
-              showProjectTrailsView,
-              setShowProjectTrailsView,
-              showProjectTrailsProfileMap,
-              setShowProjectTrailsProfileMap,
+              showRegionalTrailsView,
+              setShowRegionalTrailsView,
+              showRegionalTrailsProfileMap,
+              setShowRegionalTrailsProfileMap,
               // Layer toggle states
               showCommuterRail,
               setShowCommuterRail,
@@ -150,8 +149,6 @@ const App = () => {
               setProjectRegNames,
               selectedProjectRegName,
               setSelectedProjectRegName,
-              projectColorPalette,
-              setProjectColorPalette,
               basemaps,
               existingTrails,
               proposedTrails,

src/components/BufferAnalysisWindow/index.js

@@ -303,7 +303,7 @@ const BufferAnalysisWindow = ({
                     </div>
                   </div>
                   <div className="col-2 text-center">
-                    <div className="text-muted" style={{ fontSize: '0.7rem' }}>Subway Stations</div>
+                    <div className="text-muted" style={{ fontSize: '0.7rem' }}>T-stops</div>
                     <div className="fw-bold fs-5">
                       {bufferResults.subwayStations ? bufferResults.subwayStations.length : 0}
                     </div>
@@ -522,7 +522,7 @@ const BufferAnalysisWindow = ({
                       className="me-2"
                       style={{ transform: 'scale(0.8)' }}
                     />
-                    <span className="small fw-semibold">MBTA Subway Stations ({bufferResults.subwayStations ? bufferResults.subwayStations.length : 0})</span>
+                    <span className="small fw-semibold">T-stops ({bufferResults.subwayStations ? bufferResults.subwayStations.length : 0})</span>
                   </div>
                 </div>
                 {!showSubwayStations ? (

src/components/ControlPanel/RegionalTrailsProfile.js

@@ -0,0 +1,135 @@
+import React, { useState, useEffect, useContext, useMemo, useRef } from "react";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+import { LayerContext } from "../../App";
+
+// Major trails list - these names should match grouped_reg_name values in export_major_trails FeatureServer
+// Sorted alphabetically A to Z
+const MAJOR_TRAILS = [
+  "Bay Circuit",
+  "Bruce Freeman",
+  "Charles River Greenway",
+  "Minuteman",
+  "Neponset River",
+  "Northern Strand"
+].sort();
+
+const RegionalTrailsProfile = ({ 
+  regNames = [],
+  selectedRegNames = new Set(),
+  onToggleRegName,
+  selectedMajorTrails = [],
+  onToggleMajorTrail
+}) => {
+  const { basemaps } = useContext(LayerContext);
+
+  // Check if a major trail is selected (check selectedMajorTrails array)
+  const isMajorTrailSelected = (majorTrail) => {
+    return selectedMajorTrails.includes(majorTrail);
+  };
+
+  const handleProjectToggle = (regName) => {
+    if (onToggleRegName) {
+      onToggleRegName(regName);
+    }
+  };
+
+  const handleMajorTrailToggle = (majorTrail) => {
+    if (onToggleMajorTrail) {
+      // Use the major trail toggle handler - directly queries export_major_trails FeatureServer
+      onToggleMajorTrail(majorTrail);
+    }
+  };
+
+  return (
+    <div className="RegionalTrailsProfile">
+      {regNames.length === 0 ? (
+        <div className="text-muted small">
+          <p>Loading projects...</p>
+        </div>
+      ) : (
+        <>
+          {/* Major Trails Projects List */}
+          <div className="mb-3">
+            <Form.Label className="small fw-semibold d-block mb-2">Major regional trails</Form.Label>
+            <div className="project-list" style={{ maxHeight: '200px', overflowY: 'auto', paddingRight: '5px' }}>
+              {MAJOR_TRAILS.map((majorTrail) => {
+                  const isSelected = isMajorTrailSelected(majorTrail);
+
+                  return (
+                    <div
+                      key={majorTrail}
+                      className="project-item mb-2 p-2 rounded"
+                      style={{
+                        backgroundColor: isSelected ? 'rgba(59, 131, 199, 0.1)' : 'transparent',
+                        border: isSelected ? '2px solid rgba(59, 131, 199, 0.5)' : '1px solid #ddd',
+                        transition: 'all 0.2s',
+                        cursor: 'pointer'
+                      }}
+                      onClick={() => handleMajorTrailToggle(majorTrail)}
+                    >
+                      <Form.Check
+                        type="checkbox"
+                        id={`major-trail-checkbox-${majorTrail}`}
+                        checked={isSelected}
+                        onChange={() => handleMajorTrailToggle(majorTrail)}
+                        label={
+                          <span className="project-name" style={{ fontSize: '14px', fontWeight: isSelected ? 600 : 400 }}>
+                            {majorTrail}
+                          </span>
+                        }
+                        style={{ cursor: 'pointer' }}
+                        onClick={(e) => e.stopPropagation()}
+                      />
+                    </div>
+                  );
+                })}
+            </div>
+          </div>
+
+          {/* Other Trails Project List */}
+          {regNames.length > 0 && (
+            <div className="mb-3">
+              <Form.Label className="small fw-semibold d-block mb-2">Other regional trails</Form.Label>
+              <div className="project-list" style={{ maxHeight: '250px', overflowY: 'auto', paddingRight: '5px' }}>
+                {regNames.map((regName, index) => {
+                  const isSelected = selectedRegNames.has(regName);
+
+                  return (
+                    <div
+                      key={index}
+                      className="project-item mb-2 p-2 rounded"
+                      style={{
+                        backgroundColor: isSelected ? 'rgba(59, 131, 199, 0.1)' : 'transparent',
+                        border: isSelected ? '2px solid rgba(59, 131, 199, 0.5)' : '1px solid #ddd',
+                        transition: 'all 0.2s',
+                        cursor: 'pointer'
+                      }}
+                      onClick={() => handleProjectToggle(regName)}
+                    >
+                      <Form.Check
+                        type="checkbox"
+                        id={`project-checkbox-${index}`}
+                        checked={isSelected}
+                        onChange={() => handleProjectToggle(regName)}
+                        label={
+                          <span className="project-name" style={{ fontSize: '14px' }}>
+                            {regName}
+                          </span>
+                        }
+                        style={{ cursor: 'pointer' }}
+                        onClick={(e) => e.stopPropagation()}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default RegionalTrailsProfile;