kevinmichaelchen · kevinmichaelchen · Jun 7, 2022 · Jun 8, 2022 · Jun 8, 2022
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -16,6 +16,7 @@
     "@types/node": "^17.0.39",
     "@types/react": "^18.0.11",
     "@types/react-dom": "^18.0.5",
+    "h3-js": "^3.7.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,11 +1,12 @@
 import React, { ReactElement } from "react";
 import "./App.css";
-import { GoogleMap, LoadScript } from "@react-google-maps/api";
+import { GoogleMap, LoadScript, Polygon } from "@react-google-maps/api";
 import Marker from "./Marker";
 import mapStyles from "./mapStyles.json";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import {
   Box,
+  Stack,
   FormControlLabel,
   FormGroup,
   Grid,
@@ -29,6 +30,9 @@ import { faker } from "@faker-js/faker";
 import listDrivers from "./request/listDrivers";
 import getNearestDrivers from "./request/getNearestDrivers";
 import updateDriverLocations from "./request/updateDriverLocations";
+import { getPolygons, getPolygonsOutput } from "./getPolygons";
+import ResolutionControl from "./ResolutionControl";
+import Hexagons, { pointsToPaths, buildOptions } from "./Hexagons";
 
 const darkTheme = createTheme({
   palette: {
@@ -65,7 +69,7 @@ function newDriverName(): string {
 function MyMap() {
   const apiKey = process.env.REACT_APP_GOOGLE_MAPS_API_KEY as string;
   const [focusedDriverId, setFocusedDriverId] = React.useState<string>("");
-  const [queryMode, setQueryMode] = React.useState<boolean>(false);
+  const [queryMode, setQueryMode] = React.useState<boolean>(true);
   const [driverLocationsState, setDriverLocationsState] =
     React.useState<NormalizedDriverLocations>({
       byId: {},
@@ -77,6 +81,11 @@ function MyMap() {
       allIds: [],
     } as NormalizedDriverLocations);
   const [searchResults, setSearchResults] = React.useState<SearchResult[]>([]);
+  const [resolution, setResolution] = React.useState<number>(9);
+  const [pickupLocation, setPickupLocation] = React.useState<LatLng>({
+    latitude: 40.72106092795603,
+    longitude: -73.95246141893465,
+  } as LatLng);
 
   const newDriverLocations = getDriverLocationsFromState(
     newDriverLocationsState
@@ -92,14 +101,18 @@ function MyMap() {
     getDriverLocations().catch(console.error);
   });
 
+  const [polyOut, setPolyOut] = React.useState<getPolygonsOutput | undefined>();
   const getNearbyDrivers = async (e: google.maps.MapMouseEvent) => {
     const lat = e.latLng?.lat() ?? 0;
     const lng = e.latLng?.lng() ?? 0;
 
-    const res = await getNearestDrivers({
+    const point: LatLng = {
       latitude: lat,
       longitude: lng,
-    } as LatLng);
+    };
+    setPickupLocation(point);
+    setPolyOut(getPolygons(pickupLocation, resolution));
+    const res = await getNearestDrivers(point);
     setSearchResults(res?.results ?? []);
   };
 
@@ -119,75 +132,89 @@ function MyMap() {
     );
   };
 
+  const onLoad = (polygon: google.maps.Polygon) => {
+    console.log("polygon: ", polygon);
+  };
+
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={3}>
-        <FormGroup>
-          <FormControlLabel
-            control={
-              <Switch
-                checked={queryMode}
-                onChange={() => setQueryMode(!queryMode)}
-              />
-            }
-            label="Mode"
-          />
-        </FormGroup>
-      </Grid>
-      <Grid item xs={9}>
-        {queryMode ? (
-          <Typography>Click anywhere to rank nearby drivers</Typography>
-        ) : (
-          <Typography>Click to add new drivers</Typography>
-        )}
-      </Grid>
-      <Grid item xs={3}>
-        <Item>
-          <DriverList
-            buildHandleMouseOver={(driverId: string) => () =>
-              setFocusedDriverId(driverId)}
-            buildHandleMouseOut={(driverId: string) => () =>
-              setFocusedDriverId("")}
-            queryMode={queryMode}
-            onUpload={() =>
-              updateDriverLocations(
-                getDriverLocationsFromState(newDriverLocationsState)
-              )
-            }
-            driverLocations={newDriverLocations}
-          />
-        </Item>
-      </Grid>
-      <Grid item xs={9}>
-        <Item>
-          <LoadScript googleMapsApiKey={apiKey}>
-            <GoogleMap
-              onClick={queryMode ? getNearbyDrivers : addNewDriver}
-              options={{
-                styles: mapStyles,
-              }}
-              mapContainerStyle={containerStyle}
-              center={center}
-              zoom={13}
-            >
-              {driverLocations.map((dl: DriverLocation, i: number) => (
-                <Marker
-                  key={i}
-                  driverLocation={dl}
-                  isNear={searchResults
-                    .map((sr) => sr.driver.driverId)
-                    .includes(dl.driverId)}
+    <Stack width={"100%"}>
+      <ResolutionControl
+        resolution={resolution}
+        setResolution={setResolution}
+      />
+      <Grid container spacing={2}>
+        <Grid item xs={3}>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={queryMode}
+                  onChange={() => setQueryMode(!queryMode)}
                 />
-              ))}
-              {newDriverLocations.map((dl: DriverLocation, i: number) => (
-                <Marker key={i} driverLocation={dl} cached />
-              ))}
-              <></>
-            </GoogleMap>
-          </LoadScript>
-        </Item>
+              }
+              label="Mode"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={9}>
+          {queryMode ? (
+            <Typography>Click anywhere to rank nearby drivers</Typography>
+          ) : (
+            <Typography>Click to add new drivers</Typography>
+          )}
+        </Grid>
+        <Grid item xs={3}>
+          <Item>
+            <DriverList
+              buildHandleMouseOver={(driverId: string) => () =>
+                setFocusedDriverId(driverId)}
+              buildHandleMouseOut={(driverId: string) => () =>
+                setFocusedDriverId("")}
+              queryMode={queryMode}
+              onUpload={() =>
+                updateDriverLocations(
+                  getDriverLocationsFromState(newDriverLocationsState)
+                )
+              }
+              searchResults={searchResults}
+              driverLocations={newDriverLocations}
+            />
+          </Item>
+        </Grid>
+        <Grid item xs={9}>
+          <Item>
+            <LoadScript googleMapsApiKey={apiKey}>
+              <GoogleMap
+                onClick={queryMode ? getNearbyDrivers : addNewDriver}
+                options={{
+                  styles: mapStyles,
+                }}
+                mapContainerStyle={containerStyle}
+                center={center}
+                zoom={13}
+              >
+                {driverLocations.map((dl: DriverLocation, i: number) => (
+                  <Marker
+                    key={i}
+                    location={dl.currentLocation}
+                    isNear={searchResults
+                      .map((sr: SearchResult) => sr.driver.driverId)
+                      .includes(dl.driverId)}
+                  />
+                ))}
+                {newDriverLocations.map((dl: DriverLocation, i: number) => (
+                  <Marker key={i} location={dl.currentLocation} cached />
+                ))}
+                {pickupLocation && (
+                  <Marker location={pickupLocation} pickupLocation />
+                )}
+                {polyOut && <Hexagons polyOut={polyOut} />}
+              </GoogleMap>
+            </LoadScript>
+          </Item>
+        </Grid>
       </Grid>
-    </Grid>
+    </Stack>
   );
 }
 

diff --git a/ui/src/Hexagons/index.tsx b/ui/src/Hexagons/index.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { getPolygons, getPolygonsOutput } from "../getPolygons";
+import { LatLng } from "../types";
+import { Polygon } from "@react-google-maps/api";
+
+interface HexagonsProps {
+  polyOut: getPolygonsOutput;
+}
+
+export function buildOptions(k: number): google.maps.PolygonOptions {
+  const fillColor = k === 0 ? "lightblue" : k === 1 ? "lightblue" : "lightblue";
+  return {
+    fillColor,
+    fillOpacity: 0.3,
+    strokeColor: "red",
+    strokeOpacity: 1,
+    strokeWeight: 1,
+    clickable: false,
+    draggable: false,
+    editable: false,
+    geodesic: false,
+    zIndex: 1,
+  } as google.maps.PolygonOptions;
+}
+
+export default function Hexagons({ polyOut }: HexagonsProps) {
+  const onLoad = (polygon: google.maps.Polygon) => {
+    console.log("polygon: ", polygon);
+  };
+  return (
+    <>
+      {polyOut?.ring0.map((points: LatLng[]) => (
+        <Polygon
+          onLoad={onLoad}
+          paths={pointsToPaths(points)}
+          options={buildOptions(0)}
+        />
+      )) ?? null}
+      {polyOut?.ring1.map((points: LatLng[]) => (
+        <Polygon
+          onLoad={onLoad}
+          paths={pointsToPaths(points)}
+          options={buildOptions(1)}
+        />
+      )) ?? null}
+      {polyOut?.ring2.map((points: LatLng[]) => (
+        <Polygon
+          onLoad={onLoad}
+          paths={pointsToPaths(points)}
+          options={buildOptions(2)}
+        />
+      )) ?? null}
+    </>
+  );
+}
+
+export function pointsToPaths(points: LatLng[]): google.maps.LatLngLiteral[] {
+  return points.map(
+    (p: LatLng) =>
+      ({ lat: p.latitude, lng: p.longitude } as google.maps.LatLngLiteral)
+  );
+}
diff --git a/ui/src/Marker/index.tsx b/ui/src/Marker/index.tsx
@@ -12,32 +12,60 @@ function getIconPath(element: React.ReactElement): string {
 }
 
 interface MyMarkerProps {
-  driverLocation: DriverLocation;
+  /**
+   * The marker's location
+   */
+  location: LatLng;
   handleMouseOver?: (e: google.maps.MapMouseEvent) => void;
+  handleMouseOut?: (e: google.maps.MapMouseEvent) => void;
   handleClick?: (e: google.maps.MapMouseEvent) => void;
+
+  /**
+   * Whether the marker is for the requested pickup location
+   */
+  pickupLocation?: boolean;
+  /**
+   * Whether the marker is for a new driver location that will be created in bulk.
+   */
   cached?: boolean;
+  /**
+   * Whether the marker represents a nearby driver to the requested pickup location.
+   */
   isNear?: boolean;
 }
 
 export default function MyMarker(props: MyMarkerProps) {
-  const { cached, isNear, driverLocation, handleClick, handleMouseOver } =
-    props;
-  const color = isNear ? "green" : cached ? "orange" : "#FFD700";
-  const p = driverLocation.currentLocation;
+  const {
+    pickupLocation,
+    cached,
+    isNear,
+    location: p,
+    handleClick,
+    handleMouseOver,
+    handleMouseOut,
+  } = props;
+  let color = "#FFD700";
+  if (isNear) color = "green";
+  if (cached) color = "orange";
+  if (pickupLocation) color = "purple";
+  if (pickupLocation)
+    console.log("rendering marker for pickup", pickupLocation, p);
   return (
     <Marker
+      onUnmount={(marker: google.maps.Marker) => console.log("marker unmount")}
       title={`(${p.latitude}, ${p.longitude})`}
       position={{ lat: p.latitude, lng: p.longitude }}
       opacity={1}
       onClick={handleClick}
       onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
       icon={{
         path: getIconPath(<DirectionsCarFilled />),
         fillColor: color,
         fillOpacity: 0.9,
         scale: 0.7,
         strokeColor: color,
-        strokeWeight: 1,
+        strokeWeight: 0.5,
       }}
     />
   );