back-testing-react 1.0.0

package/src/components/back-testing-map/back-testing-map.tsx

@@ -0,0 +1,503 @@
+import { BackTestingActions, BackTestingMapProps, Payout, CIAC_LAYER, CIAC_SOURCE, Constants, DEFAULT_MAP_COORDINATE, DEFAULT_MAP_ZOOM, generateCATColor, MapView, TROPICAL_STORM_LAYER, TROPICAL_STORM_SOURCE, TROPICAL_STORM_TRACK_LAYER, TROPICAL_STORM_TRACK_SOURCE, generateCIACRequest, generateProxyRequest, generateAnemometerRequest, PayoutRequest, randomColor } from "./back-testing-map.types";
+import { GeoJsonProperties, Feature, Polygon, Geometry, LineString, Point, FeatureCollection } from "geojson";
+import "mapbox-gl/dist/mapbox-gl.css";
+import "./back-testing-map.css"
+import { useEffect, useRef, useState } from "react";
+import mapboxgl, { GeoJSONSource } from 'mapbox-gl';
+import { LngLatLike } from "@mapbox/search-js-core";
+import * as turf from "@turf/turf";
+
+import React, { forwardRef, useImperativeHandle } from "react";
+import { fetchPayouts, StormPayout } from "./back-testing-map.service";
+import BackTestingCatLegend from "../back-testing-cat-legend";
+import BackTestingStormLegend from "../back-testing-storm-legend";
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+
+
+const BackTestingMap = forwardRef<BackTestingActions, BackTestingMapProps>((props,ref) => {
+
+    const mapInstanceRef = useRef<mapboxgl.Map | undefined>(undefined);
+    const mapContainerRef = useRef<any>(undefined);
+    const [mapLoaded, setMapLoaded] = useState(false);
+
+    const [locationMarker, setLocationMarker] = useState<mapboxgl.Marker>(new mapboxgl.Marker());
+    const [catCircle, setCatCircle] = useState<Feature<Polygon, GeoJsonProperties> | undefined>(undefined);
+    const [mapView, setMapView] = useState<MapView>(MapView.CAT_INTENSITY);
+    const [payouts, setPayouts] = useState<StormPayout[]>([]);
+
+    const toggleView = (
+        event: React.MouseEvent<HTMLElement>,
+        newView: MapView,
+    ) => {
+      if(newView !== null){
+        setMapView(newView);
+      }
+        toggleStormTracks(newView);
+        if(props.onViewChange != undefined){
+            props.onViewChange(newView);
+        }
+    };
+
+    useImperativeHandle(ref, () => ({
+        calculatePayouts(proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNamedStorms: boolean, includeZeroPayouts: boolean, limit: number){
+            calculatePayouts(proxyPayouts, anemometerCode, anemometerPayouts, ciacPayouts, includeNoNamedStorms, includeZeroPayouts, limit);
+        }
+    }));
+
+    function calculatePayouts(proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNamedStorms: boolean, includeZeroPayouts: boolean, limit: number){
+        if(props.ciacRadius != undefined && props.ciacRadius != null && props.location != undefined && props.location != null){
+            let latLng : LngLatLike = [props.location.longitude,props.location.latitude];
+            const proxy = generateProxyRequest(latLng as [number,number], 1000, proxyPayouts);
+            const anemometer = generateAnemometerRequest(latLng as [number,number], anemometerCode, anemometerPayouts);
+            const ciac = generateCIACRequest(latLng as [number,number], props.ciacRadius, includeNoNamedStorms, ciacPayouts);
+            let request : PayoutRequest = {
+                includeZeroPayouts: includeZeroPayouts,
+                limit: limit,
+                latitude: props.location.latitude,
+                longitude: props.location.longitude,
+                proxy: proxy,
+                anemometer: anemometer,
+                ciac: ciac
+            }
+            fetchPayouts(request, props.apiAccessToken).then((data) => {
+                let storms = data.payouts.map((storm,index) => { storm.color = randomColor(index); return storm})
+                setPayouts(storms);
+                if(props.onCalculatePayouts != undefined){
+                  props.onCalculatePayouts(storms);
+                }
+            }, (err) => {
+                console.error(err);
+                throw Error(err);
+            })
+        }
+    }
+
+    function maskDateString(value:string){
+        let date = new Date(Date.parse(value));
+        return date.toLocaleDateString('en-us', { day:"numeric", year:"numeric", month:"short", hour:"numeric", minute:"numeric", timeZone: "UTC"})
+    }
+
+    function maskStormCategory(cat:number): string {
+        switch(cat){
+            case 5:
+            case 4:
+            case 3:
+            case 2:
+            case 1:
+                return `Category ${cat}`
+            case 0:
+                return "Tropical Storm"
+            case -1:
+                return "Tropical Depression"
+            case -2:
+                return "Tropical Expression"
+            case -3:
+                return "Tropical Expression"
+            case -4:
+                return "Tropical Expression"
+            case -5:
+                return "Tropical Expression"
+            case -10:
+                return "N/A"
+            default:
+                return ""
+        }
+    }
+
+    const toggleStormTracks = (view: MapView) => {
+        if(mapInstanceRef && mapInstanceRef.current){
+          const circleSource = (mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_SOURCE)
+          if (circleSource){
+            let features = (((circleSource as GeoJSONSource)._data as unknown) as FeatureCollection).features;
+            let newData = features.map((feature) => {
+              return { 
+                type: feature.type, 
+                geometry: feature.geometry, 
+                properties:{ 
+                  view: view,
+                  muted: feature.properties?.muted,
+                  name : feature.properties?.name, 
+                  year: feature.properties?.year, 
+                  windspeed: feature.properties?.windspeed, 
+                  category: feature.properties?.category,
+                  time: feature.properties?.time,
+                  latitude: feature.properties?.latitude,
+                  longitude: feature.properties?.longitude,
+                  location: feature.properties?.location,
+                  checked: feature.properties?.checked,
+                  color: feature.properties?.color }}
+            }) as Feature<Geometry, GeoJsonProperties>[]
+            (circleSource as GeoJSONSource).setData({type: 'FeatureCollection', features: newData})
+          }
+          const lineSource = (mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_TRACK_SOURCE)
+          if (lineSource){
+            let features = (((lineSource as GeoJSONSource)._data as unknown) as FeatureCollection).features;
+            let newData = features.map((feature) => {
+              return { 
+                type: feature.type, 
+                geometry: feature.geometry, 
+                properties:{ 
+                  view: view,
+                  muted: feature.properties?.muted,
+                  name : feature.properties?.name, 
+                  year: feature.properties?.year, 
+                  category: feature.properties?.category,
+                  checked: feature.properties?.checked,
+                  color: feature.properties?.color }}
+            }) as Feature<Geometry, GeoJsonProperties>[]
+            (lineSource as GeoJSONSource).setData({type: 'FeatureCollection', features: newData})
+          }
+        }
+    }
+
+    function updateStormTracks(storms: StormPayout[], view: MapView){
+        if(mapInstanceRef && mapInstanceRef.current){
+            let index = 0;
+            let tracks = storms.map((cyclone) => {
+                let stormColor = randomColor(index)
+                index = index + 1
+                return cyclone.stormTrack.map((storm) => {
+                    return {
+                        type: 'Feature', 
+                        geometry: storm.LOCATION, 
+                        properties:{ 
+                          view: view,
+                          muted: false,
+                          checked: true,
+                          name : storm.NAME, 
+                          year: storm.SEASON, 
+                          windspeed: storm.USA_WIND, 
+                          category: storm.USA_SSHS,
+                          time: storm.ISO_TIME,
+                          latitude: storm.LOCATION.coordinates.at(1),
+                          longitude: storm.LOCATION.coordinates.at(0),
+                          location: storm.LOCATION,
+                          color: stormColor }
+                    } as Feature
+                })
+              })
+            let lines = tracks.map((track) => {return pointsToLines(track)})
+
+            const circleSource = (mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_SOURCE)
+            if (circleSource){
+                (circleSource as GeoJSONSource).setData({type: 'FeatureCollection', features: tracks.flat()})
+            }
+            const lineSource = (mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_TRACK_SOURCE)
+            if (lineSource){
+                (lineSource as GeoJSONSource).setData({type: 'FeatureCollection', features: lines.flat()})
+            }
+        }
+    }
+
+    function pointsToLines(points:Feature<Geometry, GeoJsonProperties>[]): Feature<LineString, GeoJsonProperties>[]{
+        let retVal : Feature<LineString, GeoJsonProperties>[] = []
+        for(var i = 1; i < points.length; i++){
+          let strength = ((points[i].properties?.category as number) + (points[i-1].properties?.category as number))/2
+          let point1 = (points[i-1].geometry as Point).coordinates;
+          let point2 = (points[i].geometry as Point).coordinates;
+          if(point1[0] < 0 || point2[0] < 0){
+              let one = trueModulo(point1[0],360)
+              let two = trueModulo(point2[0],360)
+              point1[0] = one
+              point2[0] = two
+          }
+          retVal.push({
+            type: 'Feature', 
+            geometry:{type:'LineString',coordinates:[point1,point2]}, 
+            properties:{
+                'name': points[i].properties?.name, 
+                'year': points[i].properties?.year, 
+                'category': strength, 
+                'muted': points[i].properties?.muted,
+                'checked': true, 
+                'view': points[i].properties?.view,
+                'color': points[i].properties?.color}})
+        }
+        return retVal
+    }
+
+    function trueModulo(num: number, divisor: number): number {
+        return ((num % divisor) + divisor) % divisor;
+    }
+
+    useEffect(() => {
+
+          mapboxgl.accessToken = props.mapAccessToken;
+    
+          mapInstanceRef.current = new mapboxgl.Map({
+            container: mapContainerRef.current,
+            style: 'mapbox://styles/adubu001/cm23vizjd00gk01qk59q062mj',
+            pitchWithRotate: false,
+            dragRotate: false,
+            touchZoomRotate: false,      
+            center: props.location ? [props.location.longitude,props.location.latitude] : DEFAULT_MAP_COORDINATE,
+            zoom: DEFAULT_MAP_ZOOM
+          });
+    
+          mapInstanceRef.current.on("load", () => {
+            setMapLoaded(true);
+    
+            mapInstanceRef.current?.addSource( CIAC_SOURCE, {
+              type: 'geojson',
+              data: {
+                type: 'FeatureCollection',
+                features: []
+              }
+            });
+    
+            mapInstanceRef.current?.addSource( TROPICAL_STORM_SOURCE, {
+              type: 'geojson',
+              data: {
+                type: 'FeatureCollection',
+                features: []
+              }
+            });
+    
+            mapInstanceRef.current?.addSource( TROPICAL_STORM_TRACK_SOURCE, {
+              type: 'geojson',
+              data: {
+                type: 'FeatureCollection',
+                features: []
+              }
+            });
+    
+            mapInstanceRef.current?.addLayer({
+              id: CIAC_LAYER,
+              type: 'fill',
+              source: CIAC_SOURCE,
+              paint: {
+                'fill-color': '#105397',
+                'fill-opacity': 0.35,
+              },
+            });
+    
+            mapInstanceRef.current?.addLayer({
+              id: 'outline',
+              type: 'line',
+              source: CIAC_SOURCE,
+              paint: {
+                'line-color': '#105397',
+                'line-width': 2
+              }
+            });
+    
+            mapInstanceRef.current?.addLayer({
+              id: TROPICAL_STORM_TRACK_LAYER,
+              type: 'line',
+              source: TROPICAL_STORM_TRACK_SOURCE,
+              paint: {
+                'line-color': [
+                  'match',
+                  ["concat",
+                    ["get","view"],
+                    ["get", "muted"],
+                  ],
+                  MapView.CAT_INTENSITY + "false",
+                  ['interpolate', 
+                    ['linear'],
+                    ['get', 'category'],
+                    -5,
+                    Constants.COLOR_TROPICAL_EXPRESSION,
+                    -4,
+                    Constants.COLOR_TROPICAL_EXPRESSION,
+                    -3,
+                    Constants.COLOR_TROPICAL_EXPRESSION,
+                    -2,
+                    Constants.COLOR_TROPICAL_EXPRESSION,
+                    -1,
+                    Constants.COLOR_TROPICAL_DEPRESSION,
+                    0,
+                    Constants.COLOR_TROPICAL_STORM,
+                    1,
+                    Constants.COLOR_CAT_1,
+                    2,
+                    Constants.COLOR_CAT_2,
+                    3,
+                    Constants.COLOR_CAT_3,
+                    4,
+                    Constants.COLOR_CAT_4,
+                    5,
+                    Constants.COLOR_CAT_5
+                  ],
+                  MapView.STORMS + "false",
+                  ["get","color"],
+                  "rgba(255,255,255,0.2)"
+                ],
+                'line-width': 4,
+              },
+            });
+    
+            mapInstanceRef.current?.addLayer({
+              id: TROPICAL_STORM_LAYER,
+              type: 'circle',
+              source: TROPICAL_STORM_SOURCE,
+              paint: {
+                'circle-stroke-color': [
+                  'match',
+                  ["concat",
+                    "",
+                    ["get", "muted"],
+                  ],
+                  'false',
+                  '#000',
+                  'rgba(0,0,0,0.2)'
+                ],
+                'circle-stroke-width': 1,
+                'circle-color': [
+                    'match',
+                    ["concat",
+                      ["get", "view"],
+                      ["get", "category"],
+                      ["get", "muted"],
+                    ],
+                    MapView.CAT_INTENSITY + "-5false",Constants.COLOR_TROPICAL_EXPRESSION,
+                    MapView.CAT_INTENSITY + "-4false",Constants.COLOR_TROPICAL_EXPRESSION,
+                    MapView.CAT_INTENSITY + "-3false",Constants.COLOR_TROPICAL_EXPRESSION,
+                    MapView.CAT_INTENSITY + "-2false",Constants.COLOR_TROPICAL_EXPRESSION,
+                    MapView.CAT_INTENSITY + "-1false",Constants.COLOR_TROPICAL_DEPRESSION,
+                    MapView.CAT_INTENSITY + "0false",Constants.COLOR_TROPICAL_STORM,
+                    MapView.CAT_INTENSITY + "1false",Constants.COLOR_CAT_1,
+                    MapView.CAT_INTENSITY + "2false",Constants.COLOR_CAT_2,
+                    MapView.CAT_INTENSITY + "3false",Constants.COLOR_CAT_3,
+                    MapView.CAT_INTENSITY + "4false",Constants.COLOR_CAT_4,
+                    MapView.CAT_INTENSITY + "5false",Constants.COLOR_CAT_5,
+                    MapView.STORMS + "-5false",["get","color"],
+                    MapView.STORMS + "-4false",["get","color"],
+                    MapView.STORMS + "-3false",["get","color"],
+                    MapView.STORMS + "-2false",["get","color"],
+                    MapView.STORMS + "-1false",["get","color"],
+                    MapView.STORMS + "0false",["get","color"],
+                    MapView.STORMS + "1false",["get","color"],
+                    MapView.STORMS + "2false",["get","color"],
+                    MapView.STORMS + "3false",["get","color"],
+                    MapView.STORMS + "4false",["get","color"],
+                    MapView.STORMS + "5false",["get","color"],
+                    Constants.COLOR_MUTED
+                  ],
+                'circle-radius': 5,
+              },
+            });
+    
+            const popup = new mapboxgl.Popup({
+              closeButton: false,
+              closeOnClick: true,
+              closeOnMove:true,
+            });
+    
+            mapInstanceRef.current?.on('mouseenter', TROPICAL_STORM_LAYER, (e: any) => {
+              if(mapInstanceRef.current){
+                mapInstanceRef.current.getCanvas().style.cursor = 'pointer';
+    
+                const coordinates = e.features[0].geometry.coordinates.slice();
+                const properties = e.features[0].properties;
+                let description = '';
+                description = description + `<strong>${properties.name} ${properties.year}</strong>`
+                description = description + `<span style="border-radius:3px;margin-left:5px;padding:3px 10px;color:white;background-color:${generateCATColor(properties.category)}">${maskStormCategory(properties.category)}</span>`
+                description = description + `<div style="width:150px">${maskDateString(properties.time)}</div><p>`
+                description = description + `<div><strong>Windspeed: </strong><span">${properties.windspeed} MPH</span></div>`
+                description = description + `<div><strong>LatLng: </strong><span">(${properties.latitude}°, ${properties.longitude}°)</span></div>`
+                description = description + `</p>`
+    
+                while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+                  coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+                }
+    
+                popup.setLngLat(coordinates).setHTML(description).addTo(mapInstanceRef.current);
+                popup.on('mouseleave', () => {
+                  if(mapInstanceRef.current){
+                    mapInstanceRef.current.getCanvas().style.cursor = '';
+                  }
+                  popup.remove();
+                });
+              }
+            });
+    
+            mapInstanceRef.current?.on('mouseleave', TROPICAL_STORM_LAYER, () => {
+              if(mapInstanceRef.current){
+                mapInstanceRef.current.getCanvas().style.cursor = '';
+              }
+              popup.remove();
+            });
+            
+          });
+          return () => mapInstanceRef.current?.remove();
+        
+      }, []);
+
+        useEffect(() => {
+            if(mapLoaded){
+                if(props.location != undefined && props.location != null){
+                    if(mapInstanceRef?.current){
+                        let latLng : LngLatLike = [props.location.longitude,props.location.latitude];
+                        setLocationMarker(locationMarker.remove().setLngLat(latLng).addTo(mapInstanceRef.current));
+                        mapInstanceRef.current.flyTo({center:latLng,essential:true})
+                    }
+                } else {
+                    setLocationMarker(locationMarker.remove());
+                }
+            }
+        },[props.location, mapInstanceRef, mapLoaded])
+
+        useEffect(() => {
+            if(mapLoaded){
+                if(props.ciacRadius != undefined && props.ciacRadius != null && props.location != undefined && props.location != null){
+                    if(mapInstanceRef?.current){
+                        let latLng : LngLatLike = [props.location.longitude,props.location.latitude];
+                        var circle = turf.circle(latLng as [number,number], props.ciacRadius, { steps:200, units: "miles"});
+                        setCatCircle(catCircle)
+
+                        const source = mapInstanceRef.current.getSource(CIAC_SOURCE)
+                        if (source){
+                            console.log("draw circle");
+                            (source as GeoJSONSource).setData({type: 'FeatureCollection', features: [circle]})
+                        }
+                    }
+                } else {
+                    console.log("skip circle")
+                    if(mapInstanceRef?.current){
+                        setCatCircle(undefined)
+                        const source = mapInstanceRef.current.getSource(CIAC_SOURCE)
+                        if (source){
+                            (source as GeoJSONSource).setData({type: 'FeatureCollection', features: []})
+                        }
+                    }
+                }
+            }
+        },[props.ciacRadius, props.location, mapInstanceRef, mapLoaded])
+
+        useEffect(() => {
+            if(mapLoaded){
+                updateStormTracks(payouts,mapView)
+            }
+        },[mapLoaded,payouts,mapView])
+
+        useEffect(() => {
+            if(mapLoaded){
+                if(props.location && props.limit && props.proxyPayouts && props.anemometerCode && props.anemometerPayouts && props.ciacRadius && props.ciacRadius && mapInstanceRef){
+                    calculatePayouts(props.proxyPayouts, props.anemometerCode, props.anemometerPayouts, props.ciacPayouts, false, false, props.limit)
+                }
+            }
+        },[props.location, props.limit, props.proxyPayouts, props.anemometerCode, props.anemometerPayouts, props.ciacRadius, props.ciacRadius, mapInstanceRef, mapLoaded])
+
+    return(
+        <div className="map__wrapper">
+            {mapView == MapView.CAT_INTENSITY  &&<BackTestingCatLegend className="cat__legend"/>}
+            <ToggleButtonGroup
+                className='map__views'
+                color="primary"
+                value={mapView}
+                exclusive
+                onChange={toggleView}
+                aria-label="Platform"
+                sx={{backgroundColor:'white', zIndex: 10}}
+                >
+                <ToggleButton value={MapView.CAT_INTENSITY}>CAT Strength View</ToggleButton>
+                <ToggleButton value={MapView.STORMS}>Storms View</ToggleButton>
+            </ToggleButtonGroup>
+            {mapView == MapView.STORMS && <BackTestingStormLegend stormTracks={payouts}/>}
+            <div ref={mapContainerRef} className="map__container" />
+        </div>
+    );
+})
+
+export default BackTestingMap

