changed the draw controller for drawing lines for grain bags, also fixed the grain bag plotting to be able to plot existing bags

src/maps/MapBase.tsx

@@ -6,7 +6,7 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
+  Grid2 as Grid,
   Icon,
   IconButton,
   LinearProgress,
@@ -355,7 +355,7 @@ export default function MapBase(props: Props) {
             )}
           </Box>
           <Grid container direction={isMobile ? "column" : "row"}>
-            <Grid item>
+            <Grid>
               <IconButton
                 className={classes.iconButtons}
                 style={
@@ -371,7 +371,7 @@ export default function MapBase(props: Props) {
                 <MarkerMove />
               </IconButton>
             </Grid>
-            <Grid item>
+            <Grid>
               <IconButton
                 className={classes.iconButtons}
                 style={msHovered ? { background: "grey" } : {}}
@@ -382,7 +382,7 @@ export default function MapBase(props: Props) {
                 <Layers />
               </IconButton>
             </Grid>
-            <Grid item>
+            <Grid>
               <IconButton
                 className={classes.iconButtons}
                 style={hcHovered ? { background: "grey" } : {}}
@@ -393,7 +393,7 @@ export default function MapBase(props: Props) {
                 <HomeIcon />
               </IconButton>
             </Grid>
-            <Grid item>
+            <Grid>
               <IconButton
                 className={classes.iconButtons}
                 style={
@@ -542,7 +542,7 @@ export default function MapBase(props: Props) {
 
   const onCreate = (event: any, objectToCut?: string, measurement?: boolean) => {
     let feature = event.features[0];
-    console.log(feature)
+    //console.log(feature)
     //if the string exist we are adding a hole to an existing object
     if (objectToCut) {
       if (props.cutHoleInPolygon) {
@@ -554,7 +554,7 @@ export default function MapBase(props: Props) {
       }
     } else {
       if (props.addNewShape) {
-        console.log("add new shape")
+        //console.log("add new shape")
         props.addNewShape(feature.geometry.coordinates, feature.geometry.type);
       }
     }

src/maps/mapControllers/drawController.tsx

@@ -21,7 +21,7 @@ export default function DrawController(props: Props) {
   const cutRef = useRef(); //the object id for what shape to cut a hole
   const mRef = useRef<boolean>();
   const lineLimitRef = useRef<number | undefined>();
-  const pointsRef = useRef<number[][]>([]);
+  //const pointsRef = useRef<number[][]>([]);
   const { current: map } = useMap();
 
   //use effect is just for adding and removing the controller from the map
@@ -71,18 +71,18 @@ export default function DrawController(props: Props) {
           }
         }
       });
-      map.on("click", e => {
-        if (map.hasControl(draw) && draw.getMode() === "draw_line_string") {
-          if (lineLimitRef.current) {
-            pointsRef.current.push([e.lngLat.lng, e.lngLat.lat]);
-            if (pointsRef.current.length === lineLimitRef.current) {
-              draw.changeMode("simple_select"); //changing the mode causes the create event to fire
-              pointsRef.current = [];
-              draw.changeMode("draw_line_string");
-            }
-          }
-        }
-      });
+      // map.on("click", e => {
+      //   if (map.hasControl(draw) && draw.getMode() === "draw_line_string") {
+      //     if (lineLimitRef.current) {
+      //       pointsRef.current.push([e.lngLat.lng, e.lngLat.lat]);
+      //       if (pointsRef.current.length === lineLimitRef.current) {
+      //         draw.changeMode("simple_select"); //changing the mode causes the create event to fire
+      //         pointsRef.current = [];
+      //         draw.changeMode("draw_line_string");
+      //       }
+      //     }
+      //   }
+      // });
     }
   }, [map]); // eslint-disable-line react-hooks/exhaustive-deps
 

src/maps/mapObjectControllers/AgMapController.tsx

@@ -1327,7 +1327,7 @@ import { Result } from "@mapbox/mapbox-gl-geocoder";
               getOptionLabel={(option: BagModel) => option.name()}
               fullWidth
               onChange={(e, val) => {
-                val && setSelectKey(val.key);
+                val && setSelectKey(val.key());
               }}
               renderInput={params => (
                 <TextField {...params} label="Bags (leave blank to create a new one)" />
@@ -1518,9 +1518,6 @@ import { Result } from "@mapbox/mapbox-gl-geocoder";
             }
           }}
           addNewShape={(coords, type) => {
-            console.log("controller add shape")
-            console.log(coords)
-            console.log(type)
             if (type === "Polygon") {
               //if it is a polygon it is a field (for now until we add more objects that use polygons)
               let newShapes: pond.Shape[] = [];