idk what I changed

tjhorner · Sep 19, 2024 · 5c52c7d · 5c52c7d
1 parent c626635
commit 5c52c7d
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 16 deletions.
diff --git a/packages/frontend/src/lib/components/HeadingMarker.svelte b/packages/frontend/src/lib/components/HeadingMarker.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
   import { faLocationArrow } from "@fortawesome/free-solid-svg-icons"
   import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome"
+  import { scale } from "svelte/transition"
 
   export let heading: number
 </script>
 
-<div class="heading-marker" style={`transform: rotate(${heading - 45}deg)`}>
+<div
+  transition:scale|global
+  class="heading-marker"
+  style={`transform: rotate(${heading - 45}deg)`}
+>
   <FontAwesomeIcon icon={faLocationArrow} />
 </div>
 

diff --git a/packages/frontend/src/lib/components/SequenceViewer.svelte b/packages/frontend/src/lib/components/SequenceViewer.svelte
@@ -40,7 +40,7 @@
   $: projection = new EquirectProjection({ src: imageUrl })
 </script>
 
-<div class="sequence-viewer" transition:fly={{ duration: 500, y: 500 }}>
+<div class="sequence-viewer" transition:fly|global={{ duration: 500, y: 500 }}>
   <button
     title="Close Image Viewer"
     class="close"

diff --git a/packages/frontend/src/lib/components/TrackExplorerMap.svelte b/packages/frontend/src/lib/components/TrackExplorerMap.svelte
@@ -49,9 +49,9 @@
   style="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
   class="full-map"
 >
-  {#if selectedTrack === null}
+  {#if selectedTrack === null && tracks.features.length > 0}
     <TrackSelector {tracks} bind:selectedTrack />
-  {:else}
+  {:else if selectedTrack !== null}
     <Control position="top-left">
       <div transition:fly={{ x: "-100%" }}>
         <ControlGroup>
@@ -68,8 +68,13 @@
   <slot />
 </MapLibre>
 
+<svelte:window
+  on:keydown={(e) => e.key === "Escape" && (selectedTrack = null)}
+/>
+
 <style>
-  :global(.full-map) {
+  :global(.full-map, .full-map canvas) {
     height: 100%;
+    outline: none;
   }
 </style>
diff --git a/packages/frontend/src/lib/components/TrackSelector.svelte b/packages/frontend/src/lib/components/TrackSelector.svelte
@@ -49,15 +49,18 @@
   }
 
   function onLayerClick(e: CustomEvent<LayerClickInfo>) {
+    const searchRadius =
+      $map!.unproject([10, 0]).lng - $map!.unproject([0, 0]).lng
+
     const clickedPoint = e.detail.event.lngLat
     const nearbyFeatures = tracks.features
       .filter(
         (track) =>
           pointToLineDistance(
             [clickedPoint.lng, clickedPoint.lat],
             track.geometry as LineString,
-            { units: "meters" }
-          ) < 20
+            { units: "degrees" }
+          ) < searchRadius
       )
       .sort((a, b) => {
         return b.properties?.captureDate - a.properties?.captureDate
@@ -73,10 +76,14 @@
       return
     }
 
-    selectionCircle = circle([clickedPoint.lng, clickedPoint.lat], 20, {
-      steps: 32,
-      units: "meters",
-    })
+    selectionCircle = circle(
+      [clickedPoint.lng, clickedPoint.lat],
+      searchRadius,
+      {
+        steps: 32,
+        units: "degrees",
+      }
+    )
 
     tracksNearSelection = {
       type: "FeatureCollection",
@@ -94,6 +101,12 @@
     )
   }
 
+  function selectTrack(track: Feature<LineString, TrackProps>) {
+    tracksNearSelection = undefined
+    selectionCircle = undefined
+    selectedTrack = track
+  }
+
   $: tracks && updateDateRange()
 </script>
 
@@ -149,13 +162,17 @@
       "line-opacity": 1,
     }}
   >
-    <Popup popupClass="table-popup" openOn="click">
+    <Popup popupClass="table-popup" openOn="click" let:close>
       {#if tracksNearSelection}
+        <h3>{tracksNearSelection.features.length} tracks</h3>
         <TrackTable
           tracks={tracksNearSelection}
           on:hover={(e) => setHoverState(e.detail, true)}
           on:unhover={(e) => setHoverState(e.detail, false)}
-          on:select={(e) => (selectedTrack = e.detail)}
+          on:select={(e) => {
+            selectTrack(e.detail)
+            close()
+          }}
         />
       {/if}
     </Popup>
@@ -208,5 +225,15 @@
   :global(.table-popup .maplibregl-popup-content) {
     padding: 10px;
     background-color: #333;
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  :global(.table-popup h3) {
+    margin: 0;
+  }
+
+  :global(.table-popup .maplibregl-popup-tip) {
+    border-bottom-color: #333 !important;
   }
 </style>
diff --git a/packages/frontend/src/lib/components/TrackViewer.svelte b/packages/frontend/src/lib/components/TrackViewer.svelte
@@ -149,7 +149,6 @@
 <GeoJSON id="selectedTrack" data={track}>
   <LineLayer
     id="selectedTrack"
-    hoverCursor="pointer"
     layout={{ "line-cap": "round", "line-join": "round" }}
     paint={{
       "line-width": 3,
@@ -168,7 +167,7 @@
 <GeoJSON id="trackImages" data={trackImages}>
   <CircleLayer
     id="images"
-    minzoom={14}
+    minzoom={12}
     manageHoverState
     hoverCursor="pointer"
     on:click={onSelectImage}
@@ -203,7 +202,6 @@
     border-radius: 0.5em;
     box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(0, 0, 0, 0.1);
-    margin-bottom: 0.5em;
   }
 
   @media (prefers-color-scheme: dark) {