Merge remote-tracking branch 'origin/master' into nn-github-bot

Author: nilsnolde

.github/workflows/preview-deploy.yml

@@ -93,6 +93,7 @@ jobs:
       - name: 🌐 Comment preview URL
         uses: actions/github-script@v7
         with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
             const prNumber = parseInt('${{ steps.pr.outputs.number }}');
             const { data: comments } = await github.rest.issues.listComments({

e2e/map.spec.ts

@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 import {
   BERLIN_COORDINATES,
   setupHeightMock,
-  setupLocateMock,
   setupNominatimMock,
   setupRouteMock,
   setupSearchMock,
@@ -481,6 +480,9 @@ test.describe('Map interactions with left context menu', () => {
       button: 'left',
     });
 
+    // Wait for popup to appear (has 200ms delay)
+    await expect(page.getByTestId('map-info-popup')).toBeVisible();
+
     await expect(page.getByTestId('dd-button')).toContainText(
       '13.393707, 52.518310'
     );
@@ -496,14 +498,9 @@ test.describe('Map interactions with left context menu', () => {
     );
     await expect(page.getByTestId('dms-copy-button')).toBeVisible();
 
-    await expect(
-      page.getByRole('button', { name: 'Locate Point' })
-    ).toBeVisible();
-    await expect(page.getByTestId('locate-point-copy-button')).toBeVisible();
-
-    await expect(
-      page.getByRole('button', { name: 'Valhalla Location JSON' })
-    ).toBeVisible();
+    await expect(page.getByTestId('location-json-button')).toContainText(
+      'Valhalla Location JSON'
+    );
     await expect(page.getByTestId('location-json-copy-button')).toBeVisible();
 
     await expect(page.getByTestId('elevation-button')).toContainText('34 m');
@@ -516,35 +513,10 @@ test.describe('Map interactions with left context menu', () => {
       button: 'left',
     });
 
-    await expect(page.getByTestId('elevation-button')).toContainText('34 m');
-  });
-
-  test('should call locate', async ({ page }) => {
-    await setupHeightMock(page);
-    const locateRequests = await setupLocateMock(page);
+    // Wait for popup to appear (has 200ms delay)
+    await expect(page.getByTestId('map-info-popup')).toBeVisible();
 
-    await page.getByRole('region', { name: 'Map' }).click({
-      button: 'left',
-    });
-
-    await expect(
-      page.getByRole('button', { name: 'Locate Point' })
-    ).toBeVisible();
-
-    await page.getByRole('button', { name: 'Locate Point' }).click();
-
-    expect(locateRequests.length).toBeGreaterThan(0);
-
-    const locateRequest = locateRequests[0] as RouteApiRequest;
-    expect(locateRequest.method).toBe('POST');
-    expect(locateRequest.url).toMatch(
-      /https:\/\/valhalla1\.openstreetmap\.de\/locate/
-    );
-    expect(locateRequest.body).toBeDefined();
-    expect(locateRequest.body?.costing).toBe('bicycle');
-    expect(locateRequest.body?.locations).toStrictEqual([
-      { lat: 52.51830999999976, lon: 13.393706999999239 },
-    ]);
+    await expect(page.getByTestId('elevation-button')).toContainText('34 m');
   });
 
   test('should copy text to clipboard', async ({ page }) => {
@@ -554,6 +526,9 @@ test.describe('Map interactions with left context menu', () => {
       button: 'left',
     });
 
+    // Wait for popup to appear (has 200ms delay)
+    await expect(page.getByTestId('map-info-popup')).toBeVisible();
+
     await page.getByTestId('dd-copy-button').click();
 
     const clipboardContent = await page.evaluate(() =>

src/components/heightgraph.tsx

@@ -239,7 +239,7 @@ const HeightGraph: React.FC<HeightGraphProps> = ({
     return () => {
       tooltip.remove();
     };
-  }, [data, dimensions, onHighlight]);
+  }, [data, dimensions, onHighlight, isExpanded]);
 
   const [prevProps, setPrevProps] = useState({ width, height });
   if (prevProps.width !== width || prevProps.height !== height) {

src/components/isochrones/isochrone-card.tsx

@@ -15,15 +15,32 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { MetricItem } from '@/components/ui/metric-item';
+import { SelectSetting } from '@/components/ui/select-setting';
+import { SliderSetting } from '@/components/ui/slider-setting';
+import {
+  ISOCHRONE_PALETTES,
+  isPaletteId,
+  DEFAULT_OPACITY,
+} from '@/utils/isochrone-palettes';
 
 interface IsochronesCardProps {
   data: ValhallaIsochroneResponse;
   showOnMap: boolean;
 }
 
+const paletteOptions = ISOCHRONE_PALETTES.map((p) => ({
+  key: p.id,
+  value: p.id,
+  text: p.label,
+}));
+
 export const IsochroneCard = ({ data, showOnMap }: IsochronesCardProps) => {
   const toggleShowOnMap = useIsochronesStore((state) => state.toggleShowOnMap);
-
+  const colorPalette = useIsochronesStore((state) => state.colorPalette);
+  const opacity = useIsochronesStore((state) => state.opacity);
+  const updateVisualization = useIsochronesStore(
+    (state) => state.updateVisualization
+  );
   const handleChange = (checked: boolean) => {
     toggleShowOnMap(checked);
   };
@@ -48,6 +65,40 @@ export const IsochroneCard = ({ data, showOnMap }: IsochronesCardProps) => {
               <Label htmlFor="show-on-map">Show on map</Label>
             </div>
           </div>
+          <div className="flex flex-col gap-1">
+            <SelectSetting
+              id="colorPalette"
+              label="Color Palette"
+              description="Choose a color palette for the isochrone polygons. Viridis is a colorblind-friendly option."
+              value={colorPalette}
+              options={paletteOptions}
+              onValueChange={(value) => {
+                if (isPaletteId(value)) {
+                  updateVisualization({ colorPalette: value });
+                }
+              }}
+            />
+            <SliderSetting
+              id="opacity"
+              label="Opacity"
+              description="Controls the transparency of the isochrone fill. Lower values make the map underneath more visible."
+              min={0}
+              max={1}
+              step={0.05}
+              value={opacity}
+              onValueChange={(values) => {
+                const value = values[0] ?? DEFAULT_OPACITY;
+                updateVisualization({ opacity: value });
+              }}
+              onInputChange={(values) => {
+                let value = values[0] ?? DEFAULT_OPACITY;
+                value = isNaN(value)
+                  ? DEFAULT_OPACITY
+                  : Math.min(1, Math.max(0, value));
+                updateVisualization({ opacity: value });
+              }}
+            />
+          </div>
           <div className="flex flex-col justify-between gap-2">
             {data.features
               .filter((feature) => !feature.properties?.type)