Drop timestamp filter

Author: vgeorge

packages/web/src/app/reducer/index.ts

@@ -4,6 +4,14 @@ import { calculateStats } from "../map/utils.ts";
 import tArea from "@turf/area";
 import tBboxPolygon from "@turf/bbox-polygon";
 import { getFgbData } from "../utils/get-fgb-data.ts";
+import { Map } from "maplibre-gl";
+
+const availableTimestamps = [
+  `2024-05-19T05:00:00Z`,
+  `2024-05-19T06:00:00Z`,
+  `2024-05-19T07:00:00Z`,
+  `2024-05-19T08:00:00Z`,
+];
 
 // TODO move to types.ts
 /* eslint-disable no-unused-vars */
@@ -29,20 +37,21 @@ export interface AppState {
   map: any;
   mapStatus: MapStatus;
   geojson?: any;
+  currentTimestamp?: Date;
   currentTimestampGeojson?: any;
 }
 
 export type AppAction =
   | {
       type: AppActionTypes.SET_MAP_REF;
       data: {
-        map: any;
+        map: Map;
       };
     }
   | {
       type: AppActionTypes.SET_CURRENT_TIMESTAMP;
       data: {
-        currentTimestamp: string;
+        currentTimestamp: Date;
       };
     }
   | {
@@ -66,17 +75,10 @@ export const appInitialState = {
     type: "FeatureCollection",
     features: [],
   },
+  currentTimestamp: new Date(availableTimestamps[2]),
+  timestamps: [...availableTimestamps],
 };
 
-function applyTimestampFilter(geojson: any, timestamp: string) {
-  return {
-    type: "FeatureCollection",
-    features: geojson.features.filter(
-      (f: any) => f.properties.timestamp === timestamp,
-    ),
-  };
-}
-
 function appReducer(state: AppState, action: AppAction) {
   switch (action.type) {
     case AppActionTypes.SET_MAP_REF:
@@ -91,13 +93,10 @@ function appReducer(state: AppState, action: AppAction) {
         mapStatus: MapStatus.LOADING,
       };
     case AppActionTypes.UPDATE_VIEW_SUCCESS: {
-      const { geojson, timestamps } = action.data;
-      const currentTimestamp = timestamps[timestamps.length - 1];
-      const currentTimestampGeojson = applyTimestampFilter(
-        geojson,
-        currentTimestamp,
-      );
-      const stats = calculateStats(currentTimestampGeojson);
+      const { geojson } = action.data;
+      const { currentTimestamp } = state;
+
+      const stats = calculateStats(geojson);
 
       const bounds = state.map.getBounds().toArray();
       const [[minX, minY], [maxX, maxY]] = bounds;
@@ -110,18 +109,15 @@ function appReducer(state: AppState, action: AppAction) {
         formattedArea,
         stats,
         geojson,
-        timestamps,
         currentTimestamp,
-        currentTimestampGeojson,
+        currentTimestampGeojson: currentTimestamp,
         mapStatus: MapStatus.READY,
       };
     }
     case AppActionTypes.SET_CURRENT_TIMESTAMP: {
       const { currentTimestamp } = action.data;
-      const currentTimestampGeojson = applyTimestampFilter(
-        state.geojson,
-        currentTimestamp,
-      );
+
+      const currentTimestampGeojson = state.geojson;
       const stats = calculateStats(currentTimestampGeojson);
       return {
         ...state,
@@ -141,7 +137,7 @@ const asyncActionHandlers: any = {
     ({ dispatch, getState }: any) =>
     async () => {
       try {
-        const { map, mapStatus } = getState();
+        const { map, mapStatus, currentTimestamp } = getState();
 
         // Only update the view if the map is ready
         if (mapStatus !== MapStatus.READY) {
@@ -152,7 +148,10 @@ const asyncActionHandlers: any = {
           type: AppActionTypes.UPDATE_VIEW_START,
         });
 
-        const { geojson, timestamps } = await getFgbData({ map });
+        const { geojson, timestamps } = await getFgbData({
+          map,
+          timestamp: currentTimestamp,
+        });
 
         map.getSource("data").setData(geojson);
 

packages/web/src/app/utils/get-fgb-data.ts

@@ -2,12 +2,22 @@ import { geojson as flatgeobuf } from "flatgeobuf";
 import { getFlatGeobufRectangle } from "./get-fgb-rect";
 import { Map } from "maplibre-gl";
 
-export async function getFgbData({ map }: { map: Map }) {
+export async function getFgbData({
+  map,
+  timestamp,
+}: {
+  map: Map;
+  timestamp: Date;
+}) {
   let i = 0;
   const geojson = { type: "FeatureCollection", features: [] as any[] };
 
+  const filename = `https://storage.googleapis.com/osm-tardis/${timestamp
+    .toISOString()
+    .slice(0, 13)}%3A00.fgb`;
+
   const iter = flatgeobuf.deserialize(
-    "https://storage.googleapis.com/osm-tardis/2013-02-03T15%3A00.fgb",
+    filename,
     getFlatGeobufRectangle(map),
   ) as AsyncGenerator<any>;