Bugfix: projects unable to save when KewPointLayer is selected

app/javascript/modelling/worker/interpolation.ts

@@ -2,8 +2,10 @@ import { getMedianCellSize } from "../../projects/modelling/components/cell_area
 import { BooleanTileGrid, NumericTileGrid } from "../../projects/modelling/tile_grid"
 import { kdTree } from 'kd-tree-javascript'
 
+export type InterpolationType = "NearestNeighbour" | "Bilinear"
 
-export function interpolateGrid(input : NumericTileGrid, mask : BooleanTileGrid, type: "NearestNeighbour" | "Bilinear", maxDist: number) : NumericTileGrid {
+
+export function interpolateGrid(input : NumericTileGrid, mask : BooleanTileGrid, type: InterpolationType, maxDist: number) : NumericTileGrid {
 
     const result = new NumericTileGrid(input.zoom, input.x, input.y, input.width, input.height)
 

app/javascript/projects/layer_palette.tsx

@@ -114,8 +114,7 @@ export const LayerPalette = ({ addLayer, hide, dbModels, getTeamDatasets, teamNa
                     name: "Wakehurst Soil",
                     identifier: "kew:wakehurst_soil_rp3857",
                     fill: "hsv",
-                    metric: KewPointOptions.find(option => option.value === "ph")!,
-                    metricOpts: KewPointOptions,
+                    metric: KewPointOptions.indexOf(KewPointOptions.find(option => option.value === "ph")!),
                     visible: true,
                     opacity: 1,
                     seasonYear: seasonYearOptions[0]

app/javascript/projects/reify_layer/kew.ts

@@ -179,11 +179,11 @@ const getStyle = (layer: KewLayer, zoom: number | undefined) => (
     }
 )
 
-const getPointStyle = (map: Map, layer: KewPointLayer, min: number | null, max: number | null, colMap: any[]) => (
+const getPointStyle = (map: Map, layer: KewPointLayer, min: number | null, max: number | null, colMap: any[], opt: KewOption) => (
     (feature) => {
 
         const props = feature.getProperties()
-        const metric = props[layer.metric.value] || -99999
+        const metric = props[opt.value] || -99999
         const realWorldSize = 4; 
         const resolution = map.getView().getResolution()! 
         const pixelSize = realWorldSize / resolution;
@@ -232,7 +232,9 @@ export function reifyKewPointLayer(layer: KewPointLayer, existingLayer: BaseLaye
 
     const vectorSource = getSource(layer.identifier)
 
-    const { min, max } = layer.metric.max ? {min: 0, max: layer.metric.max}  : getMinMaxMetric(vectorSource, layer.metric.value)
+    const metric = KewPointOptions[layer.metric]
+
+    const { min, max } = metric.max ? {min: 0, max: metric.max}  : getMinMaxMetric(vectorSource, metric.value)
 
     const colMap = getColorStops(layer.fill, 100).reverse()
 
@@ -241,7 +243,7 @@ export function reifyKewPointLayer(layer: KewPointLayer, existingLayer: BaseLaye
 
     const v = new VectorLayer({
         source: vectorSource,
-        style: getPointStyle(map, layer, min, max, colMap)
+        style: getPointStyle(map, layer, min, max, colMap, metric)
     })
 
     const popupContainer = document.getElementById("popup")

app/javascript/projects/sidebar.tsx

@@ -297,9 +297,9 @@ const KewPointLayerSettings = ({ layer, mutate }: KewPointLayerSettingsProps) =>
     <>
       <div className="d-flex align-items-center mt-3">
         Property
-        <select className="custom-select ml-3" value={layer.metric.value} onChange={e => mutate({ metric: KewPointOptions.filter(f => f.value === e.target.value)[0] })}>
+        <select className="custom-select ml-3" value={KewPointOptions[layer.metric].value} onChange={e => mutate({ metric: KewPointOptions.indexOf(KewPointOptions.filter(f => f.value === e.target.value)[0]) })}>
           {
-            layer.metricOpts.map(opt =>
+            KewPointOptions.map(opt =>
               <option key={opt.value} value={opt.value}>
                 {opt.label}
               </option>

app/javascript/projects/state.ts

@@ -88,8 +88,7 @@ export interface KewLayer extends BaseLayer {
 export interface KewPointLayer extends BaseLayer {
   type: "KewPointLayer"
   identifier: string
-  metric: KewOption
-  metricOpts: KewOption[]
+  metric: number
   min?: number
   max?: number
   fill: fillType