package/src/components/back-testing-map/back-testing-map.types.ts

@@ -0,0 +1,176 @@
+import mapboxgl from 'mapbox-gl';
+import { LngLatLike } from "@mapbox/search-js-core"
+import { StormPayout } from './back-testing-map.service';
+
+export interface Payout {
+    category: number,
+    payout: number
+}
+
+export interface Shape {
+    type: "__circle";
+    latitude: number | undefined;
+    longitude: number | undefined;
+    radius: number | undefined;
+}
+
+export interface ProxyRequest {
+    radius: number;
+    latitude: number | undefined;
+    longitude: number | undefined;
+    payouts: Payout[] | undefined;
+}
+
+export interface AnemometerRequest {
+    code: string
+    latitude: number | undefined;
+    longitude: number | undefined;
+    payouts: Payout[] | undefined;
+}
+
+export interface CIACRequest {
+    includeNotNamedStorms: boolean;
+    shapes: Shape[];
+    payouts: Payout[] | undefined;
+}
+
+export interface PayoutRequest {
+    limit: number;
+    latitude: number | undefined;
+    longitude: number | undefined;
+    includeZeroPayouts: boolean;
+    proxy: ProxyRequest;
+    anemometer: AnemometerRequest;
+    ciac: CIACRequest;
+}
+
+export interface BackTestingMapProps {
+    mapAccessToken: string,
+    apiAccessToken: string,
+    location: {longitude: number, latitude: number } | undefined | null,
+    limit: number | undefined | null,
+    ciacRadius: number | undefined | null,
+    anemometerCode: string,
+    proxyPayouts: Payout[],
+    anemometerPayouts: Payout[],
+    ciacPayouts: Payout[],
+    includeNoNameStorms?: boolean,
+    includeZeroPayouts?: boolean,
+    onViewChange?: (view: MapView) => void
+    onCalculatePayouts?: (payouts: StormPayout[]) => void  
+}
+
+export interface BackTestingActions {
+    calculatePayouts: (proxyPayouts: Payout[], anemometerCode: string, anemometerPayouts: Payout[], ciacPayouts: Payout[], includeNoNameStorms: boolean, includeZeroPayouts: boolean, limit: number) => void,
+}
+
+export enum MapView {
+    CAT_INTENSITY = '__cat_view',
+    STORMS = '__storms_view'
+}
+
+export enum Constants {
+    COLOR_CAT_5 = "rgba(252, 92, 13, 1)", // red-orange
+    COLOR_CAT_5_MUTED = "rgba(255, 255, 255, 0.5)", // red-orange
+
+    COLOR_CAT_4 = "rgba(250, 141, 14, 1)", // orange
+    COLOR_CAT_4_MUTED = "rgba(255, 255, 255, 0.5)", // orange
+
+    COLOR_CAT_3 = "rgba(247, 190, 15, 1)", // orange-yellow
+    COLOR_CAT_3_MUTED = "rgba(255, 255, 255, 0.5)", // orange-yellow
+
+    COLOR_CAT_2 = "rgba(246, 215, 15, 1)", // yellow
+    COLOR_CAT_2_MUTED = "rgba(255, 255, 255, 0.5)", // yellow
+
+    COLOR_CAT_1 = "rgba(192, 232, 38, 1)", // yellow-green
+    COLOR_CAT_1_MUTED = "rgba(255, 255, 255, 0.5)", // yellow-green
+
+    COLOR_TROPICAL_STORM = "rgba(156, 244, 53, 1)", // lime-green
+    COLOR_TROPICAL_STORM_MUTED = "rgba(255, 255, 255, 0.5)", // lime-green
+
+    COLOR_TROPICAL_DEPRESSION = "rgba(120, 255, 68,1)", // bright-green
+    COLOR_TROPICAL_DEPRESSION_MUTED = "rgba(255, 255, 255, 0.5)", // bright-green
+
+    COLOR_TROPICAL_EXPRESSION = "rgba(120, 255, 68,1)", // bright-green
+    COLOR_TROPICAL_EXPRESSION_MUTED = "rgba(255, 255, 255, 0.5)", // bright-green
+
+    COLOR_MUTED = "rgba(255, 255, 255, 0.5)", // bright-green
+}
+
+export const DEFAULT_MAP_COORDINATE : LngLatLike = [-70.9,42.35]
+export const DEFAULT_MAP_ZOOM : number = 8
+
+// map data sources
+export const CIAC_SOURCE = '__ciac_data'
+export const TROPICAL_STORM_SOURCE = '__tropical_storms_data'
+export const TROPICAL_STORM_TRACK_SOURCE = '__tropical_storm_tracks_data'
+
+//map visual layers
+export const CIAC_LAYER = '__ciac_layer'
+export const TROPICAL_STORM_LAYER = '__tropical_storms_layer'
+export const TROPICAL_STORM_TRACK_LAYER = '__tropical_storm_tracks_layer'
+
+export function generateCATColor(cat:number): string {
+    switch(cat){
+        case 5:
+          return Constants.COLOR_CAT_5
+        case 4:
+          return Constants.COLOR_CAT_4
+        case 3:
+          return Constants.COLOR_CAT_3
+        case 2:
+          return Constants.COLOR_CAT_2
+        case 1:
+          return Constants.COLOR_CAT_1
+        case 0:
+          return Constants.COLOR_TROPICAL_STORM
+        case -1:
+          return Constants.COLOR_TROPICAL_DEPRESSION
+        case -2:
+          return Constants.COLOR_TROPICAL_EXPRESSION
+        default:
+          return Constants.COLOR_TROPICAL_EXPRESSION
+    }
+}
+
+export function randomColor(index:number): string {
+    var hue = (Math.floor(index) * 120) + (Math.round((index * 120)/360) * 30);
+    return `hsla(${hue}, 90%, 60%, 1)`;
+}
+
+export function generateProxyRequest(latLng: [number,number], radius: number, payouts: Payout[] | undefined ){
+    let coord = (latLng);
+    let proxy : ProxyRequest = {
+        radius: radius,
+        latitude: coord[1],
+        longitude: coord[0],
+        payouts: payouts
+    }
+    return proxy
+}
+
+export function generateAnemometerRequest(latLng: [number,number], anemometerCode:string, payouts: Payout[] | undefined){
+    let coord = (latLng);
+    let anemometer : AnemometerRequest = {
+        code:anemometerCode,
+        latitude: coord[1],
+        longitude: coord[0],
+        payouts: payouts
+    }
+    return anemometer
+}
+
+export function generateCIACRequest(latLng: [number,number], radius: number | undefined, includeNoNameStorms: boolean, payouts: Payout[] | undefined){
+    let coord = (latLng);
+    let ciac : CIACRequest = {
+        shapes:[{
+            type: "__circle",
+            latitude: coord[1],
+            longitude: coord[0],
+            radius: radius
+        }],
+        includeNotNamedStorms: includeNoNameStorms,
+        payouts: payouts
+    }
+    return ciac
+}

package/src/components/back-testing-map/index.ts

@@ -0,0 +1 @@
+export {default} from './back-testing-map';

package/src/components/back-testing-storm-legend/back-testing-storm-legend.css

@@ -0,0 +1,3 @@
+.storm-legend{
+    top: 80px;
+}