Merge pull request #2772 from cal-itp/more-speedmap-tweaks

more speedmap tweaks (follow-ups from pairing session)
cal-itp · Jul 18, 2023 · 90bec4e · 90bec4e
2 parents fa1400e + 8337a74
commit 90bec4e
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 29 deletions.
diff --git a/.github/workflows/deploy-apps-maps.yml b/.github/workflows/deploy-apps-maps.yml
@@ -0,0 +1,59 @@
+name: Build and publish apps/maps
+
+on:
+  push:
+    paths:
+      - 'apps/maps/**'
+  pull_request:
+    paths:
+      - 'apps/maps/**'
+  workflow_dispatch:
+
+jobs:
+  build-apps-maps:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+    - uses: actions/setup-python@v1
+    - uses: actions/setup-node@v3
+    - run: |
+        npm install
+        npm run build
+      working-directory: apps/maps
+
+    # Production
+    - name: Deploy apps/maps production to Netlify
+      if: ${{ github.ref == 'refs/heads/main' }}
+      run: |
+        npm install -g netlify-cli
+        netlify deploy --site=embeddable-maps-calitp-org --dir=apps/maps/build --prod
+      env:
+        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+
+    # Preview on PRs
+    - name: Deploy apps/maps preview to Netlify
+      if: ${{ github.ref != 'refs/heads/main' }}
+      run: |
+        npm install -g netlify-cli
+        netlify deploy --site=embeddable-maps-calitp-org --dir=apps/maps/build --alias=${GITHUB_REPOSITORY#*/}-${PR_NUMBER}
+      env:
+        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+        PR_NUMBER: ${{ github.event.number }}
+
+    - uses: peter-evans/find-comment@v2
+      if: ${{ github.event_name == 'pull_request' }}
+      id: fc
+      with:
+        issue-number: ${{ github.event.number }}
+        comment-author: 'github-actions[bot]'
+        body-includes: --embeddable-maps-calitp-org.netlify.app
+
+    - uses: peter-evans/create-or-update-comment@v2
+      if: ${{ github.event_name == 'pull_request' }}
+      with:
+        comment-id: ${{ steps.fc.outputs.comment-id }}
+        issue-number: ${{ github.event.number }}
+        body: "Preview url: https://${{github.event.repository.name}}-${{ github.event.number }}--embeddable-maps-calitp-org.netlify.app"
+        edit-mode: replace
diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml
@@ -47,7 +47,7 @@ jobs:
       if: ${{ github.ref != 'refs/heads/main' }}
       run: |
         npm install -g netlify-cli
-        netlify deploy --dir=docs/_build/html --alias=${GITHUB_REPOSITORY#*/}-${PR_NUMBER}
+        netlify deploy --dir=docs/_build/html --alias=docs-${GITHUB_REPOSITORY#*/}-${PR_NUMBER}
       env:
         NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
         NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -66,5 +66,5 @@ jobs:
       with:
         comment-id: ${{ steps.fc.outputs.comment-id }}
         issue-number: ${{ github.event.number }}
-        body: "Preview url: https://${{github.event.repository.name}}-${{ github.event.number }}--cal-itp-previews.netlify.app"
+        body: "Preview url: https://docs-${{github.event.repository.name}}-${{ github.event.number }}--cal-itp-previews.netlify.app"
         edit-mode: replace
diff --git a/.gitignore b/.gitignore
@@ -143,3 +143,6 @@ dmypy.json
 
 #.DS_Store files that Macs create
 .DS_Store
+
+# Local Netlify folder
+.netlify
diff --git a/apps/maps/calitp_map_utils/__init__.py b/apps/maps/calitp_map_utils/__init__.py
@@ -21,6 +21,7 @@
 
 class LayerType(str, Enum):  # name?
     speedmaps = "speedmap"
+    speed_variation = "speed_variation"
     hqta_areas = "hqta_areas"
     hqta_stops = "hqta_stops"
     state_highway_network = "state_highway_network"
@@ -57,6 +58,7 @@ class HQTA(BaseModel):
 # Dict Props just mean properties are an arbitrary dictionary
 LAYER_FEATURE_TYPES = {
     LayerType.speedmaps: Feature[Polygon, Speedmap],
+    LayerType.speed_variation: Feature[Polygon, Dict],
     LayerType.hqta_areas: Feature[Union[Polygon, MultiPolygon], HQTA],
     LayerType.hqta_stops: Feature[Point, HQTA],
     LayerType.state_highway_network: Feature[Union[Polygon, MultiPolygon], Dict],

diff --git a/apps/maps/package-lock.json b/apps/maps/package-lock.json
diff --git a/apps/maps/package.json b/apps/maps/package.json
@@ -48,8 +48,8 @@
     "fflate": "^0.7.4",
     "js-base64": "^3.7.5",
     "json-schema-to-typescript": "^13.0.1",
+    "leaflet-loading": "^0.1.24",
     "leaflet-pixi-overlay": "^1.9.4",
-    "leaflet-spin": "^1.1.2",
     "svelte-select": "^5.6.0",
     "title-case": "^3.0.3"
   }

diff --git a/apps/maps/src/routes/+page.svelte b/apps/maps/src/routes/+page.svelte
@@ -15,6 +15,8 @@
     import { titleCase } from "title-case";
     import * as convert from 'color-convert';
 
+    import "leaflet-loading";
+
     const STATE_QUERY_PARAM = "state";
     const START_LAT_LON = [37.6, -120.1];
     const LEAFLET_START_ZOOM = 6;
@@ -82,9 +84,7 @@
         return colorMap[Math.floor(avg_mph / (MAX_MPH / NSHADES))];
     }
 
-    const alphaBase = 255;
-
-    function getColor(feature, layer, saturationMultiplier = 1) {
+    function getColor(feature, layer, saturationMultiplier = 1, alpha = 255) {
       if (feature.properties.color) {
         if (feature.properties.color.length === 4) {
           return feature.properties.color;
@@ -94,14 +94,14 @@
           const hsv = convert.rgb.hsv(feature.properties.color);
           hsv[1] = hsv[1] * saturationMultiplier;
           const rgb = convert.hsv.rgb(hsv);
-          return [...rgb, 255];
+          return [...rgb, alpha];
         }
       }
 
       if (feature.properties.avg_mph) {
         // LEGACY: support speedmaps testing
         const rgba = speedFeatureColor(feature, rgbaColorMap);
-        return [...rgba.slice(0, -1), 255];
+        return [...rgba.slice(0, -1), alpha];
       }
 
       return [100, 100, 100, 127];
@@ -149,7 +149,7 @@
         return {
           html: `
             <h2 class="has-text-weight-bold has-text-teal-bold">
-              ${stop_name ?? '(Stop name unavailable)'}
+              ${stop_name ?? 'Non-stop segment'}
               <span class="tag ml-2">
                 <i class="fas fa-circle mr-2" style="color: rgb(${getColor(feature)})"></i>
                 ${speed}&nbsp;
@@ -188,6 +188,54 @@
         }
       }
 
+      if (layerType === "speed_variation") {
+        const { stop_name, stop_id, route_short_name, route_id, fast_slow_ratio, p20_mph, p80_mph, trips_per_hour, shape_id, stop_sequence} = feature.properties;
+
+        return {
+          html: `
+            <h2 class="has-text-weight-bold has-text-teal-bold">
+              ${stop_name ?? 'Non-stop segment'}
+              <span class="tag ml-2">
+                <i class="fas fa-circle mr-2" style="color: rgb(${getColor(feature)})"></i>
+                <span class="has-text-weight-normal"><sup>p80</sup> &#8260; <sub>p20</sub> </span>
+                &nbsp;${fast_slow_ratio}
+              </span>
+            </h2>
+
+            <ul class="tooltip-meta-list has-text-slate-bold">
+              <li class="tooltip-meta-item">
+                <div class="tooltip-meta-key"><sup>p80</sup> &#8260; <sub>p20</sub></div>
+                <div class="tooltip-meta-value"><sup>${p80_mph} mph</sup> &#8260; <sub>${p20_mph} mph</sub></div>
+              </li>
+              <li class="tooltip-meta-item">
+                <div class="tooltip-meta-key">Route</div>
+                <div class="tooltip-meta-value">${route_short_name ?? '\u2014'}</div>
+              </li>
+              <li class="tooltip-meta-item">
+                <div class="tooltip-meta-key">Stop ID</div>
+                <div class="tooltip-meta-value">${stop_id ?? '\u2014'}</div>
+              </li>
+              <li class="tooltip-meta-item">
+                <div class="tooltip-meta-key">Route ID</div>
+                <div class="tooltip-meta-value">${route_id ?? '\u2014'}</div>
+              </li>
+              <li class="tooltip-meta-item">
+                <div class="tooltip-meta-key">Trips/Hour</div>
+                <div class="tooltip-meta-value">${trips_per_hour ?? '\u2014'}</div>
+              </li>
+              <li class="tooltip-meta-item">
+                <div class="tooltip-meta-key">GTFS Shape ID</div>
+                <div class="tooltip-meta-value">${shape_id ?? '\u2014'}</div>
+              </li>
+              <li class="tooltip-meta-item">
+                <div class="tooltip-meta-key">GTFS Stop Sequence</div>
+                <div class="tooltip-meta-value">${stop_sequence ?? '\u2014'}</div>
+              </li>
+            </ul>`,
+          style: style,
+        }
+      }
+
       if (layerType === "state_highway_network") {
         const { Route, County, District, RouteType } = feature.properties;
 
@@ -255,17 +303,19 @@
                     type: layer.type,
                     ...(layer.properties || {})
                   };
+                  map.fire("dataloading");
                   return new GeoJsonLayer({
                     id: layer.name,
                     data: fetchGeoJSON(layer.url),
                     pickable: true,
                     autoHighlight: true,
                     getPointRadius: 10,
                     ...layerProperties,
-                    getFillColor: (feature) => getColor(feature, layer),
+                    getFillColor: (feature) => getColor(feature, layer, 1, 200),
                     highlightColor: ({ object, layer }) => getColor(object, layer, layerProperties.highlight_saturation_multiplier || 0.7),
                     onDataLoad: (data) => {
                       console.log("Finished loading", layer);
+                      map.fire("dataload");
 
                       if (idx === state.layers.length - 1) {
                         if (state.bbox) {
@@ -316,7 +366,8 @@
         }
 
         map = L.map(mapElement, {
-            preferCanvas: true
+          preferCanvas: true,
+          loadingControl: true,
         }).setView(START_LAT_LON, LEAFLET_START_ZOOM);
 
         const basemapConfig = state.basemap_config || DEFAULT_BASEMAP_CONFIG;
@@ -350,6 +401,7 @@
 </script>
 
 <style>
+    @import "leaflet-loading/src/Control.Loading.css";
     @import 'leaflet/dist/leaflet.css';
 
     .navbar {

diff --git a/apps/maps/src/state.ts b/apps/maps/src/state.ts
@@ -5,7 +5,7 @@
 /* Do not modify it by hand - just update the pydantic models and then re-run the script
 */
 
-export type LayerType = "speedmap" | "hqta_areas" | "hqta_stops" | "state_highway_network";
+export type LayerType = "speedmap" | "speed_variation" | "hqta_areas" | "hqta_stops" | "state_highway_network";
 
 export interface BasemapConfig {
   url: string;