Merge pull request #1749 from FarmBot/staging

v9.2.5 - Jolly Juniper

db/migrate/20200323235926_add_show_weeds_to_web_app_config.rb

@@ -0,0 +1,8 @@
+class AddShowWeedsToWebAppConfig < ActiveRecord::Migration[6.0]
+  def change
+    add_column  :web_app_configs,
+    :show_weeds,
+    :boolean,
+    default: false
+  end
+end

frontend/__test_support__/fake_designer_state.ts

@@ -1,7 +1,8 @@
 import { DesignerState } from "../farm_designer/interfaces";
 
 export const fakeDesignerState = (): DesignerState => ({
-  selectedPlants: undefined,
+  selectedPoints: undefined,
+  selectionPointType: undefined,
   hoveredPlant: {
     plantUUID: undefined,
     icon: ""
@@ -13,7 +14,8 @@ export const fakeDesignerState = (): DesignerState => ({
   cropSearchResults: [],
   cropSearchInProgress: false,
   chosenLocation: { x: undefined, y: undefined, z: undefined },
-  currentPoint: undefined,
+  drawnPoint: undefined,
+  drawnWeed: undefined,
   openedSavedGarden: undefined,
   tryGroupSortType: undefined,
   editGroupAreaInMap: false,

frontend/__test_support__/fake_state/resources.ts

@@ -26,6 +26,7 @@ import {
   TaggedAlert,
   TaggedPointGroup,
   TaggedFolder,
+  TaggedWeedPointer,
 } from "farmbot";
 import { fakeResource } from "../fake_resource";
 import {
@@ -171,6 +172,19 @@ export function fakePoint(): TaggedGenericPointer {
   });
 }
 
+export function fakeWeed(): TaggedWeedPointer {
+  return fakeResource("Point", {
+    id: idCounter++,
+    name: "Weed 1",
+    pointer_type: "Weed",
+    x: 200,
+    y: 400,
+    z: 0,
+    radius: 100,
+    meta: { created_by: "plant-detection", color: "red" }
+  });
+}
+
 export function fakeSavedGarden(): TaggedSavedGarden {
   return fakeResource("SavedGarden", {
     id: idCounter++,
@@ -289,6 +303,7 @@ export function fakeWebAppConfig(): TaggedWebAppConfig {
     show_sensor_readings: false,
     show_plants: true,
     show_points: true,
+    show_weeds: true,
     x_axis_inverted: false,
     y_axis_inverted: false,
     z_axis_inverted: true,

frontend/__test_support__/resource_index_builder.ts

@@ -316,6 +316,27 @@ const tr15: TaggedResource = {
   "uuid": "Tool.15.50"
 };
 
+const tr16: TaggedPoint = {
+  specialStatus: SpecialStatus.SAVED,
+  kind: "Point",
+  body: {
+    id: 1395,
+    created_at: "2017-05-24T20:41:19.889Z",
+    updated_at: "2017-05-24T20:41:19.889Z",
+    meta: {
+      color: "gray",
+      created_by: "plant-detection"
+    },
+    name: "untitled",
+    pointer_type: "Weed",
+    radius: 10,
+    x: 490,
+    y: 421,
+    z: 5
+  },
+  uuid: "Point.1397.11"
+};
+
 const log: TaggedLog = {
   kind: "Log",
   specialStatus: SpecialStatus.SAVED,
@@ -345,6 +366,7 @@ export const FAKE_RESOURCES: TaggedResource[] = [
   tr0,
   tr14,
   tr15,
+  tr16,
   log,
 ];
 const KIND: keyof TaggedResource = "kind"; // Safety first, kids.

frontend/api/crud.ts

@@ -334,6 +334,7 @@ const MUST_CONFIRM_LIST: ResourceName[] = [
   "Regimen",
   "Image",
   "SavedGarden",
+  "PointGroup",
 ];
 
 const confirmationChecker = (resourceName: ResourceName, force = false) =>

frontend/constants.ts

@@ -773,7 +773,7 @@ export namespace Content {
     trim(`Click and drag or use the inputs to draw a weed.`);
 
   export const BOX_SELECT_DESCRIPTION =
-    trim(`Drag a box around the plants you would like to select.
+    trim(`Drag a box around the items you would like to select.
     Press the back arrow to exit.`);
 
   export const SAVED_GARDENS =
@@ -1139,7 +1139,8 @@ export enum Actions {
 
   // Designer
   SEARCH_QUERY_CHANGE = "SEARCH_QUERY_CHANGE",
-  SELECT_PLANT = "SELECT_PLANT",
+  SELECT_POINT = "SELECT_POINT",
+  SET_SELECTION_POINT_TYPE = "SET_SELECTION_POINT_TYPE",
   TOGGLE_HOVERED_PLANT = "TOGGLE_HOVERED_PLANT",
   TOGGLE_HOVERED_POINT = "TOGGLE_HOVERED_POINT",
   HOVER_PLANT_LIST_ITEM = "HOVER_PLANT_LIST_ITEM",
@@ -1148,7 +1149,8 @@ export enum Actions {
   OF_SEARCH_RESULTS_OK = "OF_SEARCH_RESULTS_OK",
   OF_SEARCH_RESULTS_NO = "OF_SEARCH_RESULTS_NO",
   CHOOSE_LOCATION = "CHOOSE_LOCATION",
-  SET_CURRENT_POINT_DATA = "SET_CURRENT_POINT_DATA",
+  SET_DRAWN_POINT_DATA = "SET_DRAWN_POINT_DATA",
+  SET_DRAWN_WEED_DATA = "SET_DRAWN_WEED_DATA",
   CHOOSE_SAVED_GARDEN = "CHOOSE_SAVED_GARDEN",
   TRY_SORT_TYPE = "TRY_SORT_TYPE",
   EDIT_GROUP_AREA_IN_MAP = "EDIT_GROUP_AREA_IN_MAP",

frontend/css/farm_designer/farm_designer.scss

@@ -185,23 +185,33 @@
     }
   }
 
+  %panel-item-base {
+    text-align: right;
+    font-size: 1rem;
+    padding-right: 1rem;
+    line-height: 3rem;
+    float: right;
+  }
   .plant-search-item,
   .group-search-item {
     cursor: pointer;
     padding: 0.5rem 1rem;
     img {
-      margin: 0 1rem 0 0;
+      margin-right: 0.5rem;
-      height: 4rem;
+      height: 3rem;
-      width: 4rem;
+      width: 3rem;
+    }
+    &.quick-del {
+      &:hover {
+        background: lighten($red, 10%) !important;
+        &:after {
+          content: "x";
+          margin-left: 1rem;
+          color: $darkest_red;
+          font-weight: bold;
+        }
+      }
     }
-  }
-
-  %panel-item-base {
-    text-align: right;
-    font-size: 1rem;
-    padding-top: 1.4rem;
-    padding-right: 1rem;
-    float: right;
   }
   .plant-search-item-age {
     @extend %panel-item-base;
@@ -209,6 +219,7 @@
   .group-item-count {
     @extend %panel-item-base;
     padding-top: 0.6rem;
+    line-height: 1rem;
   }
   .plant-search-item-name {
     display: inline-block;
@@ -219,24 +230,27 @@
     text-overflow: ellipsis;
     margin-left: 1rem;
   }
+  .weed-search-item,
   .point-search-item {
     cursor: pointer;
     padding: 0.5rem 1rem;
     .saucer {
       display: inline-block;
-      margin: 0 1rem 0 0;
+      height: 3rem;
-      height: 2rem;
+      width: 3rem;
-      width: 2rem;
       vertical-align: middle;
+      margin-right: 0.25rem;
     }
   }
+  .weed-search-item-info,
   .point-search-item-info {
     text-align: right;
     font-size: 1rem;
-    padding-top: 0.6rem;
     padding-right: 1rem;
+    line-height: 3rem;
     float: right;
   }
+  .weed-search-item-name,
   .point-search-item-name {
     display: inline-block;
     vertical-align: middle;
@@ -244,7 +258,34 @@
     width: 40%;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-left: 1rem;
+    margin-left: 1.25rem;
+  }
+  .tool-search-item,
+  .tool-slot-search-item {
+    line-height: 4rem;
+    cursor: pointer;
+    .row {
+      margin-left: 0;
+      margin-right: 0;
+    }
+    .tool-slot-search-item-name {
+      margin-left: -1rem;
+    }
+    p {
+      font-size: 1rem;
+      line-height: 4rem;
+      &.tool-status,
+      &.tool-slot-position {
+        float: right;
+      }
+    }
+    svg {
+      vertical-align: middle;
+    }
+    .tool-slot-position-info {
+      padding: 0;
+      padding-right: 1.75rem;
+    }
   }
 }
 
@@ -284,11 +325,17 @@
 }
 
 .map-point {
+  cursor: pointer !important;
   stroke-width: 2;
   stroke-opacity: 0.3;
   fill-opacity: 0.1;
 }
 
+.map-weed {
+  cursor: pointer !important;
+}
+
+.weed-image,
 .plant-image {
   transform-origin: bottom;
   transform-box: fill-box;
@@ -337,6 +384,9 @@
       fill: $white;
       stroke: $white;
     }
+    &:hover {
+      opacity: 0.15;
+    }
   }
 }
 

frontend/css/farm_designer/farm_designer_panels.scss

@@ -291,6 +291,7 @@
   .panel-action-buttons {
     position: absolute;
     z-index: 9;
+    height: 19rem;
     width: 100%;
     background: $panel_medium_light_gray;
     padding: 0.5rem;
@@ -307,6 +308,9 @@
       float: left;
       width: 100%;
     }
+    .filter-search {
+      padding-right: 1rem;
+    }
     .plant-status-bulk-update {
       display: inline-flex;
       width: 100%;
@@ -321,15 +325,13 @@
     }
   }
   .panel-content {
-    padding-top: 15rem;
+    padding-top: 19rem;
     padding-right: 0;
     padding-left: 0;
     padding-bottom: 5rem;
     max-height: calc(100vh - 13rem);
     overflow-y: auto;
     overflow-x: hidden;
-    .plant-search-item,
-    .group-search-item { pointer-events: none; }
   }
 }
 
@@ -377,9 +379,13 @@
 
 .weed-info-panel-content,
 .point-info-panel-content {
-  .saucer {
+  .point-color-input {
-    margin: 1rem;
+    div[class*=col-] {
-    margin-left: 2rem;
+      padding-left: 0.5rem;
+    }
+    .saucer {
+      margin-top: 4.5rem;
+    }
   }
   .fb-button & .red {
     display: block;
@@ -557,22 +563,8 @@
     overflow-x: hidden;
     .tool-search-item,
     .tool-slot-search-item {
-      line-height: 4rem;
-      cursor: pointer;
       margin-left: -15px;
       margin-right: -15px;
-      .row {
-        margin-left: 0;
-        margin-right: 0;
-      }
-      p {
-        font-size: 1.2rem;
-        line-height: 4rem;
-        &.tool-status,
-        &.tool-slot-position {
-          float: right;
-        }
-      }
       .filter-search {
         .bp3-button {
           min-height: 2.5rem;
@@ -585,13 +577,6 @@
           line-height: 2rem;
         }
       }
-      svg {
-        vertical-align: middle;
-      }
-      .tool-slot-position-info {
-        padding: 0;
-        padding-right: 1rem;
-      }
     }
     .mounted-tool-header {
       display: flex;
@@ -650,6 +635,7 @@
     margin-top: 1rem;
     &.red {
       float: left;
+      margin-bottom: 1rem;
     }
   }
   svg {
@@ -659,6 +645,19 @@
     height: 10rem;
     margin-top: 2rem;
   }
+  .edit-tool,
+  .add-new-tool {
+    margin-bottom: 3rem;
+    .name-error {
+      margin-top: 1.2rem;
+      margin-right: 1rem;
+      color: $dark_red;
+      float: right;
+    }
+    .save-btn {
+      float: right;
+    }
+  }
   .add-stock-tools {
     .filter-search {
       margin-bottom: 1rem;
@@ -807,6 +806,19 @@
   }
 }
 
+.weed-item-icon,
+.group-item-icon {
+  display: inline-block;
+  position: relative;
+  .weed-icon {
+    position: absolute;
+    top: 13%;
+    left: 12%;
+    width: 70%;
+    height: 70%;
+  }
+}
+
 .weeds-inventory-panel,
 .zones-inventory-panel,
 .groups-panel {

frontend/farm_designer/__tests__/farm_designer_test.tsx

@@ -15,7 +15,6 @@ import * as React from "react";
 import { RawFarmDesigner as FarmDesigner } from "../index";
 import { mount } from "enzyme";
 import { Props } from "../interfaces";
-import { GardenMapLegendProps } from "../map/interfaces";
 import { bot } from "../../__test_support__/fake_state/bot";
 import {
   fakeImage, fakeWebAppConfig,
@@ -28,6 +27,8 @@ import {
 import { fakeState } from "../../__test_support__/fake_state";
 import { edit } from "../../api/crud";
 import { BooleanSetting } from "../../session_keys";
+import { GardenMapLegend } from "../map/legend/garden_map_legend";
+import { GardenMap } from "../map/garden_map";
 
 describe("<FarmDesigner/>", () => {
   const fakeProps = (): Props => ({
@@ -36,6 +37,7 @@ describe("<FarmDesigner/>", () => {
     designer: fakeDesignerState(),
     hoveredPlant: undefined,
     genericPoints: [],
+    weeds: [],
     allPoints: [],
     plants: [],
     toolSlots: [],
@@ -67,8 +69,7 @@ describe("<FarmDesigner/>", () => {
 
   it("loads default map settings", () => {
     const wrapper = mount(<FarmDesigner {...fakeProps()} />);
-    const legendProps =
+    const legendProps = wrapper.find(GardenMapLegend).props();
-      wrapper.find("GardenMapLegend").props() as GardenMapLegendProps;
     expect(legendProps.legendMenuOpen).toBeFalsy();
     expect(legendProps.showPlants).toBeTruthy();
     expect(legendProps.showPoints).toBeTruthy();
@@ -76,8 +77,7 @@ describe("<FarmDesigner/>", () => {
     expect(legendProps.showFarmbot).toBeTruthy();
     expect(legendProps.showImages).toBeFalsy();
     expect(legendProps.imageAgeInfo).toEqual({ newestDate: "", toOldest: 1 });
-    // tslint:disable-next-line:no-any
+    const gardenMapProps = wrapper.find(GardenMap).props();
-    const gardenMapProps = wrapper.find("GardenMap").props() as any;
     expect(gardenMapProps.gridSize.x).toEqual(2900);
     expect(gardenMapProps.gridSize.y).toEqual(1400);
   });
@@ -90,8 +90,7 @@ describe("<FarmDesigner/>", () => {
     image2.body.created_at = "2001-01-01T00:00:00.000Z";
     p.latestImages = [image1, image2];
     const wrapper = mount(<FarmDesigner {...p} />);
-    const legendProps =
+    const legendProps = wrapper.find(GardenMapLegend).props();
-      wrapper.find("GardenMapLegend").props() as GardenMapLegendProps;
     expect(legendProps.imageAgeInfo)
       .toEqual({ newestDate: "2001-01-03T00:00:00.000Z", toOldest: 2 });
   });
@@ -137,4 +136,18 @@ describe("<FarmDesigner/>", () => {
       bot_origin_quadrant: 2
     });
   });
+
+  it("initializes setting", () => {
+    const p = fakeProps();
+    p.getConfigValue = () => false;
+    const i = new FarmDesigner(p);
+    expect(i.initializeSetting(BooleanSetting.show_farmbot, true)).toBeFalsy();
+  });
+
+  it("gets bot origin quadrant", () => {
+    const p = fakeProps();
+    p.getConfigValue = () => 1;
+    const i = new FarmDesigner(p);
+    expect(i.getBotOriginQuadrant()).toEqual(1);
+  });
 });

frontend/farm_designer/__tests__/reducer_test.ts

@@ -2,7 +2,7 @@ import { designer } from "../reducer";
 import { Actions } from "../../constants";
 import { ReduxAction } from "../../redux/interfaces";
 import {
-  HoveredPlantPayl, CurrentPointPayl, CropLiveSearchResult,
+  HoveredPlantPayl, DrawnPointPayl, CropLiveSearchResult, DrawnWeedPayl,
 } from "../interfaces";
 import { BotPosition } from "../../devices/interfaces";
 import {
@@ -10,6 +10,7 @@ import {
 } from "../../__test_support__/fake_crop_search_result";
 import { fakeDesignerState } from "../../__test_support__/fake_designer_state";
 import { PointGroupSortType } from "farmbot/dist/resources/api_resources";
+import { PointType } from "farmbot";
 
 describe("designer reducer", () => {
   const oldState = fakeDesignerState;
@@ -24,13 +25,22 @@ describe("designer reducer", () => {
     expect(newState.cropSearchInProgress).toEqual(true);
   });
 
-  it("selects plants", () => {
+  it("selects points", () => {
     const action: ReduxAction<string[]> = {
-      type: Actions.SELECT_PLANT,
+      type: Actions.SELECT_POINT,
-      payload: ["plantUuid"]
+      payload: ["pointUuid"]
     };
     const newState = designer(oldState(), action);
-    expect(newState.selectedPlants).toEqual(["plantUuid"]);
+    expect(newState.selectedPoints).toEqual(["pointUuid"]);
+  });
+
+  it("sets selection point type", () => {
+    const action: ReduxAction<PointType[] | undefined> = {
+      type: Actions.SET_SELECTION_POINT_TYPE,
+      payload: ["Plant"],
+    };
+    const newState = designer(oldState(), action);
+    expect(newState.selectionPointType).toEqual(["Plant"]);
   });
 
   it("sets hovered plant", () => {
@@ -84,25 +94,49 @@ describe("designer reducer", () => {
   });
 
   it("sets current point data", () => {
-    const action: ReduxAction<CurrentPointPayl> = {
+    const action: ReduxAction<DrawnPointPayl> = {
-      type: Actions.SET_CURRENT_POINT_DATA,
+      type: Actions.SET_DRAWN_POINT_DATA,
       payload: { cx: 10, cy: 20, r: 30, color: "red" }
     };
     const newState = designer(oldState(), action);
-    expect(newState.currentPoint).toEqual({
+    expect(newState.drawnPoint).toEqual({
       cx: 10, cy: 20, r: 30, color: "red"
     });
   });
 
   it("uses current point color", () => {
-    const action: ReduxAction<CurrentPointPayl> = {
+    const action: ReduxAction<DrawnPointPayl> = {
-      type: Actions.SET_CURRENT_POINT_DATA,
+      type: Actions.SET_DRAWN_POINT_DATA,
       payload: { cx: 10, cy: 20, r: 30 }
     };
     const state = oldState();
-    state.currentPoint = { cx: 0, cy: 0, r: 0, color: "red" };
+    state.drawnPoint = { cx: 0, cy: 0, r: 0, color: "red" };
     const newState = designer(state, action);
-    expect(newState.currentPoint).toEqual({
+    expect(newState.drawnPoint).toEqual({
+      cx: 10, cy: 20, r: 30, color: "red"
+    });
+  });
+
+  it("sets current weed data", () => {
+    const action: ReduxAction<DrawnWeedPayl> = {
+      type: Actions.SET_DRAWN_WEED_DATA,
+      payload: { cx: 10, cy: 20, r: 30, color: "red" }
+    };
+    const newState = designer(oldState(), action);
+    expect(newState.drawnWeed).toEqual({
+      cx: 10, cy: 20, r: 30, color: "red"
+    });
+  });
+
+  it("uses current weed color", () => {
+    const action: ReduxAction<DrawnWeedPayl> = {
+      type: Actions.SET_DRAWN_WEED_DATA,
+      payload: { cx: 10, cy: 20, r: 30 }
+    };
+    const state = oldState();
+    state.drawnWeed = { cx: 0, cy: 0, r: 0, color: "red" };
+    const newState = designer(state, action);
+    expect(newState.drawnWeed).toEqual({
       cx: 10, cy: 20, r: 30, color: "red"
     });
   });
@@ -156,4 +190,14 @@ describe("designer reducer", () => {
     const newState = designer(state, action);
     expect(newState.tryGroupSortType).toEqual("random");
   });
+
+  it("enables edit group area in map mode", () => {
+    const state = oldState();
+    state.editGroupAreaInMap = false;
+    const action: ReduxAction<boolean> = {
+      type: Actions.EDIT_GROUP_AREA_IN_MAP, payload: true
+    };
+    const newState = designer(state, action);
+    expect(newState.editGroupAreaInMap).toEqual(true);
+  });
 });

frontend/farm_designer/__tests__/state_to_props_test.tsx

@@ -51,7 +51,7 @@ describe("mapStateToProps()", () => {
     const state = fakeState();
     state.resources = buildResourceIndex([fakePlant(), fakeDevice()]);
     const plantUuid = Object.keys(state.resources.index.byKind["Point"])[0];
-    state.resources.consumers.farm_designer.selectedPlants = [plantUuid];
+    state.resources.consumers.farm_designer.selectedPoints = [plantUuid];
     expect(mapStateToProps(state).selectedPlant).toEqual(
       expect.objectContaining({ uuid: plantUuid }));
   });

frontend/farm_designer/index.tsx

@@ -70,6 +70,7 @@ export class RawFarmDesigner extends React.Component<Props, Partial<State>> {
       legend_menu_open: init(BooleanSetting.legend_menu_open, false),
       show_plants: init(BooleanSetting.show_plants, true),
       show_points: init(BooleanSetting.show_points, true),
+      show_weeds: init(BooleanSetting.show_weeds, true),
       show_spread: init(BooleanSetting.show_spread, false),
       show_farmbot: init(BooleanSetting.show_farmbot, true),
       show_images: init(BooleanSetting.show_images, false),
@@ -116,6 +117,7 @@ export class RawFarmDesigner extends React.Component<Props, Partial<State>> {
       legend_menu_open,
       show_plants,
       show_points,
+      show_weeds,
       show_spread,
       show_farmbot,
       show_images,
@@ -155,6 +157,7 @@ export class RawFarmDesigner extends React.Component<Props, Partial<State>> {
         legendMenuOpen={legend_menu_open}
         showPlants={show_plants}
         showPoints={show_points}
+        showWeeds={show_weeds}
         showSpread={show_spread}
         showFarmbot={show_farmbot}
         showImages={show_images}
@@ -181,6 +184,7 @@ export class RawFarmDesigner extends React.Component<Props, Partial<State>> {
         <GardenMap
           showPoints={show_points}
           showPlants={show_plants}
+          showWeeds={show_weeds}
           showSpread={show_spread}
           showFarmbot={show_farmbot}
           showImages={show_images}
@@ -192,6 +196,7 @@ export class RawFarmDesigner extends React.Component<Props, Partial<State>> {
           designer={this.props.designer}
           plants={this.props.plants}
           genericPoints={this.props.genericPoints}
+          weeds={this.props.weeds}
           allPoints={this.props.allPoints}
           toolSlots={this.props.toolSlots}
           botLocationData={this.props.botLocationData}

frontend/farm_designer/interfaces.ts

@@ -11,8 +11,10 @@ import {
   TaggedSensor,
   TaggedPoint,
   TaggedPointGroup,
+  TaggedWeedPointer,
+  PointType,
 } from "farmbot";
-import { SlotWithTool, ResourceIndex } from "../resources/interfaces";
+import { SlotWithTool, ResourceIndex, UUID } from "../resources/interfaces";
 import {
   BotPosition, StepsPerMmXY, BotLocationData, ShouldDisplay,
 } from "../devices/interfaces";
@@ -48,6 +50,7 @@ export interface State extends TypeCheckerHint {
   legend_menu_open: boolean;
   show_plants: boolean;
   show_points: boolean;
+  show_weeds: boolean;
   show_spread: boolean;
   show_farmbot: boolean;
   show_images: boolean;
@@ -63,6 +66,7 @@ export interface Props {
   designer: DesignerState;
   hoveredPlant: TaggedPlant | undefined;
   genericPoints: TaggedGenericPointer[];
+  weeds: TaggedWeedPointer[];
   allPoints: TaggedPoint[];
   plants: TaggedPlant[];
   toolSlots: SlotWithTool[];
@@ -106,7 +110,8 @@ export interface Crop {
 }
 
 export interface DesignerState {
-  selectedPlants: string[] | undefined;
+  selectedPoints: UUID[] | undefined;
+  selectionPointType: PointType[] | undefined;
   hoveredPlant: HoveredPlantPayl;
   hoveredPoint: string | undefined;
   hoveredPlantListItem: string | undefined;
@@ -115,7 +120,8 @@ export interface DesignerState {
   cropSearchResults: CropLiveSearchResult[];
   cropSearchInProgress: boolean;
   chosenLocation: BotPosition;
-  currentPoint: CurrentPointPayl | undefined;
+  drawnPoint: DrawnPointPayl | undefined;
+  drawnWeed: DrawnWeedPayl | undefined;
   openedSavedGarden: string | undefined;
   tryGroupSortType: PointGroupSortType | "nn" | undefined;
   editGroupAreaInMap: boolean;
@@ -181,6 +187,7 @@ export interface FarmEventState {
 export interface GardenMapProps {
   showPlants: boolean | undefined;
   showPoints: boolean | undefined;
+  showWeeds: boolean | undefined;
   showSpread: boolean | undefined;
   showFarmbot: boolean | undefined;
   showImages: boolean | undefined;
@@ -189,6 +196,7 @@ export interface GardenMapProps {
   dispatch: Function;
   designer: DesignerState;
   genericPoints: TaggedGenericPointer[];
+  weeds: TaggedWeedPointer[];
   allPoints: TaggedPoint[];
   plants: TaggedPlant[];
   toolSlots: SlotWithTool[];
@@ -279,7 +287,15 @@ export interface CameraCalibrationData {
   calibrationZ: string | undefined;
 }
 
-export interface CurrentPointPayl {
+export interface DrawnPointPayl {
+  name?: string;
+  cx: number;
+  cy: number;
+  r: number;
+  color?: string;
+}
+
+export interface DrawnWeedPayl {
   name?: string;
   cx: number;
   cy: number;

frontend/farm_designer/map/__tests__/actions_test.ts

@@ -16,8 +16,9 @@ jest.mock("../../point_groups/group_detail", () => ({
 }));
 
 import {
-  movePlant, closePlantInfo, setDragIcon, clickMapPlant, selectPlant,
+  movePlant, closePlantInfo, setDragIcon, clickMapPlant, selectPoint,
   setHoveredPlant,
+  mapPointClickAction,
 } from "../actions";
 import { MovePlantProps } from "../../interfaces";
 import { fakePlant } from "../../../__test_support__/fake_state/resources";
@@ -74,7 +75,7 @@ describe("closePlantInfo()", () => {
     closePlantInfo(dispatch)();
     expect(history.push).toHaveBeenCalledWith("/app/designer/plants");
     expect(dispatch).toHaveBeenCalledWith({
-      payload: undefined, type: Actions.SELECT_PLANT
+      payload: undefined, type: Actions.SELECT_POINT
     });
   });
 
@@ -84,7 +85,7 @@ describe("closePlantInfo()", () => {
     closePlantInfo(dispatch)();
     expect(history.push).toHaveBeenCalledWith("/app/designer/plants");
     expect(dispatch).toHaveBeenCalledWith({
-      payload: undefined, type: Actions.SELECT_PLANT
+      payload: undefined, type: Actions.SELECT_POINT
     });
   });
 });
@@ -115,7 +116,7 @@ describe("clickMapPlant", () => {
     const dispatch = jest.fn();
     const getState: GetState = jest.fn(() => state);
     clickMapPlant("fakeUuid", "fakeIcon")(dispatch, getState);
-    expect(dispatch).toHaveBeenCalledWith(selectPlant(["fakeUuid"]));
+    expect(dispatch).toHaveBeenCalledWith(selectPoint(["fakeUuid"]));
     expect(dispatch).toHaveBeenCalledWith(setHoveredPlant("fakeUuid", "fakeIcon"));
     expect(dispatch).toHaveBeenCalledTimes(2);
   });
@@ -136,6 +137,18 @@ describe("clickMapPlant", () => {
     expect(dispatch).toHaveBeenCalledTimes(1);
   });
 
+  it("doesn't add a point to current group", () => {
+    mockPath = "/app/designer/groups/1";
+    mockGroup.body.point_ids = [1];
+    const state = fakeState();
+    state.resources = buildResourceIndex([]);
+    const dispatch = jest.fn();
+    const getState: GetState = jest.fn(() => state);
+    clickMapPlant("missing plant uuid", "fakeIcon")(dispatch, getState);
+    expect(overwrite).not.toHaveBeenCalled();
+    expect(dispatch).toHaveBeenCalledTimes(1);
+  });
+
   it("removes a point from the current group if group editor is active", () => {
     mockPath = "/app/designer/groups/1";
     mockGroup.body.point_ids = [1, 2];
@@ -162,7 +175,7 @@ describe("clickMapPlant", () => {
     const getState: GetState = jest.fn(() => state);
     clickMapPlant(plant.uuid, "fakeIcon")(dispatch, getState);
     expect(dispatch).toHaveBeenCalledWith({
-      type: Actions.SELECT_PLANT, payload: [plant.uuid]
+      type: Actions.SELECT_POINT, payload: [plant.uuid]
     });
     expect(dispatch).toHaveBeenCalledTimes(1);
   });
@@ -173,13 +186,39 @@ describe("clickMapPlant", () => {
     const plant = fakePlant();
     plant.uuid = "fakePlantUuid";
     state.resources = buildResourceIndex([plant]);
-    state.resources.consumers.farm_designer.selectedPlants = [plant.uuid];
+    state.resources.consumers.farm_designer.selectedPoints = [plant.uuid];
     const dispatch = jest.fn();
     const getState: GetState = jest.fn(() => state);
     clickMapPlant(plant.uuid, "fakeIcon")(dispatch, getState);
     expect(dispatch).toHaveBeenCalledWith({
-      type: Actions.SELECT_PLANT, payload: []
+      type: Actions.SELECT_POINT, payload: []
     });
     expect(dispatch).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("mapPointClickAction()", () => {
+  it("navigates", () => {
+    mockPath = "/app/designer/plants";
+    const dispatch = jest.fn();
+    mapPointClickAction(dispatch, "uuid", "fake path")();
+    expect(history.push).toHaveBeenCalledWith("fake path");
+    expect(dispatch).not.toHaveBeenCalled();
+  });
+
+  it("doesn't navigate: box select", () => {
+    mockPath = "/app/designer/plants/select";
+    const dispatch = jest.fn();
+    mapPointClickAction(dispatch, "uuid", "fake path")();
+    expect(history.push).not.toHaveBeenCalled();
+    expect(dispatch).toHaveBeenCalled();
+  });
+
+  it("doesn't navigate: group edit", () => {
+    mockPath = "/app/designer/groups/edit/1";
+    const dispatch = jest.fn();
+    mapPointClickAction(dispatch, "uuid", "fake path")();
+    expect(history.push).not.toHaveBeenCalled();
+    expect(dispatch).toHaveBeenCalled();
+  });
+});

frontend/farm_designer/map/__tests__/garden_map_test.tsx

@@ -6,15 +6,17 @@ jest.mock("../actions", () => ({
 import { Mode } from "../interfaces";
 let mockMode = Mode.none;
 let mockAtPlant = true;
+let mockInteractionAllow = true;
 jest.mock("../util", () => ({
   getMode: () => mockMode,
   getMapSize: () => ({ h: 100, w: 100 }),
   getGardenCoordinates: jest.fn(),
   transformXY: jest.fn(() => ({ qx: 0, qy: 0 })),
   transformForQuadrant: jest.fn(),
-  maybeNoPointer: jest.fn(),
   round: jest.fn(),
   cursorAtPlant: () => mockAtPlant,
+  allowInteraction: () => mockInteractionAllow,
+  allowGroupAreaInteraction: jest.fn(),
 }));
 
 jest.mock("../layers/plants/plant_actions", () => ({
@@ -81,6 +83,7 @@ const DEFAULT_EVENT = { preventDefault: jest.fn(), pageX: NaN, pageY: NaN };
 const fakeProps = (): GardenMapProps => ({
   showPoints: true,
   showPlants: true,
+  showWeeds: true,
   showSpread: false,
   showFarmbot: false,
   showImages: false,
@@ -92,6 +95,7 @@ const fakeProps = (): GardenMapProps => ({
   designer: fakeDesignerState(),
   plants: [],
   genericPoints: [],
+  weeds: [],
   allPoints: [],
   toolSlots: [],
   botLocationData: {
@@ -286,7 +290,22 @@ describe("<GardenMap/>", () => {
     wrapper.find(".drop-area-svg").simulate("mouseDown", {
       pageX: 1, pageY: 2
     });
-    expect(startNewPoint).toHaveBeenCalled();
+    expect(startNewPoint).toHaveBeenCalledWith(expect.objectContaining({
+      type: "point"
+    }));
+    expect(getGardenCoordinates).toHaveBeenCalledWith(
+      expect.objectContaining({ pageX: 1, pageY: 2 }));
+  });
+
+  it("starts drawing weed", () => {
+    const wrapper = shallow(<GardenMap {...fakeProps()} />);
+    mockMode = Mode.createWeed;
+    wrapper.find(".drop-area-svg").simulate("mouseDown", {
+      pageX: 1, pageY: 2
+    });
+    expect(startNewPoint).toHaveBeenCalledWith(expect.objectContaining({
+      type: "weed"
+    }));
     expect(getGardenCoordinates).toHaveBeenCalledWith(
       expect.objectContaining({ pageX: 1, pageY: 2 }));
   });
@@ -297,7 +316,20 @@ describe("<GardenMap/>", () => {
     wrapper.find(".drop-area-svg").simulate("mouseMove", {
       pageX: 10, pageY: 20
     });
-    expect(resizePoint).toHaveBeenCalled();
+    expect(resizePoint).toHaveBeenCalledWith(expect.objectContaining({
+      type: "point"
+    }));
+  });
+
+  it("sets drawn weed radius", () => {
+    const wrapper = shallow(<GardenMap {...fakeProps()} />);
+    mockMode = Mode.createWeed;
+    wrapper.find(".drop-area-svg").simulate("mouseMove", {
+      pageX: 10, pageY: 20
+    });
+    expect(resizePoint).toHaveBeenCalledWith(expect.objectContaining({
+      type: "weed"
+    }));
   });
 
   it("lays eggs", () => {
@@ -350,7 +382,7 @@ describe("<GardenMap/>", () => {
   it("closes panel", () => {
     mockMode = Mode.boxSelect;
     const p = fakeProps();
-    p.designer.selectedPlants = undefined;
+    p.designer.selectedPoints = undefined;
     const wrapper = mount<GardenMap>(<GardenMap {...p} />);
     wrapper.instance().closePanel()();
     expect(closePlantInfo).toHaveBeenCalled();
@@ -366,7 +398,7 @@ describe("<GardenMap/>", () => {
   it("doesn't close panel: box select", () => {
     mockMode = Mode.boxSelect;
     const p = fakeProps();
-    p.designer.selectedPlants = [fakePlant().uuid];
+    p.designer.selectedPoints = [fakePlant().uuid];
     const wrapper = mount<GardenMap>(<GardenMap {...p} />);
     wrapper.instance().closePanel()();
     expect(closePlantInfo).not.toHaveBeenCalled();
@@ -375,7 +407,7 @@ describe("<GardenMap/>", () => {
   it("doesn't close panel: move mode", () => {
     mockMode = Mode.moveTo;
     const p = fakeProps();
-    p.designer.selectedPlants = [fakePlant().uuid];
+    p.designer.selectedPoints = [fakePlant().uuid];
     const wrapper = mount<GardenMap>(<GardenMap {...p} />);
     wrapper.instance().closePanel()();
     expect(closePlantInfo).not.toHaveBeenCalled();
@@ -404,6 +436,46 @@ describe("<GardenMap/>", () => {
     expect(wrapper.instance().state.isDragging).toBe(true);
   });
 
+  it("allows interactions: default", () => {
+    mockMode = Mode.none;
+    mockInteractionAllow = true;
+    const p = fakeProps();
+    p.designer.selectionPointType = undefined;
+    const wrapper = mount<GardenMap>(<GardenMap {...p} />);
+    const allowed = wrapper.instance().interactions("Plant");
+    expect(allowed).toBeTruthy();
+  });
+
+  it("allows interactions: box select", () => {
+    mockMode = Mode.boxSelect;
+    mockInteractionAllow = true;
+    const p = fakeProps();
+    p.designer.selectionPointType = undefined;
+    const wrapper = mount<GardenMap>(<GardenMap {...p} />);
+    const allowed = wrapper.instance().interactions("Plant");
+    expect(allowed).toBeTruthy();
+  });
+
+  it("disallows interactions: default", () => {
+    mockMode = Mode.none;
+    mockInteractionAllow = false;
+    const p = fakeProps();
+    p.designer.selectionPointType = undefined;
+    const wrapper = mount<GardenMap>(<GardenMap {...p} />);
+    const allowed = wrapper.instance().interactions("Plant");
+    expect(allowed).toBeFalsy();
+  });
+
+  it("disallows interactions: box select", () => {
+    mockMode = Mode.boxSelect;
+    mockInteractionAllow = true;
+    const p = fakeProps();
+    p.designer.selectionPointType = ["Plant"];
+    const wrapper = mount<GardenMap>(<GardenMap {...p} />);
+    const allowed = wrapper.instance().interactions("Weed");
+    expect(allowed).toBeFalsy();
+  });
+
   it("unswapped height and width", () => {
     const p = fakeProps();
     p.getConfigValue = () => false;

frontend/farm_designer/map/__tests__/util_test.ts

@@ -21,6 +21,8 @@ import {
   mapPanelClassName,
   getMode,
   cursorAtPlant,
+  allowInteraction,
+  allowGroupAreaInteraction,
 } from "../util";
 import { McuParams } from "farmbot";
 import {
@@ -32,13 +34,37 @@ import {
 } from "../../../__test_support__/map_transform_props";
 import { fakePlant } from "../../../__test_support__/fake_state/resources";
 
-describe("Utils", () => {
+describe("round()", () => {
   it("rounds a number", () => {
     expect(round(44)).toEqual(40);
     expect(round(98)).toEqual(100);
   });
 });
 
+describe("mapPanelClassName()", () => {
+  it("returns correct panel status: short panel", () => {
+    Object.defineProperty(window, "innerWidth", {
+      value: 400,
+      configurable: true
+    });
+    mockPath = "/app/designer/move_to";
+    expect(mapPanelClassName()).toEqual("short-panel");
+    mockPath = "/app/designer/plants/crop_search/mint/add";
+    expect(mapPanelClassName()).toEqual("short-panel");
+  });
+
+  it("returns correct panel status: panel open", () => {
+    Object.defineProperty(window, "innerWidth", {
+      value: 500,
+      configurable: true
+    });
+    mockPath = "/app/designer/move_to";
+    expect(mapPanelClassName()).toEqual("panel-open");
+    mockPath = "/app/designer/plants/crop_search/mint/add";
+    expect(mapPanelClassName()).toEqual("panel-open");
+  });
+});
+
 describe("translateScreenToGarden()", () => {
   it("translates screen coords to garden coords: zoomLvl = 1", () => {
     const result = translateScreenToGarden({
@@ -344,6 +370,10 @@ describe("getMode()", () => {
     expect(getMode()).toEqual(Mode.points);
     mockPath = "/app/designer/points/add";
     expect(getMode()).toEqual(Mode.createPoint);
+    mockPath = "/app/designer/weeds";
+    expect(getMode()).toEqual(Mode.weeds);
+    mockPath = "/app/designer/weeds/add";
+    expect(getMode()).toEqual(Mode.createWeed);
     mockPath = "/app/designer/gardens";
     mockGardenOpen = true;
     expect(getMode()).toEqual(Mode.templateView);
@@ -396,27 +426,37 @@ describe("getGardenCoordinates()", () => {
   });
 });
 
-describe("mapPanelClassName()", () => {
+describe("allowInteraction()", () => {
-  it("returns correct panel status: short panel", () => {
+  it("allows interaction", () => {
-    Object.defineProperty(window, "innerWidth", {
+    mockPath = "/app/designer/plants";
-      value: 400,
+    expect(allowInteraction()).toBeTruthy();
-      configurable: true
-    });
-    mockPath = "/app/designer/move_to";
-    expect(mapPanelClassName()).toEqual("short-panel");
-    mockPath = "/app/designer/plants/crop_search/mint/add";
-    expect(mapPanelClassName()).toEqual("short-panel");
   });
 
-  it("returns correct panel status: panel open", () => {
+  it("disallows interaction", () => {
-    Object.defineProperty(window, "innerWidth", {
-      value: 500,
-      configurable: true
-    });
-    mockPath = "/app/designer/move_to";
-    expect(mapPanelClassName()).toEqual("panel-open");
     mockPath = "/app/designer/plants/crop_search/mint/add";
-    expect(mapPanelClassName()).toEqual("panel-open");
+    expect(allowInteraction()).toBeFalsy();
+    mockPath = "/app/designer/move_to";
+    expect(allowInteraction()).toBeFalsy();
+    mockPath = "/app/designer/points/add";
+    expect(allowInteraction()).toBeFalsy();
+    mockPath = "/app/designer/weeds/add";
+    expect(allowInteraction()).toBeFalsy();
+  });
+});
+
+describe("allowGroupAreaInteraction()", () => {
+  it("allows interaction", () => {
+    mockPath = "/app/designer/plants";
+    expect(allowGroupAreaInteraction()).toBeTruthy();
+  });
+
+  it("disallows interaction", () => {
+    mockPath = "/app/designer/plants/select";
+    expect(allowGroupAreaInteraction()).toBeFalsy();
+    mockPath = "/app/designer/move_to";
+    expect(allowGroupAreaInteraction()).toBeFalsy();
+    mockPath = "/app/designer/groups/1";
+    expect(allowGroupAreaInteraction()).toBeFalsy();
   });
 });
 

frontend/farm_designer/map/actions.ts

@@ -23,8 +23,8 @@ export function movePlant(payload: MovePlantProps) {
   return edit(tr, update);
 }
 
-export const selectPlant = (payload: string[] | undefined) => {
+export const selectPoint = (payload: string[] | undefined) => {
-  return { type: Actions.SELECT_PLANT, payload };
+  return { type: Actions.SELECT_POINT, payload };
 };
 
 export const setHoveredPlant = (plantUUID: string | undefined, icon = "") => ({
@@ -52,16 +52,16 @@ const addOrRemoveFromGroup =
   };
 
 const addOrRemoveFromSelection =
-  (clickedPlantUuid: UUID, selectedPlants: UUID[] | undefined) => {
+  (clickedPointUuid: UUID, selectedPoints: UUID[] | undefined) => {
     const nextSelected =
-      (selectedPlants || []).filter(uuid => uuid !== clickedPlantUuid);
+      (selectedPoints || []).filter(uuid => uuid !== clickedPointUuid);
-    if (!(selectedPlants?.includes(clickedPlantUuid))) {
+    if (!(selectedPoints?.includes(clickedPointUuid))) {
-      nextSelected.push(clickedPlantUuid);
+      nextSelected.push(clickedPointUuid);
     }
-    return selectPlant(nextSelected);
+    return selectPoint(nextSelected);
   };
 
-export const clickMapPlant = (clickedPlantUuid: string, icon: string) => {
+export const clickMapPlant = (clickedPlantUuid: UUID, icon: string) => {
   return (dispatch: Function, getState: GetState) => {
     switch (getMode()) {
       case Mode.editGroup:
@@ -69,11 +69,11 @@ export const clickMapPlant = (clickedPlantUuid: string, icon: string) => {
         dispatch(addOrRemoveFromGroup(clickedPlantUuid, resources.index));
         break;
       case Mode.boxSelect:
-        const { selectedPlants } = getState().resources.consumers.farm_designer;
+        const { selectedPoints } = getState().resources.consumers.farm_designer;
-        dispatch(addOrRemoveFromSelection(clickedPlantUuid, selectedPlants));
+        dispatch(addOrRemoveFromSelection(clickedPlantUuid, selectedPoints));
         break;
       default:
-        dispatch(selectPlant([clickedPlantUuid]));
+        dispatch(selectPoint([clickedPlantUuid]));
         dispatch(setHoveredPlant(clickedPlantUuid, icon));
         break;
     }
@@ -81,7 +81,7 @@ export const clickMapPlant = (clickedPlantUuid: string, icon: string) => {
 };
 
 export const unselectPlant = (dispatch: Function) => () => {
-  dispatch(selectPlant(undefined));
+  dispatch(selectPoint(undefined));
   dispatch(setHoveredPlant(undefined));
   dispatch({ type: Actions.HOVER_PLANT_LIST_ITEM, payload: undefined });
 };
@@ -104,3 +104,14 @@ export const setDragIcon =
     e.dataTransfer.setDragImage
       && e.dataTransfer.setDragImage(dragImg, width / 2, height / 2);
   };
+
+export const mapPointClickAction =
+  (dispatch: Function, uuid: UUID, path?: string) => () => {
+    switch (getMode()) {
+      case Mode.editGroup:
+      case Mode.boxSelect:
+        return dispatch(clickMapPlant(uuid, ""));
+      default:
+        return path && history.push(path);
+    }
+  };

frontend/farm_designer/map/background/__tests__/selection_box_actions_test.tsx

@@ -55,6 +55,9 @@ describe("resizeBox", () => {
   const fakeProps = (): ResizeSelectionBoxProps => ({
     selectionBox: { x0: 0, y0: 0, x1: undefined, y1: undefined },
     plants: [],
+    allPoints: [],
+    selectionPointType: undefined,
+    getConfigValue: () => true,
     gardenCoords: { x: 100, y: 200 },
     setMapState: jest.fn(),
     dispatch: jest.fn(),
@@ -68,7 +71,7 @@ describe("resizeBox", () => {
       selectionBox: { x0: 0, y0: 0, x1: 100, y1: 200 }
     });
     expect(p.dispatch).toHaveBeenCalledWith({
-      type: Actions.SELECT_PLANT,
+      type: Actions.SELECT_POINT,
       payload: undefined
     });
   });
@@ -113,7 +116,7 @@ describe("resizeBox", () => {
       selectionBox: { x0: 0, y0: 0, x1: 100, y1: 200 }
     });
     expect(p.dispatch).toHaveBeenCalledWith({
-      type: Actions.SELECT_PLANT,
+      type: Actions.SELECT_POINT,
       payload: [plant.uuid]
     });
     expect(history.push).toHaveBeenCalledWith("/app/designer/plants/select");
@@ -135,7 +138,7 @@ describe("startNewSelectionBox", () => {
       selectionBox: { x0: 100, y0: 200, x1: undefined, y1: undefined }
     });
     expect(p.dispatch).toHaveBeenCalledWith({
-      type: Actions.SELECT_PLANT,
+      type: Actions.SELECT_POINT,
       payload: undefined
     });
   });
@@ -157,7 +160,7 @@ describe("startNewSelectionBox", () => {
     startNewSelectionBox(p);
     expect(p.setMapState).not.toHaveBeenCalled();
     expect(p.dispatch).toHaveBeenCalledWith({
-      type: Actions.SELECT_PLANT,
+      type: Actions.SELECT_POINT,
       payload: undefined
     });
   });

frontend/farm_designer/map/background/selection_box_actions.tsx

@@ -3,18 +3,20 @@ import { TaggedPlant, AxisNumberProperty, Mode } from "../interfaces";
 import { SelectionBoxData } from "./selection_box";
 import { GardenMapState } from "../../interfaces";
 import { history } from "../../../history";
-import { selectPlant } from "../actions";
+import { selectPoint } from "../actions";
 import { getMode } from "../util";
 import { editGtLtCriteria } from "../../point_groups/criteria";
-import { TaggedPointGroup } from "farmbot";
+import { TaggedPointGroup, TaggedPoint, PointType } from "farmbot";
 import { ShouldDisplay, Feature } from "../../../devices/interfaces";
 import { overwrite } from "../../../api/crud";
 import { unpackUUID } from "../../../util";
 import { UUID } from "../../../resources/interfaces";
+import { getFilteredPoints } from "../../plants/select_plants";
+import { GetWebAppConfigValue } from "../../../config_storage/actions";
 
 /** Return all plants within the selection box. */
 export const getSelected = (
-  plants: TaggedPlant[],
+  plants: (TaggedPlant | TaggedPoint)[],
   box: SelectionBoxData | undefined,
 ): string[] | undefined => {
   const arraySelected = plants.filter(p => {
@@ -35,6 +37,9 @@ export const getSelected = (
 export interface ResizeSelectionBoxProps {
   selectionBox: SelectionBoxData | undefined;
   plants: TaggedPlant[];
+  allPoints: TaggedPoint[];
+  selectionPointType: PointType[] | undefined;
+  getConfigValue: GetWebAppConfigValue;
   gardenCoords: AxisNumberProperty | undefined;
   setMapState: (x: Partial<GardenMapState>) => void;
   dispatch: Function;
@@ -54,11 +59,16 @@ export const resizeBox = (props: ResizeSelectionBoxProps) => {
       props.setMapState({ selectionBox: newSelectionBox });
       if (props.plantActions) {
         // Select all plants within the updated selection box
-        const payload = getSelected(props.plants, newSelectionBox);
+        const { plants, allPoints, selectionPointType, getConfigValue } = props;
+        const points =
+          getFilteredPoints({
+            plants, allPoints, selectionPointType, getConfigValue
+          });
+        const payload = getSelected(points, newSelectionBox);
         if (payload && getMode() === Mode.none) {
           history.push("/app/designer/plants/select");
         }
-        props.dispatch(selectPlant(payload));
+        props.dispatch(selectPoint(payload));
       }
     }
   }
@@ -84,7 +94,7 @@ export const startNewSelectionBox = (props: StartNewSelectionBoxProps) => {
   }
   if (props.plantActions) {
     // Clear the previous plant selection when starting a new selection box
-    props.dispatch(selectPlant(undefined));
+    props.dispatch(selectPoint(undefined));
   }
 };
 
@@ -112,7 +122,7 @@ export const maybeUpdateGroup =
         nextGroupBody.point_ids = uniq(nextGroupBody.point_ids);
         if (!isEqual(props.group.body.point_ids, nextGroupBody.point_ids)) {
           props.dispatch(overwrite(props.group, nextGroupBody));
-          props.dispatch(selectPlant(undefined));
+          props.dispatch(selectPoint(undefined));
         }
       }
     }

frontend/farm_designer/map/drawn_point/__tests__/drawn_point_actions_test.tsx

@@ -1,11 +1,14 @@
-import { startNewPoint, resizePoint } from "../drawn_point_actions";
+import {
+  startNewPoint, resizePoint, StartNewPointProps, ResizePointProps,
+} from "../drawn_point_actions";
 import { Actions } from "../../../../constants";
 
 describe("startNewPoint", () => {
-  const fakeProps = () => ({
+  const fakeProps = (): StartNewPointProps => ({
     gardenCoords: { x: 100, y: 200 },
     dispatch: jest.fn(),
     setMapState: jest.fn(),
+    type: "point",
   });
 
   it("starts point", () => {
@@ -13,15 +16,25 @@ describe("startNewPoint", () => {
     startNewPoint(p);
     expect(p.setMapState).toHaveBeenCalledWith({ isDragging: true });
     expect(p.dispatch).toHaveBeenCalledWith({
-      type: Actions.SET_CURRENT_POINT_DATA,
+      type: Actions.SET_DRAWN_POINT_DATA,
+      payload: { cx: 100, cy: 200, r: 0 }
+    });
+  });
+
+  it("starts weed", () => {
+    const p = fakeProps();
+    p.type = "weed";
+    startNewPoint(p);
+    expect(p.setMapState).toHaveBeenCalledWith({ isDragging: true });
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_DRAWN_WEED_DATA,
       payload: { cx: 100, cy: 200, r: 0 }
     });
   });
 
   it("doesn't start point", () => {
     const p = fakeProps();
-    // tslint:disable-next-line:no-any
+    p.gardenCoords = undefined;
-    p.gardenCoords = undefined as any;
     startNewPoint(p);
     expect(p.setMapState).toHaveBeenCalledWith({ isDragging: true });
     expect(p.dispatch).not.toHaveBeenCalled();
@@ -29,18 +42,29 @@ describe("startNewPoint", () => {
 });
 
 describe("resizePoint", () => {
-  const fakeProps = () => ({
+  const fakeProps = (): ResizePointProps => ({
     gardenCoords: { x: 100, y: 200 },
-    currentPoint: { cx: 100, cy: 200, r: 0 },
+    drawnPoint: { cx: 100, cy: 200, r: 0 },
     dispatch: jest.fn(),
     isDragging: true,
+    type: "point",
   });
 
   it("resizes point", () => {
     const p = fakeProps();
     resizePoint(p);
     expect(p.dispatch).toHaveBeenCalledWith({
-      type: Actions.SET_CURRENT_POINT_DATA,
+      type: Actions.SET_DRAWN_POINT_DATA,
+      payload: { cx: 100, cy: 200, r: 0 }
+    });
+  });
+
+  it("resizes weed", () => {
+    const p = fakeProps();
+    p.type = "weed";
+    resizePoint(p);
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_DRAWN_WEED_DATA,
       payload: { cx: 100, cy: 200, r: 0 }
     });
   });

frontend/farm_designer/map/drawn_point/__tests__/drawn_point_test.tsx

@@ -12,13 +12,12 @@ describe("<DrawnPoint/>", () => {
       cx: 10,
       cy: 20,
       r: 30,
-      color: "red"
     }
   });
 
   it("renders point", () => {
     const wrapper = svgMount(<DrawnPoint {...fakeProps()} />);
-    expect(wrapper.find("g").props().stroke).toEqual("red");
+    expect(wrapper.find("g").props().stroke).toEqual("green");
     expect(wrapper.find("circle").first().props()).toEqual({
       id: "point-radius", strokeDasharray: "4 5",
       cx: 10, cy: 20, r: 30,
@@ -28,4 +27,11 @@ describe("<DrawnPoint/>", () => {
       cx: 10, cy: 20, r: 2,
     });
   });
+
+  it("renders point with chosen color", () => {
+    const p = fakeProps();
+    p.data = { cx: 0, cy: 0, r: 1, color: "red" };
+    const wrapper = svgMount(<DrawnPoint {...p} />);
+    expect(wrapper.find("g").props().stroke).toEqual("red");
+  });
 });

frontend/farm_designer/map/drawn_point/__tests__/drawn_weed_test.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { DrawnWeed, DrawnWeedProps } from "../drawn_weed";
+import {
+  fakeMapTransformProps,
+} from "../../../../__test_support__/map_transform_props";
+import { svgMount } from "../../../../__test_support__/svg_mount";
+
+describe("<DrawnWeed />", () => {
+  const fakeProps = (): DrawnWeedProps => ({
+    mapTransformProps: fakeMapTransformProps(),
+    data: {
+      cx: 10,
+      cy: 20,
+      r: 30,
+    }
+  });
+
+  it("renders weed", () => {
+    const wrapper = svgMount(<DrawnWeed {...fakeProps()} />);
+    const stop = wrapper.find("stop").first().props();
+    expect(stop.stopColor).toEqual("red");
+    expect(stop.stopOpacity).toEqual(0.25);
+    expect(wrapper.find("circle").first().props()).toEqual({
+      id: "weed-radius", cx: 10, cy: 20, r: 30, fill: "url(#DrawnWeedGradient)",
+    });
+  });
+
+  it("renders point with chosen color", () => {
+    const p = fakeProps();
+    p.data = { cx: 0, cy: 0, r: 1, color: "orange" };
+    const wrapper = svgMount(<DrawnWeed {...p} />);
+    const stop = wrapper.find("stop").first().props();
+    expect(stop.stopColor).toEqual("orange");
+    expect(stop.stopOpacity).toEqual(0.5);
+  });
+});

frontend/farm_designer/map/drawn_point/drawn_point.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { MapTransformProps } from "../interfaces";
 import { transformXY } from "../util";
-import { CurrentPointPayl } from "../../interfaces";
+import { DrawnPointPayl } from "../../interfaces";
 
 export interface DrawnPointProps {
   mapTransformProps: MapTransformProps;
-  data: CurrentPointPayl | undefined;
+  data: DrawnPointPayl | undefined;
 }
 
 export function DrawnPoint(props: DrawnPointProps) {

frontend/farm_designer/map/drawn_point/drawn_point_actions.tsx

@@ -1,37 +1,47 @@
 import { Actions } from "../../../constants";
 import { AxisNumberProperty } from "../interfaces";
-import { CurrentPointPayl } from "../../interfaces";
+import { DrawnPointPayl } from "../../interfaces";
+
+export interface StartNewPointProps {
+  gardenCoords: AxisNumberProperty | undefined;
+  dispatch: Function;
+  setMapState: Function;
+  type: "point" | "weed";
+}
 
 /** Create a new point. */
-export const startNewPoint = (props: {
+export const startNewPoint = (props: StartNewPointProps) => {
-  gardenCoords: AxisNumberProperty | undefined,
-  dispatch: Function,
-  setMapState: Function,
-}) => {
   props.setMapState({ isDragging: true });
   const center = props.gardenCoords;
   if (center) {
     // Set the center of a new point
     props.dispatch({
-      type: Actions.SET_CURRENT_POINT_DATA,
+      type: props.type == "weed"
+        ? Actions.SET_DRAWN_WEED_DATA
+        : Actions.SET_DRAWN_POINT_DATA,
       payload: { cx: center.x, cy: center.y, r: 0 }
     });
   }
 };
 
+export interface ResizePointProps {
+  gardenCoords: AxisNumberProperty | undefined;
+  drawnPoint: DrawnPointPayl | undefined;
+  dispatch: Function;
+  isDragging: boolean | undefined;
+  type: "point" | "weed";
+}
+
 /** Resize a point. */
-export const resizePoint = (props: {
+export const resizePoint = (props: ResizePointProps) => {
-  gardenCoords: AxisNumberProperty | undefined,
-  currentPoint: CurrentPointPayl | undefined,
-  dispatch: Function,
-  isDragging: boolean | undefined,
-}) => {
   const edge = props.gardenCoords;
-  if (edge && props.currentPoint && !!props.isDragging) {
+  if (edge && props.drawnPoint && !!props.isDragging) {
-    const { cx, cy } = props.currentPoint;
+    const { cx, cy } = props.drawnPoint;
     // Adjust the radius of the point being created
     props.dispatch({
-      type: Actions.SET_CURRENT_POINT_DATA,
+      type: props.type == "weed"
+        ? Actions.SET_DRAWN_WEED_DATA
+        : Actions.SET_DRAWN_POINT_DATA,
       payload: {
         cx, cy, // Center was set by click, radius is adjusted by drag
         r: Math.round(Math.sqrt(

frontend/farm_designer/map/drawn_point/drawn_weed.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { MapTransformProps } from "../interfaces";
+import { transformXY } from "../util";
+import { DrawnWeedPayl } from "../../interfaces";
+
+export interface DrawnWeedProps {
+  mapTransformProps: MapTransformProps;
+  data: DrawnWeedPayl | undefined;
+}
+
+export function DrawnWeed(props: DrawnWeedProps) {
+  const ID = "current-weed";
+  const { data, mapTransformProps } = props;
+  if (!data) { return <g id={ID} />; }
+  const { cx, cy, r } = data;
+  const color = data.color || "red";
+  const { qx, qy } = transformXY(cx, cy, mapTransformProps);
+  const stopOpacity = ["gray", "pink", "orange"].includes(color) ? 0.5 : 0.25;
+  return <g id={ID}>
+    <defs>
+      <radialGradient id={"DrawnWeedGradient"}>
+        <stop offset="90%" stopColor={color} stopOpacity={stopOpacity} />
+        <stop offset="100%" stopColor={color} stopOpacity={0} />
+      </radialGradient>
+    </defs>
+
+    <circle
+      id={"weed-radius"}
+      cx={qx}
+      cy={qy}
+      r={r}
+      fill={"url(#DrawnWeedGradient)"} />
+  </g>;
+}

frontend/farm_designer/map/garden_map.tsx

@@ -6,7 +6,7 @@ import {
 } from "./interfaces";
 import { GardenMapProps, GardenMapState } from "../interfaces";
 import {
-  getMapSize, getGardenCoordinates, getMode, cursorAtPlant,
+  getMapSize, getGardenCoordinates, getMode, cursorAtPlant, allowInteraction,
 } from "./util";
 import {
   Grid, MapBackground,
@@ -17,6 +17,7 @@ import {
   PlantLayer,
   SpreadLayer,
   PointLayer,
+  WeedLayer,
   ToolSlotLayer,
   FarmBotLayer,
   ImageLayer,
@@ -34,9 +35,11 @@ import { NNPath } from "../point_groups/paths";
 import { history } from "../../history";
 import { ZonesLayer } from "./layers/zones/zones_layer";
 import { ErrorBoundary } from "../../error_boundary";
-import { TaggedPoint, TaggedPointGroup } from "farmbot";
+import { TaggedPoint, TaggedPointGroup, PointType } from "farmbot";
 import { findGroupFromUrl } from "../point_groups/group_detail";
 import { pointsSelectedByGroup } from "../point_groups/criteria";
+import { DrawnWeed } from "./drawn_point/drawn_weed";
+import { UUID } from "../../resources/interfaces";
 
 export class GardenMap extends
   React.Component<GardenMapProps, Partial<GardenMapState>> {
@@ -81,6 +84,10 @@ export class GardenMap extends
       pointsSelectedByGroup(this.group, this.props.allPoints) : [];
   }
 
+  get groupSelected(): UUID[] {
+    return this.pointsSelectedByGroup.map(point => point.uuid);
+  }
+
   /** Save the current plant (if needed) and reset drag state. */
   endDrag = () => {
     maybeSavePlantLocation({
@@ -94,7 +101,7 @@ export class GardenMap extends
       dispatch: this.props.dispatch,
       shouldDisplay: this.props.shouldDisplay,
       editGroupAreaInMap: this.props.designer.editGroupAreaInMap,
-      boxSelected: this.props.designer.selectedPlants,
+      boxSelected: this.props.designer.selectedPoints,
     });
     this.setState({
       isDragging: false, qPageX: 0, qPageY: 0,
@@ -152,6 +159,15 @@ export class GardenMap extends
           gardenCoords: this.getGardenCoordinates(e),
           dispatch: this.props.dispatch,
           setMapState: this.setMapState,
+          type: "point",
+        });
+        break;
+      case Mode.createWeed:
+        startNewPoint({
+          gardenCoords: this.getGardenCoordinates(e),
+          dispatch: this.props.dispatch,
+          setMapState: this.setMapState,
+          type: "weed",
         });
         break;
       case Mode.clickToAdd:
@@ -163,8 +179,8 @@ export class GardenMap extends
   startDragOnBackground = (e: React.MouseEvent<SVGElement>): void => {
     switch (getMode()) {
       case Mode.moveTo:
-        break;
       case Mode.createPoint:
+      case Mode.createWeed:
       case Mode.clickToAdd:
       case Mode.editPlant:
         break;
@@ -196,17 +212,26 @@ export class GardenMap extends
     }
   }
 
+  interactions = (pointerType: PointType): boolean => {
+    if (allowInteraction()) {
+      switch (getMode()) {
+        case Mode.boxSelect:
+          return (this.props.designer.selectionPointType || ["Plant"])
+            .includes(pointerType);
+      }
+    }
+    return allowInteraction();
+  };
+
   /** Return the selected plant, mode-allowing. */
   getPlant = (): TaggedPlant | undefined => {
-    switch (getMode()) {
+    return allowInteraction()
-      case Mode.boxSelect:
+      ? this.props.selectedPlant
-      case Mode.moveTo:
+      : undefined;
-      case Mode.points:
+  }
-      case Mode.createPoint:
+
-        return undefined; // For modes without plant interaction
+  get currentPoint(): UUID | undefined {
-      default:
+    return this.props.designer.selectedPoints?.[0];
-        return this.props.selectedPlant;
-    }
   }
 
   handleDragOver = (e: React.DragEvent<HTMLElement>) => {
@@ -273,15 +298,28 @@ export class GardenMap extends
       case Mode.createPoint:
         resizePoint({
           gardenCoords: this.getGardenCoordinates(e),
-          currentPoint: this.props.designer.currentPoint,
+          drawnPoint: this.props.designer.drawnPoint,
           dispatch: this.props.dispatch,
           isDragging: this.state.isDragging,
+          type: "point",
+        });
+        break;
+      case Mode.createWeed:
+        resizePoint({
+          gardenCoords: this.getGardenCoordinates(e),
+          drawnPoint: this.props.designer.drawnWeed,
+          dispatch: this.props.dispatch,
+          isDragging: this.state.isDragging,
+          type: "weed",
         });
         break;
       case Mode.editGroup:
         resizeBox({
           selectionBox: this.state.selectionBox,
           plants: this.props.plants,
+          allPoints: this.props.allPoints,
+          selectionPointType: this.props.designer.selectionPointType,
+          getConfigValue: this.props.getConfigValue,
           gardenCoords: this.getGardenCoordinates(e),
           setMapState: this.setMapState,
           dispatch: this.props.dispatch,
@@ -293,6 +331,9 @@ export class GardenMap extends
         resizeBox({
           selectionBox: this.state.selectionBox,
           plants: this.props.plants,
+          allPoints: this.props.allPoints,
+          selectionPointType: this.props.designer.selectionPointType,
+          getConfigValue: this.props.getConfigValue,
           gardenCoords: this.getGardenCoordinates(e),
           setMapState: this.setMapState,
           dispatch: this.props.dispatch,
@@ -308,7 +349,7 @@ export class GardenMap extends
       case Mode.moveTo:
         return () => { };
       case Mode.boxSelect:
-        return this.props.designer.selectedPlants
+        return this.props.designer.selectedPoints
           ? () => { }
           : closePlantInfo(this.props.dispatch);
       default:
@@ -362,6 +403,7 @@ export class GardenMap extends
     botSize={this.props.botSize}
     mapTransformProps={this.mapTransformProps}
     groups={this.props.groups}
+    startDrag={this.startDragOnBackground}
     currentGroup={this.group?.uuid} />
   SensorReadingsLayer = () => <SensorReadingsLayer
     visible={!!this.props.showSensorReadings}
@@ -385,7 +427,20 @@ export class GardenMap extends
     dispatch={this.props.dispatch}
     hoveredPoint={this.props.designer.hoveredPoint}
     visible={!!this.props.showPoints}
+    interactions={this.interactions("GenericPointer")}
     genericPoints={this.props.genericPoints} />
+  WeedLayer = () => <WeedLayer
+    mapTransformProps={this.mapTransformProps}
+    dispatch={this.props.dispatch}
+    hoveredPoint={this.props.designer.hoveredPoint}
+    visible={!!this.props.showWeeds}
+    spreadVisible={!!this.props.showSpread}
+    currentPoint={this.currentPoint}
+    boxSelected={this.props.designer.selectedPoints}
+    groupSelected={this.groupSelected}
+    interactions={this.interactions("Weed")}
+    weeds={this.props.weeds}
+    animate={this.animate} />
   PlantLayer = () => <PlantLayer
     mapTransformProps={this.mapTransformProps}
     dispatch={this.props.dispatch}
@@ -395,10 +450,11 @@ export class GardenMap extends
     hoveredPlant={this.props.hoveredPlant}
     dragging={!!this.state.isDragging}
     editing={this.isEditing}
-    boxSelected={this.props.designer.selectedPlants}
+    boxSelected={this.props.designer.selectedPoints}
-    groupSelected={this.pointsSelectedByGroup.map(point => point.uuid)}
+    groupSelected={this.groupSelected}
     zoomLvl={this.props.zoomLvl}
     activeDragXY={this.state.activeDragXY}
+    interactions={this.interactions("Plant")}
     animate={this.animate} />
   ToolSlotLayer = () => <ToolSlotLayer
     mapTransformProps={this.mapTransformProps}
@@ -406,6 +462,7 @@ export class GardenMap extends
     dispatch={this.props.dispatch}
     hoveredToolSlot={this.props.designer.hoveredToolSlot}
     botPositionX={this.props.botLocationData.position.x}
+    interactions={this.interactions("ToolSlot")}
     slots={this.props.toolSlots} />
   FarmBotLayer = () => <FarmBotLayer
     mapTransformProps={this.mapTransformProps}
@@ -443,8 +500,10 @@ export class GardenMap extends
     chosenLocation={this.props.designer.chosenLocation}
     mapTransformProps={this.mapTransformProps} />
   DrawnPoint = () => <DrawnPoint
-    data={this.props.designer.currentPoint}
+    data={this.props.designer.drawnPoint}
-    key={"currentPoint"}
+    mapTransformProps={this.mapTransformProps} />
+  DrawnWeed = () => <DrawnWeed
+    data={this.props.designer.drawnWeed}
     mapTransformProps={this.mapTransformProps} />
   GroupOrder = () => <GroupOrder
     group={this.group}
@@ -468,6 +527,7 @@ export class GardenMap extends
             <this.SensorReadingsLayer />
             <this.SpreadLayer />
             <this.PointLayer />
+            <this.WeedLayer />
             <this.PlantLayer />
             <this.ToolSlotLayer />
             <this.FarmBotLayer />
@@ -476,6 +536,7 @@ export class GardenMap extends
             <this.SelectionBox />
             <this.TargetCoordinate />
             <this.DrawnPoint />
+            <this.DrawnWeed />
             <this.GroupOrder />
             <this.NNPath />
             <this.Bugs />

frontend/farm_designer/map/interfaces.ts

@@ -2,6 +2,7 @@ import {
   TaggedPlantPointer,
   TaggedGenericPointer,
   TaggedPlantTemplate,
+  TaggedWeedPointer,
 } from "farmbot";
 import { State, BotOriginQuadrant } from "../interfaces";
 import { BotPosition, BotLocationData } from "../../devices/interfaces";
@@ -22,9 +23,10 @@ export interface PlantLayerProps {
   mapTransformProps: MapTransformProps;
   zoomLvl: number;
   activeDragXY: BotPosition | undefined;
-  boxSelected: string[] | undefined;
+  boxSelected: UUID[] | undefined;
   groupSelected: UUID[];
   animate: boolean;
+  interactions: boolean;
 }
 
 export interface GardenMapLegendProps {
@@ -33,6 +35,7 @@ export interface GardenMapLegendProps {
   legendMenuOpen: boolean;
   showPlants: boolean;
   showPoints: boolean;
+  showWeeds: boolean;
   showSpread: boolean;
   showFarmbot: boolean;
   showImages: boolean;
@@ -80,6 +83,17 @@ export interface GardenPointProps {
   dispatch: Function;
 }
 
+export interface GardenWeedProps {
+  mapTransformProps: MapTransformProps;
+  weed: TaggedWeedPointer;
+  hovered: boolean;
+  current: boolean;
+  selected: boolean;
+  animate: boolean;
+  spreadVisible: boolean;
+  dispatch: Function;
+}
+
 interface DragHelpersBaseProps {
   dragging: boolean;
   mapTransformProps: MapTransformProps;
@@ -152,7 +166,9 @@ export enum Mode {
   addPlant = "addPlant",
   moveTo = "moveTo",
   points = "points",
+  weeds = "weeds",
   createPoint = "createPoint",
+  createWeed = "createWeed",
   templateView = "templateView",
   editGroup = "editGroup",
 }

frontend/farm_designer/map/layers/index.ts

@@ -1,6 +1,7 @@
 export * from "./farmbot/farmbot_layer";
 export * from "./plants/plant_layer";
 export * from "./points/point_layer";
+export * from "./weeds/weed_layer";
 export * from "./spread/spread_layer";
 export * from "./tool_slots/tool_slot_layer";
 export * from "./images/image_layer";

frontend/farm_designer/map/layers/plants/__tests__/plant_layer_test.tsx

@@ -1,6 +1,6 @@
 let mockPath = "/app/designer/plants";
 jest.mock("../../../../../history", () => ({
-  getPathArray: jest.fn(() => { return mockPath.split("/"); })
+  getPathArray: jest.fn(() => mockPath.split("/"))
 }));
 
 import * as React from "react";
@@ -31,6 +31,7 @@ describe("<PlantLayer/>", () => {
     activeDragXY: { x: undefined, y: undefined, z: undefined },
     animate: true,
     hoveredPlant: undefined,
+    interactions: true,
   });
 
   it("shows plants", () => {
@@ -59,14 +60,19 @@ describe("<PlantLayer/>", () => {
   it("is in clickable mode", () => {
     mockPath = "/app/designer/plants";
     const p = fakeProps();
+    p.interactions = true;
+    p.plants[0].body.id = 1;
     const wrapper = svgMount(<PlantLayer {...p} />);
-    expect(wrapper.find("Link").props().style).toEqual({});
+    expect(wrapper.find("Link").props().style).toEqual({
+      cursor: "pointer"
+    });
   });
 
   it("is in non-clickable mode", () => {
     mockPath = "/app/designer/plants/crop_search/mint/add";
     const p = fakeProps();
-
+    p.interactions = false;
+    p.plants[0].body.id = 1;
     const wrapper = svgMount(<PlantLayer {...p} />);
     expect(wrapper.find("Link").props().style)
       .toEqual({ pointerEvents: "none" });
@@ -111,22 +117,12 @@ describe("<PlantLayer/>", () => {
     expect(wrapper.find("GardenPlant").props().selected).toEqual(true);
   });
 
-  it("allows clicking of unsaved plants", () => {
-    const p = fakeProps();
-    const plant = fakePlant();
-    plant.body.id = 1;
-    p.plants = [plant];
-    const wrapper = svgMount(<PlantLayer {...p} />);
-    expect((wrapper.find("Link").props()).style).toEqual({});
-  });
-
   it("doesn't allow clicking of unsaved plants", () => {
     const p = fakeProps();
-    const plant = fakePlant();
+    p.interactions = false;
-    plant.body.id = 0;
+    p.plants[0].body.id = 0;
-    p.plants = [plant];
     const wrapper = svgMount(<PlantLayer {...p} />);
-    expect((wrapper.find("Link").props()).style)
+    expect(wrapper.find("Link").props().style)
       .toEqual({ pointerEvents: "none" });
   });
 

frontend/farm_designer/map/layers/plants/plant_layer.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { GardenPlant } from "./garden_plant";
 import { PlantLayerProps, Mode } from "../../interfaces";
 import { unpackUUID } from "../../../../util";
-import { maybeNoPointer, getMode } from "../../util";
+import { getMode } from "../../util";
 import { Link } from "../../../../link";
 
 export function PlantLayer(props: PlantLayerProps) {
@@ -44,9 +44,12 @@ export function PlantLayer(props: PlantLayerProps) {
         activeDragXY={activeDragXY}
         hovered={hovered}
         animate={animate} />;
+      const style: React.SVGProps<SVGGElement>["style"] =
+        (props.interactions && p.body.id)
+          ? { cursor: "pointer" } : { pointerEvents: "none" };
       const wrapperProps = {
         className: "plant-link-wrapper",
-        style: maybeNoPointer(p.body.id ? {} : { pointerEvents: "none" }),
+        style,
         key: p.uuid,
       };
       return (getMode() === Mode.editGroup || getMode() === Mode.boxSelect)

frontend/farm_designer/map/layers/points/__tests__/garden_point_test.tsx

@@ -1,4 +1,7 @@
-jest.mock("../../../../../history", () => ({ history: { push: jest.fn() } }));
+jest.mock("../../../../../history", () => ({
+  history: { push: jest.fn() },
+  getPathArray: jest.fn(),
+}));
 
 import * as React from "react";
 import { GardenPoint } from "../garden_point";
@@ -55,10 +58,9 @@ describe("<GardenPoint/>", () => {
 
   it("opens point info", () => {
     const p = fakeProps();
-    p.point.body.name = "weed";
     const wrapper = svgMount(<GardenPoint {...p} />);
     wrapper.find("g").simulate("click");
     expect(history.push).toHaveBeenCalledWith(
-      `/app/designer/weeds/${p.point.body.id}`);
+      `/app/designer/points/${p.point.body.id}`);
   });
 });

frontend/farm_designer/map/layers/points/__tests__/point_layer_test.tsx

@@ -19,10 +19,12 @@ describe("<PointLayer/>", () => {
     mapTransformProps: fakeMapTransformProps(),
     hoveredPoint: undefined,
     dispatch: jest.fn(),
+    interactions: true,
   });
 
   it("shows points", () => {
     const p = fakeProps();
+    p.interactions = false;
     const wrapper = svgMount(<PointLayer {...p} />);
     const layer = wrapper.find("#point-layer");
     expect(layer.find(GardenPoint).html()).toContain("r=\"100\"");
@@ -40,6 +42,7 @@ describe("<PointLayer/>", () => {
   it("allows point mode interaction", () => {
     mockPath = "/app/designer/points";
     const p = fakeProps();
+    p.interactions = true;
     const wrapper = svgMount(<PointLayer {...p} />);
     const layer = wrapper.find("#point-layer");
     expect(layer.props().style).toEqual({});

frontend/farm_designer/map/layers/points/garden_point.tsx

@@ -2,8 +2,7 @@ import * as React from "react";
 import { GardenPointProps } from "../../interfaces";
 import { transformXY } from "../../util";
 import { Actions } from "../../../../constants";
-import { history } from "../../../../history";
+import { mapPointClickAction } from "../../actions";
-import { isAWeed } from "../../../points/weeds_inventory";
 
 export const GardenPoint = (props: GardenPointProps) => {
 
@@ -19,11 +18,11 @@ export const GardenPoint = (props: GardenPointProps) => {
   const { id, x, y, meta } = point.body;
   const { qx, qy } = transformXY(x, y, mapTransformProps);
   const color = meta.color || "green";
-  const panel = isAWeed(point.body.name, meta.type) ? "weeds" : "points";
+  return <g id={`point-${id}`} className={"map-point"} stroke={color}
-  return <g id={"point-" + id} className={"map-point"} stroke={color}
     onMouseEnter={iconHover("start")}
     onMouseLeave={iconHover("end")}
-    onClick={() => history.push(`/app/designer/${panel}/${id}`)}>
+    onClick={mapPointClickAction(props.dispatch, point.uuid,
+      `/app/designer/points/${id}`)}>
     <circle id="point-radius" cx={qx} cy={qy} r={point.body.radius}
       fill={hovered ? color : "transparent"} />
     <circle id="point-center" cx={qx} cy={qy} r={2} />

frontend/farm_designer/map/layers/points/point_layer.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { TaggedGenericPointer } from "farmbot";
 import { GardenPoint } from "./garden_point";
-import { MapTransformProps, Mode } from "../../interfaces";
+import { MapTransformProps } from "../../interfaces";
-import { getMode } from "../../util";
 
 export interface PointLayerProps {
   visible: boolean;
@@ -10,13 +9,14 @@ export interface PointLayerProps {
   mapTransformProps: MapTransformProps;
   hoveredPoint: string | undefined;
   dispatch: Function;
+  interactions: boolean;
 }
 
 export function PointLayer(props: PointLayerProps) {
   const { visible, genericPoints, mapTransformProps, hoveredPoint } = props;
   const style: React.CSSProperties =
-    getMode() === Mode.points ? {} : { pointerEvents: "none" };
+    props.interactions ? {} : { pointerEvents: "none" };
-  return <g id="point-layer" style={style}>
+  return <g id={"point-layer"} style={style}>
     {visible &&
       genericPoints.map(p =>
         <GardenPoint

frontend/farm_designer/map/layers/tool_slots/__tests__/tool_slot_layer_test.tsx

@@ -38,6 +38,7 @@ describe("<ToolSlotLayer/>", () => {
       mapTransformProps: fakeMapTransformProps(),
       dispatch: jest.fn(),
       hoveredToolSlot: undefined,
+      interactions: true,
     };
   }
   it("toggles visibility off", () => {
@@ -61,9 +62,19 @@ describe("<ToolSlotLayer/>", () => {
     expect(history.push).not.toHaveBeenCalled();
   });
 
+  it("is in clickable mode", () => {
+    mockPath = "/app/designer/plants/crop_search/mint/add";
+    const p = fakeProps();
+    p.interactions = true;
+    const wrapper = shallow(<ToolSlotLayer {...p} />);
+    expect(wrapper.find("g").props().style)
+      .toEqual({ cursor: "pointer" });
+  });
+
   it("is in non-clickable mode", () => {
     mockPath = "/app/designer/plants/crop_search/mint/add";
     const p = fakeProps();
+    p.interactions = false;
     const wrapper = shallow(<ToolSlotLayer {...p} />);
     expect(wrapper.find("g").props().style)
       .toEqual({ pointerEvents: "none" });

frontend/farm_designer/map/layers/tool_slots/__tests__/tool_slot_point_test.tsx

@@ -1,4 +1,7 @@
-jest.mock("../../../../../history", () => ({ history: { push: jest.fn() } }));
+jest.mock("../../../../../history", () => ({
+  history: { push: jest.fn() },
+  getPathArray: jest.fn(),
+}));
 
 import * as React from "react";
 import { ToolSlotPoint, TSPProps } from "../tool_slot_point";

frontend/farm_designer/map/layers/tool_slots/tool_slot_layer.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { SlotWithTool, UUID } from "../../../../resources/interfaces";
 import { ToolSlotPoint } from "./tool_slot_point";
 import { MapTransformProps } from "../../interfaces";
-import { maybeNoPointer } from "../../util";
 
 export interface ToolSlotLayerProps {
   visible: boolean;
@@ -11,6 +10,7 @@ export interface ToolSlotLayerProps {
   mapTransformProps: MapTransformProps;
   dispatch: Function;
   hoveredToolSlot: UUID | undefined;
+  interactions: boolean;
 }
 
 export function ToolSlotLayer(props: ToolSlotLayerProps) {
@@ -18,7 +18,9 @@ export function ToolSlotLayer(props: ToolSlotLayerProps) {
 
   return <g
     id="toolslot-layer"
-    style={maybeNoPointer({ cursor: "pointer" })}>
+    style={props.interactions
+      ? { cursor: "pointer" }
+      : { pointerEvents: "none" }}>
     {visible &&
       slots.map(slot =>
         <ToolSlotPoint

frontend/farm_designer/map/layers/tool_slots/tool_slot_point.tsx

@@ -5,8 +5,8 @@ import { MapTransformProps } from "../../interfaces";
 import { ToolbaySlot, ToolNames, Tool, GantryToolSlot } from "./tool_graphics";
 import { ToolLabel } from "./tool_label";
 import { includes } from "lodash";
-import { history } from "../../../../history";
 import { t } from "../../../../i18next_wrapper";
+import { mapPointClickAction } from "../../actions";
 
 export interface TSPProps {
   slot: SlotWithTool;
@@ -30,25 +30,27 @@ export const reduceToolName = (raw: string | undefined) => {
 };
 
 export const ToolSlotPoint = (props: TSPProps) => {
+  const { tool, toolSlot } = props.slot;
   const {
     id, x, y, pullout_direction, gantry_mounted
-  } = props.slot.toolSlot.body;
+  } = toolSlot.body;
   const { mapTransformProps, botPositionX } = props;
   const { quadrant, xySwap } = mapTransformProps;
   const xPosition = gantry_mounted ? (botPositionX || 0) : x;
   const { qx, qy } = transformXY(xPosition, y, props.mapTransformProps);
-  const toolName = props.slot.tool ? props.slot.tool.body.name : t("Empty");
+  const toolName = tool ? tool.body.name : t("Empty");
-  const hovered = props.slot.toolSlot.uuid === props.hoveredToolSlot;
+  const hovered = toolSlot.uuid === props.hoveredToolSlot;
   const toolProps = {
     x: qx,
     y: qy,
     hovered,
     dispatch: props.dispatch,
-    uuid: props.slot.toolSlot.uuid,
+    uuid: toolSlot.uuid,
     xySwap,
   };
   return <g id={"toolslot-" + id}
-    onClick={() => history.push(`/app/designer/tool-slots/${id}`)}>
+    onClick={mapPointClickAction(props.dispatch, toolSlot.uuid,
+      `/app/designer/tool-slots/${id}`)}>
     {pullout_direction && !gantry_mounted &&
       <ToolbaySlot
         id={id}

frontend/farm_designer/map/layers/weeds/__tests__/garden_weed_test.tsx

@@ -0,0 +1,89 @@
+jest.mock("../../../../../history", () => ({
+  history: { push: jest.fn() },
+  getPathArray: jest.fn(),
+}));
+
+import * as React from "react";
+import { GardenWeed } from "../garden_weed";
+import { GardenWeedProps } from "../../../interfaces";
+import { fakeWeed } from "../../../../../__test_support__/fake_state/resources";
+import {
+  fakeMapTransformProps,
+} from "../../../../../__test_support__/map_transform_props";
+import { Actions } from "../../../../../constants";
+import { history } from "../../../../../history";
+import { svgMount } from "../../../../../__test_support__/svg_mount";
+
+describe("<GardenWeed />", () => {
+  const fakeProps = (): GardenWeedProps => ({
+    mapTransformProps: fakeMapTransformProps(),
+    weed: fakeWeed(),
+    hovered: false,
+    dispatch: jest.fn(),
+    current: false,
+    selected: false,
+    animate: false,
+    spreadVisible: true,
+  });
+
+  it("renders weed", () => {
+    const p = fakeProps();
+    p.weed.body.meta.color = undefined;
+    const wrapper = svgMount(<GardenWeed {...p} />);
+    expect(wrapper.find("#weed-radius").props().r).toEqual(100);
+    expect(wrapper.find("#weed-radius").props().opacity).toEqual(0.5);
+    expect(wrapper.find("stop").first().props().stopColor).toEqual("red");
+  });
+
+  it("renders weed color", () => {
+    const p = fakeProps();
+    p.weed.body.meta.color = "orange";
+    const wrapper = svgMount(<GardenWeed {...p} />);
+    expect(wrapper.find("#weed-radius").props().r).toEqual(100);
+    expect(wrapper.find("#weed-radius").props().opacity).toEqual(0.5);
+    expect(wrapper.find("stop").first().props().stopColor).toEqual("orange");
+  });
+
+  it("animates", () => {
+    const p = fakeProps();
+    p.animate = true;
+    const wrapper = svgMount(<GardenWeed {...p} />);
+    expect(wrapper.find(".soil-cloud").length).toEqual(1);
+    expect(wrapper.find("image").hasClass("animate")).toBeTruthy();
+  });
+
+  it("hovers weed", () => {
+    const p = fakeProps();
+    const wrapper = svgMount(<GardenWeed {...p} />);
+    wrapper.find("g").first().simulate("mouseEnter");
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.TOGGLE_HOVERED_POINT,
+      payload: p.weed.uuid
+    });
+  });
+
+  it("is hovered", () => {
+    const p = fakeProps();
+    p.hovered = true;
+    const wrapper = svgMount(<GardenWeed {...p} />);
+    expect(wrapper.find("#weed-radius").props().opacity).toEqual(1);
+  });
+
+  it("un-hovers weed", () => {
+    const p = fakeProps();
+    const wrapper = svgMount(<GardenWeed {...p} />);
+    wrapper.find("g").first().simulate("mouseLeave");
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.TOGGLE_HOVERED_POINT,
+      payload: undefined
+    });
+  });
+
+  it("opens weed info", () => {
+    const p = fakeProps();
+    const wrapper = svgMount(<GardenWeed {...p} />);
+    wrapper.find("g").first().simulate("click");
+    expect(history.push).toHaveBeenCalledWith(
+      `/app/designer/weeds/${p.weed.body.id}`);
+  });
+});

frontend/farm_designer/map/layers/weeds/__tests__/weed_layer_test.tsx

@@ -0,0 +1,66 @@
+let mockPath = "/app/designer/plants";
+jest.mock("../../../../../history", () => ({
+  getPathArray: jest.fn(() => mockPath.split("/")),
+}));
+
+import * as React from "react";
+import { WeedLayer, WeedLayerProps } from "../weed_layer";
+import { fakeWeed } from "../../../../../__test_support__/fake_state/resources";
+import {
+  fakeMapTransformProps,
+} from "../../../../../__test_support__/map_transform_props";
+import { GardenWeed } from "../garden_weed";
+import { svgMount } from "../../../../../__test_support__/svg_mount";
+
+describe("<WeedLayer/>", () => {
+  const fakeProps = (): WeedLayerProps => ({
+    visible: true,
+    spreadVisible: true,
+    weeds: [fakeWeed()],
+    mapTransformProps: fakeMapTransformProps(),
+    hoveredPoint: undefined,
+    dispatch: jest.fn(),
+    currentPoint: undefined,
+    boxSelected: undefined,
+    groupSelected: [],
+    animate: false,
+    interactions: true,
+  });
+
+  it("shows weeds", () => {
+    const p = fakeProps();
+    p.interactions = false;
+    const wrapper = svgMount(<WeedLayer {...p} />);
+    const layer = wrapper.find("#weeds-layer");
+    expect(layer.find(GardenWeed).html()).toContain("r=\"100\"");
+    expect(layer.props().style).toEqual({ pointerEvents: "none" });
+  });
+
+  it("toggles visibility off", () => {
+    const p = fakeProps();
+    p.visible = false;
+    const wrapper = svgMount(<WeedLayer {...p} />);
+    const layer = wrapper.find("#weeds-layer");
+    expect(layer.find(GardenWeed).length).toEqual(0);
+  });
+
+  it("allows weed mode interaction", () => {
+    mockPath = "/app/designer/weeds";
+    const p = fakeProps();
+    p.interactions = true;
+    const wrapper = svgMount(<WeedLayer {...p} />);
+    const layer = wrapper.find("#weeds-layer");
+    expect(layer.props().style).toEqual({ cursor: "pointer" });
+  });
+
+  it("is selected", () => {
+    mockPath = "/app/designer/weeds";
+    const p = fakeProps();
+    const weed = fakeWeed();
+    p.weeds = [weed];
+    p.boxSelected = [weed.uuid];
+    const wrapper = svgMount(<WeedLayer {...p} />);
+    const layer = wrapper.find("#weeds-layer");
+    expect(layer.find(GardenWeed).props().selected).toBeTruthy();
+  });
+});

frontend/farm_designer/map/layers/weeds/garden_weed.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { GardenWeedProps } from "../../interfaces";
+import { transformXY } from "../../util";
+import { Actions } from "../../../../constants";
+import { Color } from "../../../../ui";
+import { mapPointClickAction } from "../../actions";
+
+export const DEFAULT_WEED_ICON = "/app-resources/img/generic-weed.svg";
+
+export const GardenWeed = (props: GardenWeedProps) => {
+
+  const iconHover = (action: "start" | "end") => () => {
+    const hover = action === "start";
+    props.dispatch({
+      type: Actions.TOGGLE_HOVERED_POINT,
+      payload: hover ? props.weed.uuid : undefined
+    });
+  };
+
+  const { weed, mapTransformProps, hovered, current, selected, animate } = props;
+  const { id, x, y, meta, radius } = weed.body;
+  const { qx, qy } = transformXY(x, y, mapTransformProps);
+  const color = meta.color || "red";
+  const stopOpacity = ["gray", "pink", "orange"].includes(color) ? 0.5 : 0.25;
+  const className = [
+    "weed-image", `is-chosen-${current || selected}`, animate ? "animate" : "",
+  ].join(" ");
+  const iconRadius = hovered ? radius * 0.88 : radius * 0.8;
+  return <g id={`weed-${id}`} className={`map-weed ${color}`}
+    onMouseEnter={iconHover("start")}
+    onMouseLeave={iconHover("end")}
+    onClick={mapPointClickAction(props.dispatch, weed.uuid,
+      `/app/designer/weeds/${id}`)}>
+    <defs>
+      <radialGradient id={`Weed${id}Gradient`}>
+        <stop offset="90%" stopColor={color} stopOpacity={stopOpacity} />
+        <stop offset="100%" stopColor={color} stopOpacity={0} />
+      </radialGradient>
+    </defs>
+
+    {animate &&
+      <circle
+        className="soil-cloud"
+        cx={qx}
+        cy={qy}
+        r={radius}
+        fill={Color.soilCloud}
+        fillOpacity={0} />}
+
+    {props.spreadVisible &&
+      <circle
+        id={"weed-radius"}
+        cx={qx}
+        cy={qy}
+        r={radius}
+        fill={`url(#Weed${id}Gradient)`}
+        opacity={hovered ? 1 : 0.5} />}
+
+    <g id="weed-icon">
+      <image
+        className={className}
+        xlinkHref={DEFAULT_WEED_ICON}
+        height={iconRadius * 2}
+        width={iconRadius * 2}
+        x={qx - iconRadius}
+        y={qy - iconRadius} />
+    </g>
+  </g>;
+};

frontend/farm_designer/map/layers/weeds/weed_layer.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { TaggedWeedPointer } from "farmbot";
+import { GardenWeed } from "./garden_weed";
+import { MapTransformProps } from "../../interfaces";
+import { UUID } from "../../../../resources/interfaces";
+
+export interface WeedLayerProps {
+  visible: boolean;
+  spreadVisible: boolean;
+  weeds: TaggedWeedPointer[];
+  mapTransformProps: MapTransformProps;
+  hoveredPoint: UUID | undefined;
+  currentPoint: UUID | undefined;
+  boxSelected: UUID[] | undefined;
+  groupSelected: UUID[];
+  dispatch: Function;
+  animate: boolean;
+  interactions: boolean;
+}
+
+export function WeedLayer(props: WeedLayerProps) {
+  const { visible, weeds, mapTransformProps } = props;
+  return <g id={"weeds-layer"} style={props.interactions
+    ? { cursor: "pointer" } : { pointerEvents: "none" }}>
+    {visible &&
+      weeds.map(p => {
+        const current = p.uuid === props.currentPoint;
+        const hovered = p.uuid === props.hoveredPoint;
+        const selectedByBox = !!props.boxSelected?.includes(p.uuid);
+        const selectedByGroup = props.groupSelected.includes(p.uuid);
+        return <GardenWeed
+          weed={p}
+          key={p.uuid}
+          hovered={hovered}
+          current={current}
+          selected={selectedByBox || selectedByGroup}
+          animate={props.animate}
+          spreadVisible={props.spreadVisible}
+          dispatch={props.dispatch}
+          mapTransformProps={mapTransformProps} />;
+      })}
+  </g>;
+}

frontend/farm_designer/map/layers/zones/__tests__/zones_layer_test.tsx

@@ -18,6 +18,7 @@ describe("<ZonesLayer />", () => {
       y: { value: 1500, isDefault: true }
     },
     mapTransformProps: fakeMapTransformProps(),
+    startDrag: jest.fn(),
   });
 
   it("renders", () => {
@@ -70,15 +71,15 @@ describe("<ZonesLayer />", () => {
     p.groups[0].body.id = 1;
     p.currentGroup = p.groups[0].uuid;
     const wrapper = svgMount(<ZonesLayer {...p} />);
-    expect(wrapper.html())
+    expect(wrapper.html()).toEqual(
-      .toEqual("<svg><g class=\"zones-layer\"></g></svg>");
+      "<svg><g class=\"zones-layer\" style=\"cursor: pointer;\"></g></svg>");
   });
 
   it("doesn't render current group's zones", () => {
     const p = fakeProps();
     p.visible = false;
     const wrapper = svgMount(<ZonesLayer {...p} />);
-    expect(wrapper.html())
+    expect(wrapper.html()).toEqual(
-      .toEqual("<svg><g class=\"zones-layer\"></g></svg>");
+      "<svg><g class=\"zones-layer\" style=\"cursor: pointer;\"></g></svg>");
   });
 });

frontend/farm_designer/map/layers/zones/zones.tsx

@@ -4,6 +4,7 @@ import { MapTransformProps, BotSize } from "../../interfaces";
 import { transformXY } from "../../util";
 import { isUndefined } from "lodash";
 import { UUID } from "../../../../resources/interfaces";
+import { history } from "../../../../history";
 
 export interface ZonesProps {
   currentGroup: UUID | undefined;
@@ -43,6 +44,9 @@ export const getZoneType = (group: TaggedPointGroup): ZoneType => {
   return ZoneType.none;
 };
 
+const openGroup = (id: number | undefined) =>
+  () => history.push(`/app/designer/groups/${id}`);
+
 /** Bounds for area selected by criteria or bot extents. */
 const getBoundary = (props: GetBoundaryProps): Boundary => {
   const { criteria } = props.group.body;
@@ -85,7 +89,8 @@ const zone0D = (props: ZonesProps) =>
 /** Coordinates selected by both x and y number equal values. */
 export const Zones0D = (props: ZonesProps) => {
   const current = props.group.uuid == props.currentGroup;
-  return <g id={`zones-0D-${props.group.body.id}`}
+  const { id } = props.group.body;
+  return <g id={`zones-0D-${id}`} onClick={openGroup(id)}
     className={current ? "current" : ""}>
     {zone0D(props).map((point, i) =>
       <circle key={i} cx={point.x} cy={point.y} r={5} />)}
@@ -126,7 +131,8 @@ const zone1D = (props: ZonesProps) => {
 /** Lines selected by an x or y number equal value. */
 export const Zones1D = (props: ZonesProps) => {
   const current = props.group.uuid == props.currentGroup;
-  return <g id={`zones-1D-${props.group.body.id}`}
+  const { id } = props.group.body;
+  return <g id={`zones-1D-${id}`} onClick={openGroup(id)}
     className={current ? "current" : ""}>
     {zone1D(props).map((line, i) =>
       <line key={i} x1={line.x1} y1={line.y1}
@@ -153,7 +159,8 @@ const zone2D = (boundary: Boundary, mapTransformProps: MapTransformProps) => {
 export const Zones2D = (props: ZonesProps) => {
   const zone = zone2D(getBoundary(props), props.mapTransformProps);
   const current = props.group.uuid == props.currentGroup;
-  return <g id={`zones-2D-${props.group.body.id}`}
+  const { id } = props.group.body;
+  return <g id={`zones-2D-${id}`} onClick={openGroup(id)}
     className={current ? "current" : ""}>
     {!zone.selectsAll &&
       <rect x={zone.x} y={zone.y} width={zone.width} height={zone.height} />}

frontend/farm_designer/map/layers/zones/zones_layer.tsx

@@ -3,6 +3,7 @@ import { TaggedPointGroup } from "farmbot";
 import { MapTransformProps, BotSize } from "../../interfaces";
 import { Zones0D, Zones1D, Zones2D, getZoneType, ZoneType } from "./zones";
 import { UUID } from "../../../../resources/interfaces";
+import { allowGroupAreaInteraction } from "../../util";
 
 export interface ZonesLayerProps {
   visible: boolean;
@@ -10,6 +11,7 @@ export interface ZonesLayerProps {
   groups: TaggedPointGroup[];
   botSize: BotSize;
   mapTransformProps: MapTransformProps;
+  startDrag(e: React.MouseEvent<SVGElement>): void;
 }
 
 export function ZonesLayer(props: ZonesLayerProps) {
@@ -17,7 +19,9 @@ export function ZonesLayer(props: ZonesLayerProps) {
   const commonProps = { botSize, mapTransformProps, currentGroup };
   const visible = (group: TaggedPointGroup) =>
     props.visible || (group.uuid == currentGroup);
-  return <g className="zones-layer">
+  return <g className="zones-layer" style={allowGroupAreaInteraction()
+    ? { cursor: "pointer" }
+    : { pointerEvents: "none" }} onMouseDown={props.startDrag}>
     {groups.map(group => visible(group) &&
       getZoneType(group) === ZoneType.area &&
       <Zones2D {...commonProps} key={group.uuid} group={group} />)}

frontend/farm_designer/map/legend/__tests__/garden_map_legend_test.tsx

@@ -35,6 +35,7 @@ describe("<GardenMapLegend />", () => {
     legendMenuOpen: true,
     showPlants: false,
     showPoints: false,
+    showWeeds: false,
     showSpread: false,
     showFarmbot: false,
     showImages: false,

frontend/farm_designer/map/legend/garden_map_legend.tsx

@@ -59,6 +59,10 @@ const LayerToggles = (props: GardenMapLegendProps) => {
       popover={DevSettings.futureFeaturesEnabled()
         ? <PointsSubMenu toggle={toggle} getConfigValue={getConfigValue} />
         : undefined} />
+    <LayerToggle
+      value={props.showWeeds}
+      label={t("Weeds?")}
+      onClick={toggle(BooleanSetting.show_weeds)} />
     <LayerToggle
       value={props.showSpread}
       label={t("Spread?")}

frontend/farm_designer/map/util.ts

@@ -299,10 +299,14 @@ export const getMode = (): Mode => {
     if (pathArray[4] === "select") { return Mode.boxSelect; }
     if (pathArray[4] === "crop_search") { return Mode.addPlant; }
     if (pathArray[3] === "move_to") { return Mode.moveTo; }
-    if (pathArray[3] === "points" || pathArray[3] === "weeds") {
+    if (pathArray[3] === "points") {
       if (pathArray[4] === "add") { return Mode.createPoint; }
       return Mode.points;
     }
+    if (pathArray[3] === "weeds") {
+      if (pathArray[4] === "add") { return Mode.createWeed; }
+      return Mode.weeds;
+    }
     if (savedGardenOpen(pathArray)) { return Mode.templateView; }
   }
   return Mode.none;
@@ -337,18 +341,28 @@ export const getGardenCoordinates = (props: {
   }
 };
 
-export const maybeNoPointer =
+export const allowInteraction = () => {
-  (defaultStyle: React.CSSProperties): React.SVGProps<SVGGElement>["style"] => {
+  switch (getMode()) {
-    switch (getMode()) {
+    case Mode.clickToAdd:
-      case Mode.clickToAdd:
+    case Mode.moveTo:
-      case Mode.moveTo:
+    case Mode.createPoint:
-      case Mode.points:
+    case Mode.createWeed:
-      case Mode.createPoint:
+      return false;
-        return { pointerEvents: "none" };
+    default:
-      default:
+      return true;
-        return defaultStyle;
+  }
-    }
+};
-  };
+
+export const allowGroupAreaInteraction = () => {
+  if (!allowInteraction()) { return false; }
+  switch (getMode()) {
+    case Mode.boxSelect:
+    case Mode.editGroup:
+      return false;
+    default:
+      return true;
+  }
+};
 
 /** Check if the cursor is within the selected plant indicator area. */
 export const cursorAtPlant =

frontend/farm_designer/plants/__tests__/plant_inventory_item_test.tsx

@@ -2,7 +2,17 @@ jest.mock("../../../open_farm/cached_crop", () => ({
   maybeGetCachedPlantIcon: jest.fn(),
 }));
 
-jest.mock("../../../history", () => ({ push: jest.fn() }));
+let mockPath = "/app/designer/plants";
+jest.mock("../../../history", () => ({
+  push: jest.fn(),
+  getPathArray: () => mockPath.split("/"),
+}));
+
+jest.mock("../../map/actions", () => ({
+  mapPointClickAction: jest.fn(() => jest.fn()),
+  setHoveredPlant: jest.fn(),
+  selectPoint: jest.fn(),
+}));
 
 import * as React from "react";
 import {
@@ -12,9 +22,11 @@ import { shallow, mount } from "enzyme";
 import {
   fakePlant, fakePlantTemplate,
 } from "../../../__test_support__/fake_state/resources";
-import { Actions } from "../../../constants";
 import { push } from "../../../history";
 import { maybeGetCachedPlantIcon } from "../../../open_farm/cached_crop";
+import {
+  mapPointClickAction, setHoveredPlant, selectPoint,
+} from "../../map/actions";
 
 describe("<PlantInventoryItem />", () => {
   const fakeProps = (): PlantInventoryItemProps => ({
@@ -40,48 +52,43 @@ describe("<PlantInventoryItem />", () => {
     const p = fakeProps();
     const wrapper = shallow(<PlantInventoryItem {...p} />);
     wrapper.simulate("mouseEnter");
-    expect(p.dispatch).toBeCalledWith({
+    expect(setHoveredPlant).toBeCalledWith(p.plant.uuid, "");
-      payload: {
-        icon: "",
-        plantUUID: p.plant.uuid
-      },
-      type: Actions.TOGGLE_HOVERED_PLANT
-    });
   });
 
   it("hover end", () => {
-    const p = fakeProps();
+    const wrapper = shallow(<PlantInventoryItem {...fakeProps()} />);
-    const wrapper = shallow(<PlantInventoryItem {...p} />);
     wrapper.simulate("mouseLeave");
-    expect(p.dispatch).toBeCalledWith({
+    expect(setHoveredPlant).toBeCalledWith(undefined, "");
-      payload: {
-        icon: "",
-        plantUUID: undefined
-      },
-      type: Actions.TOGGLE_HOVERED_PLANT
-    });
   });
 
   it("selects plant", () => {
+    mockPath = "/app/designer/plants";
     const p = fakeProps();
     const wrapper = shallow(<PlantInventoryItem {...p} />);
     wrapper.simulate("click");
-    expect(p.dispatch).toBeCalledWith({
+    expect(mapPointClickAction).not.toHaveBeenCalled();
-      payload: [p.plant.uuid],
+    expect(selectPoint).toBeCalledWith([p.plant.uuid]);
-      type: Actions.SELECT_PLANT
-    });
     expect(push).toHaveBeenCalledWith("/app/designer/plants/" + p.plant.body.id);
   });
 
+  it("removes item in box select mode", () => {
+    mockPath = "/app/designer/plants/select";
+    const p = fakeProps();
+    const wrapper = shallow(<PlantInventoryItem {...p} />);
+    wrapper.simulate("click");
+    expect(mapPointClickAction).toHaveBeenCalledWith(expect.any(Function),
+      p.plant.uuid);
+    expect(push).not.toHaveBeenCalled();
+    expect(setHoveredPlant).toHaveBeenCalledWith(undefined, "");
+  });
+
   it("selects plant template", () => {
+    mockPath = "/app/designer/plants";
     const p = fakeProps();
     p.plant = fakePlantTemplate();
     const wrapper = shallow(<PlantInventoryItem {...p} />);
     wrapper.simulate("click");
-    expect(p.dispatch).toBeCalledWith({
+    expect(selectPoint).toBeCalledWith([p.plant.uuid]);
-      payload: [p.plant.uuid],
-      type: Actions.SELECT_PLANT
-    });
     expect(push).toHaveBeenCalledWith(
       "/app/designer/gardens/templates/" + p.plant.body.id);
   });
@@ -94,4 +101,12 @@ describe("<PlantInventoryItem />", () => {
     expect(maybeGetCachedPlantIcon).toHaveBeenCalledWith("strawberry",
       img.instance(), expect.any(Function));
   });
+
+  it("sets icon", () => {
+    const wrapper =
+      mount<PlantInventoryItem>(<PlantInventoryItem {...fakeProps()} />);
+    expect(wrapper.state().icon).toEqual("");
+    wrapper.instance().updateStateIcon("fake icon");
+    expect(wrapper.state().icon).toEqual("fake icon");
+  });
 });

frontend/farm_designer/plants/__tests__/select_plants_test.tsx

@@ -15,11 +15,15 @@ jest.mock("../../../account/dev/dev_support", () => ({
 jest.mock("../../point_groups/actions", () => ({ createGroup: jest.fn() }));
 
 import * as React from "react";
-import { mount } from "enzyme";
+import { mount, shallow } from "enzyme";
 import {
   RawSelectPlants as SelectPlants, SelectPlantsProps, mapStateToProps,
+  getFilteredPoints, GetFilteredPointsProps,
 } from "../select_plants";
-import { fakePlant } from "../../../__test_support__/fake_state/resources";
+import {
+  fakePlant, fakePoint, fakeWeed, fakeToolSlot, fakeTool,
+  fakePlantTemplate,
+} from "../../../__test_support__/fake_state/resources";
 import { Actions, Content } from "../../../constants";
 import { clickButton } from "../../../__test_support__/helpers";
 import { destroy } from "../../../api/crud";
@@ -41,9 +45,16 @@ describe("<SelectPlants />", () => {
     plant2.body.name = "Blueberry";
     return {
       selected: ["plant.1"],
+      selectionPointType: undefined,
+      getConfigValue: () => true,
       plants: [plant1, plant2],
       dispatch: jest.fn(x => x),
       gardenOpen: undefined,
+      allPoints: [],
+      xySwap: false,
+      quadrant: 2,
+      isActive: () => false,
+      tools: [],
     };
   }
 
@@ -52,6 +63,53 @@ describe("<SelectPlants />", () => {
     expect(wrapper.text()).toContain("Strawberry");
   });
 
+  it("displays selected point", () => {
+    const p = fakeProps();
+    const point = fakePoint();
+    point.body.name = "fake point";
+    p.allPoints = [point];
+    p.selected = [point.uuid];
+    p.selectionPointType = ["GenericPointer"];
+    const wrapper = mount(<SelectPlants {...p} />);
+    expect(wrapper.text()).toContain(point.body.name);
+  });
+
+  it("displays selected weed", () => {
+    const p = fakeProps();
+    const weed = fakeWeed();
+    weed.body.name = "fake weed";
+    p.allPoints = [weed];
+    p.selected = [weed.uuid];
+    p.selectionPointType = ["Weed"];
+    const wrapper = mount(<SelectPlants {...p} />);
+    expect(wrapper.text()).toContain(weed.body.name);
+  });
+
+  it("displays selected slot", () => {
+    const p = fakeProps();
+    const tool = fakeTool();
+    tool.body.id = 1;
+    tool.body.name = "fake tool slot";
+    p.tools = [tool];
+    const slot = fakeToolSlot();
+    slot.body.tool_id = 1;
+    p.allPoints = [slot];
+    p.selected = [slot.uuid];
+    p.selectionPointType = ["ToolSlot"];
+    const wrapper = mount(<SelectPlants {...p} />);
+    expect(wrapper.text()).toContain(tool.body.name);
+  });
+
+  it("clears point section type", () => {
+    const p = fakeProps();
+    const wrapper = mount(<SelectPlants {...p} />);
+    wrapper.unmount();
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_SELECTION_POINT_TYPE,
+      payload: undefined,
+    });
+  });
+
   it("displays multiple selected plants", () => {
     const p = fakeProps();
     p.selected = ["plant.1", "plant.2"];
@@ -88,31 +146,42 @@ describe("<SelectPlants />", () => {
     expect(wrapper.text()).not.toContain("Strawberry Plant");
   });
 
+  it("changes selection type", () => {
+    const p = fakeProps();
+    const wrapper = mount<SelectPlants>(<SelectPlants {...p} />);
+    const actionsWrapper = shallow(wrapper.instance().ActionButtons());
+    actionsWrapper.find("FBSelect").first().simulate("change",
+      { label: "", value: "All" });
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_SELECTION_POINT_TYPE,
+      payload: ["Plant", "GenericPointer", "ToolSlot", "Weed"],
+    });
+  });
+
   it("selects all", () => {
     const p = fakeProps();
-    p.dispatch = jest.fn();
     const wrapper = mount(<SelectPlants {...p} />);
-    clickButton(wrapper, 1, "select all");
+    clickButton(wrapper, 2, "select all");
     expect(p.dispatch).toHaveBeenCalledWith(
-      { payload: ["plant.1", "plant.2"], type: Actions.SELECT_PLANT });
+      { payload: ["plant.1", "plant.2"], type: Actions.SELECT_POINT });
   });
 
   it("selects none", () => {
     const p = fakeProps();
-    p.dispatch = jest.fn();
     const wrapper = mount(<SelectPlants {...p} />);
-    clickButton(wrapper, 0, "select none");
+    clickButton(wrapper, 1, "select none");
     expect(p.dispatch).toHaveBeenCalledWith(
-      { payload: undefined, type: Actions.SELECT_PLANT });
+      { payload: undefined, type: Actions.SELECT_POINT });
   });
 
+  const DELETE_BTN_INDEX = 3;
+
   it("confirms deletion of selected plants", () => {
     const p = fakeProps();
     p.selected = ["plant.1", "plant.2"];
     const wrapper = mount(<SelectPlants {...p} />);
-    expect(wrapper.text()).toContain("Delete");
     window.confirm = jest.fn();
-    wrapper.find("button").at(2).simulate("click");
+    clickButton(wrapper, DELETE_BTN_INDEX, "Delete");
     expect(window.confirm).toHaveBeenCalledWith(
       "Are you sure you want to delete 2 plants?");
   });
@@ -122,9 +191,8 @@ describe("<SelectPlants />", () => {
     mockDestroy = jest.fn(() => Promise.resolve());
     p.selected = ["plant.1", "plant.2"];
     const wrapper = mount(<SelectPlants {...p} />);
-    expect(wrapper.text()).toContain("Delete");
     window.confirm = () => true;
-    wrapper.find("button").at(2).simulate("click");
+    clickButton(wrapper, DELETE_BTN_INDEX, "Delete");
     expect(destroy).toHaveBeenCalledWith("plant.1", true);
     expect(destroy).toHaveBeenCalledWith("plant.2", true);
   });
@@ -134,19 +202,17 @@ describe("<SelectPlants />", () => {
     mockDestroy = jest.fn(() => Promise.resolve());
     p.selected = undefined;
     const wrapper = mount(<SelectPlants {...p} />);
-    expect(wrapper.text()).toContain("Delete");
+    clickButton(wrapper, DELETE_BTN_INDEX, "Delete");
-    wrapper.find("button").at(2).simulate("click");
     expect(destroy).not.toHaveBeenCalled();
   });
 
-  it("errors when deleting selected plants", () => {
+  it("errors when deleting selected plants", async () => {
     const p = fakeProps();
     mockDestroy = jest.fn(() => Promise.reject());
     p.selected = ["plant.1", "plant.2"];
     const wrapper = mount(<SelectPlants {...p} />);
-    expect(wrapper.text()).toContain("Delete");
     window.confirm = () => true;
-    wrapper.find("button").at(2).simulate("click");
+    await clickButton(wrapper, DELETE_BTN_INDEX, "Delete");
     expect(destroy).toHaveBeenCalledWith("plant.1", true);
     expect(destroy).toHaveBeenCalledWith("plant.2", true);
   });
@@ -183,3 +249,43 @@ describe("mapStateToProps", () => {
     expect(result.dispatch).toBe(state.dispatch);
   });
 });
+
+describe("getFilteredPoints()", () => {
+  const plant = fakePlant();
+  const point = fakePoint();
+  const weed = fakeWeed();
+  const slot = fakeToolSlot();
+
+  const fakeProps = (): GetFilteredPointsProps => ({
+    selectionPointType: undefined,
+    getConfigValue: () => true,
+    plants: [plant],
+    allPoints: [plant, point, weed, slot],
+  });
+
+  it("returns filtered points: all", () => {
+    const p = fakeProps();
+    p.selectionPointType = ["Plant", "GenericPointer", "Weed", "ToolSlot"];
+    expect(getFilteredPoints(p)).toEqual([plant, point, weed, slot]);
+  });
+
+  it("returns filtered points: none", () => {
+    const p = fakeProps();
+    p.selectionPointType = ["Plant", "GenericPointer", "Weed", "ToolSlot"];
+    p.getConfigValue = () => false;
+    expect(getFilteredPoints(p)).toEqual([]);
+  });
+
+  it("returns filtered points: plants", () => {
+    const p = fakeProps();
+    const plantTemplate = fakePlantTemplate();
+    p.plants = [plantTemplate];
+    expect(getFilteredPoints(p)).toEqual([plantTemplate]);
+  });
+
+  it("returns filtered points: tool slots", () => {
+    const p = fakeProps();
+    p.selectionPointType = ["ToolSlot"];
+    expect(getFilteredPoints(p)).toEqual([slot]);
+  });
+});

frontend/farm_designer/plants/plant_inventory_item.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { DEFAULT_ICON } from "../../open_farm/icons";
 import { push } from "../../history";
-import { TaggedPlant } from "../map/interfaces";
+import { TaggedPlant, Mode } from "../map/interfaces";
 import { unpackUUID } from "../../util";
 import { t } from "../../i18next_wrapper";
 import { maybeGetCachedPlantIcon } from "../../open_farm/cached_crop";
-import { selectPlant, setHoveredPlant } from "../map/actions";
+import { selectPoint, setHoveredPlant, mapPointClickAction } from "../map/actions";
 import { plantAge } from "./map_state_to_props";
+import { getMode } from "../map/util";
 
 export interface PlantInventoryItemProps {
   plant: TaggedPlant;
@@ -21,9 +22,10 @@ interface PlantInventoryItemState {
 // The individual plants that show up in the farm designer sub nav.
 export class PlantInventoryItem extends
   React.Component<PlantInventoryItemProps, PlantInventoryItemState> {
-
   state: PlantInventoryItemState = { icon: "" };
 
+  updateStateIcon = (i: string) => this.setState({ icon: i });
+
   render() {
     const { plant, dispatch } = this.props;
     const plantId = (plant.body.id || "ERR_NO_PLANT_ID").toString();
@@ -36,17 +38,21 @@ export class PlantInventoryItem extends
     };
 
     const click = () => {
-      const plantCategory =
+      if (getMode() == Mode.boxSelect) {
-        unpackUUID(plant.uuid).kind === "PlantTemplate"
+        mapPointClickAction(dispatch, plant.uuid)();
-          ? "gardens/templates"
+        toggle("leave");
-          : "plants";
+      } else {
-      push(`/app/designer/${plantCategory}/${plantId}`);
+        const plantCategory =
-      dispatch(selectPlant([plant.uuid]));
+          unpackUUID(plant.uuid).kind === "PlantTemplate"
+            ? "gardens/templates"
+            : "plants";
+        push(`/app/designer/${plantCategory}/${plantId}`);
+        dispatch(selectPoint([plant.uuid]));
+      }
     };
 
-    const updateStateIcon = (i: string) => this.setState({ icon: i });
     const onLoad = (e: React.SyntheticEvent<HTMLImageElement>) =>
-      maybeGetCachedPlantIcon(slug, e.currentTarget, updateStateIcon);
+      maybeGetCachedPlantIcon(slug, e.currentTarget, this.updateStateIcon);
 
     // Name given from OpenFarm's API.
     const label = plant.body.name || "Unknown plant";

frontend/farm_designer/plants/select_plants.tsx

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { Everything } from "../../interfaces";
 import { PlantInventoryItem } from "./plant_inventory_item";
 import { destroy } from "../../api/crud";
-import { unselectPlant, selectPlant, setHoveredPlant } from "../map/actions";
+import { unselectPlant, selectPoint, setHoveredPlant } from "../map/actions";
 import { Actions, Content } from "../../constants";
 import { TaggedPlant } from "../map/interfaces";
 import { getPlants } from "../state_to_props";
@@ -16,19 +16,73 @@ import { createGroup } from "../point_groups/actions";
 import { PanelColor } from "../panel_header";
 import { error } from "../../toast/toast";
 import { PlantStatusBulkUpdate } from "./edit_plant_status";
+import { FBSelect, DropDownItem } from "../../ui";
+import {
+  PointType, TaggedPoint, TaggedGenericPointer, TaggedToolSlotPointer,
+  TaggedTool,
+  TaggedWeedPointer,
+} from "farmbot";
+import { UUID } from "../../resources/interfaces";
+import {
+  selectAllActivePoints, selectAllToolSlotPointers, selectAllTools,
+} from "../../resources/selectors";
+import { PointInventoryItem } from "../points/point_inventory_item";
+import { ToolSlotInventoryItem } from "../tools";
+import { getWebAppConfigValue, GetWebAppConfigValue } from "../../config_storage/actions";
+import { BooleanSetting, NumericSetting } from "../../session_keys";
+import { isBotOriginQuadrant, BotOriginQuadrant } from "../interfaces";
+import { isActive } from "../tools/edit_tool";
+import { uniq } from "lodash";
+import { POINTER_TYPES } from "../point_groups/criteria/interfaces";
+import { WeedInventoryItem } from "../weeds/weed_inventory_item";
 
-export const mapStateToProps = (props: Everything): SelectPlantsProps => ({
+export const POINTER_TYPE_DDI_LOOKUP = (): { [x: string]: DropDownItem } => ({
-  selected: props.resources.consumers.farm_designer.selectedPlants,
+  Plant: { label: t("Plants"), value: "Plant" },
-  plants: getPlants(props.resources),
+  GenericPointer: { label: t("Points"), value: "GenericPointer" },
-  dispatch: props.dispatch,
+  Weed: { label: t("Weeds"), value: "Weed" },
-  gardenOpen: props.resources.consumers.farm_designer.openedSavedGarden,
+  ToolSlot: { label: t("Slots"), value: "ToolSlot" },
+  All: { label: t("All"), value: "All" },
 });
+export const POINTER_TYPE_LIST = () => [
+  POINTER_TYPE_DDI_LOOKUP().Plant,
+  POINTER_TYPE_DDI_LOOKUP().GenericPointer,
+  POINTER_TYPE_DDI_LOOKUP().Weed,
+  POINTER_TYPE_DDI_LOOKUP().ToolSlot,
+  POINTER_TYPE_DDI_LOOKUP().All,
+];
+
+export const mapStateToProps = (props: Everything): SelectPlantsProps => {
+  const getWebAppConfig = getWebAppConfigValue(() => props);
+  const xySwap = !!getWebAppConfig(BooleanSetting.xy_swap);
+  const rawQuadrant = getWebAppConfig(NumericSetting.bot_origin_quadrant);
+  const quadrant = isBotOriginQuadrant(rawQuadrant) ? rawQuadrant : 2;
+  return {
+    selected: props.resources.consumers.farm_designer.selectedPoints,
+    selectionPointType: props.resources.consumers.farm_designer.selectionPointType,
+    getConfigValue: getWebAppConfig,
+    plants: getPlants(props.resources),
+    allPoints: selectAllActivePoints(props.resources.index),
+    dispatch: props.dispatch,
+    gardenOpen: props.resources.consumers.farm_designer.openedSavedGarden,
+    tools: selectAllTools(props.resources.index),
+    isActive: isActive(selectAllToolSlotPointers(props.resources.index)),
+    xySwap,
+    quadrant,
+  };
+};
 
 export interface SelectPlantsProps {
   plants: TaggedPlant[];
+  allPoints: TaggedPoint[];
   dispatch: Function;
-  selected: string[] | undefined;
+  selected: UUID[] | undefined;
+  selectionPointType: PointType[] | undefined;
+  getConfigValue: GetWebAppConfigValue;
   gardenOpen: string | undefined;
+  xySwap: boolean;
+  quadrant: BotOriginQuadrant;
+  isActive(id: number | undefined): boolean;
+  tools: TaggedTool[];
 }
 
 export class RawSelectPlants extends React.Component<SelectPlantsProps, {}> {
@@ -42,6 +96,11 @@ export class RawSelectPlants extends React.Component<SelectPlantsProps, {}> {
     }
   }
 
+  componentWillUnmount = () => this.props.dispatch({
+    type: Actions.SET_SELECTION_POINT_TYPE,
+    payload: undefined,
+  });
+
   get selected() { return this.props.selected || []; }
 
   destroySelected = (plantUUIDs: string[] | undefined) => {
@@ -56,18 +115,32 @@ export class RawSelectPlants extends React.Component<SelectPlantsProps, {}> {
     }
   }
 
+  get selectionPointType() {
+    const selectionPointTypes = this.props.selectionPointType || ["Plant"];
+    return selectionPointTypes.length > 1 ? "All" : selectionPointTypes[0];
+  }
+
   ActionButtons = () =>
     <div className="panel-action-buttons">
+      <FBSelect
+        list={POINTER_TYPE_LIST()}
+        selectedItem={POINTER_TYPE_DDI_LOOKUP()[this.selectionPointType]}
+        onChange={ddi => {
+          this.props.dispatch(selectPoint(undefined));
+          this.props.dispatch({
+            type: Actions.SET_SELECTION_POINT_TYPE,
+            payload: ddi.value == "All" ? POINTER_TYPES : [ddi.value],
+          });
+        }} />
       <div className="button-row">
         <button className="fb-button gray"
           title={t("Select none")}
-          onClick={() => this.props.dispatch(selectPlant(undefined))}>
+          onClick={() => this.props.dispatch(selectPoint(undefined))}>
           {t("Select none")}
         </button>
         <button className="fb-button gray"
           title={t("Select all")}
-          onClick={() => this.props
+          onClick={() => this.props.dispatch(selectPoint(this.allPointUuids))}>
-            .dispatch(selectPlant(this.props.plants.map(p => p.uuid)))}>
           {t("Select all")}
         </button>
       </div>
@@ -85,42 +158,152 @@ export class RawSelectPlants extends React.Component<SelectPlantsProps, {}> {
             : error(t(Content.ERROR_PLANT_TEMPLATE_GROUP))}>
           {t("Create group")}
         </button>
-        <PlantStatusBulkUpdate
+        {this.selectionPointType == "Plant" &&
-          plants={this.props.plants}
+          <PlantStatusBulkUpdate
-          selected={this.selected}
+            plants={this.props.plants}
-          dispatch={this.props.dispatch} />
+            selected={this.selected}
+            dispatch={this.props.dispatch} />}
       </div>
     </div>;
 
-  render() {
+  get filteredPoints() {
-    const { plants, dispatch } = this.props;
+    const { plants, allPoints, selectionPointType, getConfigValue } = this.props;
-    const selectedPlantData =
+    return getFilteredPoints({
-      this.selected.map(uuid => plants.filter(p => p.uuid == uuid)[0]);
+      plants, allPoints, selectionPointType, getConfigValue
+    });
+  }
 
+  get selectedPointData() {
+    const { plants, allPoints, selectionPointType } = this.props;
+    return getSelectedPoints({
+      plants, allPoints, selectionPointType,
+      selected: this.selected,
+    });
+  }
+
+  get allPointUuids() {
+    return this.filteredPoints.map(p => p.uuid);
+  }
+
+  get itemName() {
+    const { value } = POINTER_TYPE_DDI_LOOKUP()[this.selectionPointType];
+    const ITEM_NAME_LOOKUP:
+      Record<string, Record<"singular" | "plural", string>> = {
+      "Plant": { singular: t("plant"), plural: t("plants") },
+      "GenericPointer": { singular: t("point"), plural: t("points") },
+      "Weed": { singular: t("weed"), plural: t("weeds") },
+      "ToolSlot": { singular: t("slot"), plural: t("slots") },
+      "All": { singular: t("item"), plural: t("items") },
+    };
+    return ITEM_NAME_LOOKUP["" + value][
+      this.selected.length == 1 ? "singular" : "plural"];
+  }
+
+  render() {
+    const { dispatch } = this.props;
     return <DesignerPanel panelName={"plant-selection"}
       panelColor={PanelColor.lightGray}>
       <DesignerPanelHeader
         panelName={"plant-selection"}
         panelColor={PanelColor.lightGray}
         blackText={true}
-        title={t("{{length}} plants selected",
+        title={t("{{length}} {{name}} selected",
-          { length: this.selected.length })}
+          { length: this.selected.length, name: this.itemName })}
         backTo={"/app/designer/plants"}
         onBack={unselectPlant(dispatch)}
         description={Content.BOX_SELECT_DESCRIPTION} />
       <this.ActionButtons />
 
       <DesignerPanelContent panelName={"plant-selection"}>
-        {selectedPlantData && selectedPlantData[0] &&
+        {this.selectedPointData.map(p => {
-          selectedPlantData.map(p =>
+          if (p.kind == "PlantTemplate" || p.body.pointer_type == "Plant") {
-            <PlantInventoryItem
+            return <PlantInventoryItem
               key={p.uuid}
-              plant={p}
+              plant={p as TaggedPlant}
               hovered={false}
-              dispatch={dispatch} />)}
+              dispatch={dispatch} />;
+          } else {
+            switch (p.body.pointer_type) {
+              case "GenericPointer":
+                return <PointInventoryItem
+                  key={p.uuid}
+                  tpp={p as TaggedGenericPointer}
+                  hovered={false}
+                  dispatch={this.props.dispatch} />;
+              case "Weed":
+                return <WeedInventoryItem
+                  key={p.uuid}
+                  tpp={p as TaggedWeedPointer}
+                  hovered={false}
+                  dispatch={this.props.dispatch} />;
+              case "ToolSlot":
+                return <ToolSlotInventoryItem
+                  key={p.uuid}
+                  hovered={false}
+                  dispatch={this.props.dispatch}
+                  toolSlot={p as TaggedToolSlotPointer}
+                  isActive={this.props.isActive}
+                  tools={this.props.tools}
+                  xySwap={this.props.xySwap}
+                  quadrant={this.props.quadrant}
+                  hideDropdown={true} />;
+            }
+          }
+        })}
       </DesignerPanelContent>
     </DesignerPanel>;
   }
 }
 
 export const SelectPlants = connect(mapStateToProps)(RawSelectPlants);
+
+export interface GetFilteredPointsProps {
+  selectionPointType: PointType[] | undefined;
+  plants: TaggedPlant[];
+  allPoints: TaggedPoint[];
+  getConfigValue?: GetWebAppConfigValue;
+}
+
+export const getFilteredPoints = (props: GetFilteredPointsProps) => {
+  const selectionPointType = (props.selectionPointType || ["Plant"])
+    .filter(x => !props.getConfigValue ||
+      getVisibleLayers(props.getConfigValue).includes(x));
+  const filterPoints = (p: TaggedPoint) =>
+    selectionPointType.includes(p.body.pointer_type);
+  const plants = selectionPointType.includes("Plant") ? props.plants : [];
+  const otherPoints =
+    props.allPoints
+      .filter(p => p.body.pointer_type != "Plant")
+      .filter(filterPoints);
+  const plantsAndOtherPoints: (TaggedPlant | TaggedPoint)[] = [];
+  return uniq(plantsAndOtherPoints.concat(plants).concat(otherPoints));
+};
+
+interface GetSelectedPointsProps extends GetFilteredPointsProps {
+  selected: UUID[];
+}
+
+export const getSelectedPoints = (props: GetSelectedPointsProps) =>
+  props.selected
+    .map(uuid => getFilteredPoints(props).filter(p => p.uuid == uuid)[0])
+    .filter(p => p);
+
+enum PointerType {
+  Plant = "Plant",
+  GenericPointer = "GenericPointer",
+  Weed = "Weed",
+  ToolSlot = "ToolSlot",
+}
+
+const getVisibleLayers = (getConfigValue: GetWebAppConfigValue): PointType[] => {
+  const showPlants = getConfigValue(BooleanSetting.show_plants);
+  const showPoints = getConfigValue(BooleanSetting.show_points);
+  const showWeeds = getConfigValue(BooleanSetting.show_weeds);
+  const showFarmbot = getConfigValue(BooleanSetting.show_farmbot);
+  return [
+    ...(showPlants ? [PointerType.Plant] : []),
+    ...(showPoints ? [PointerType.GenericPointer] : []),
+    ...(showWeeds ? [PointerType.Weed] : []),
+    ...(showFarmbot ? [PointerType.ToolSlot] : []),
+  ];
+};

frontend/farm_designer/point_groups/__tests__/group_inventory_item_test.tsx

@@ -1,3 +1,14 @@
+jest.mock("../../../api/crud", () => ({
+  destroy: jest.fn(),
+}));
+
+let mockDelMode = false;
+jest.mock("../../../account/dev/dev_support", () => ({
+  DevSettings: {
+    quickDeleteEnabled: () => mockDelMode,
+  }
+}));
+
 import React from "react";
 import {
   GroupInventoryItem, GroupInventoryItemProps,
@@ -6,6 +17,7 @@ import {
   fakePointGroup, fakePlant,
 } from "../../../__test_support__/fake_state/resources";
 import { mount } from "enzyme";
+import { destroy } from "../../../api/crud";
 
 describe("<GroupInventoryItem />", () => {
   const fakeProps = (): GroupInventoryItemProps => ({
@@ -32,4 +44,21 @@ describe("<GroupInventoryItem />", () => {
     expect(x.text()).toContain("woosh");
     expect(x.find(".hovered").length).toBe(1);
   });
+
+  it("opens group", () => {
+    const p = fakeProps();
+    const wrapper = mount(<GroupInventoryItem {...p} />);
+    wrapper.find("div").first().simulate("click");
+    expect(p.onClick).toHaveBeenCalled();
+    expect(destroy).not.toHaveBeenCalledWith(p.group.uuid);
+  });
+
+  it("deletes group", () => {
+    mockDelMode = true;
+    const p = fakeProps();
+    const wrapper = mount(<GroupInventoryItem {...p} />);
+    wrapper.find("div").first().simulate("click");
+    expect(p.onClick).not.toHaveBeenCalled();
+    expect(destroy).toHaveBeenCalledWith(p.group.uuid);
+  });
 });

frontend/farm_designer/point_groups/__tests__/point_group_item_test.tsx

@@ -9,10 +9,11 @@ jest.mock("../../../api/crud", () => ({ overwrite: jest.fn() }));
 import React from "react";
 import {
   PointGroupItem, PointGroupItemProps, genericPointIcon, OTHER_POINT_ICON,
+  genericWeedIcon,
 } from "../point_group_item";
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
 import {
-  fakePlant, fakePointGroup, fakePoint, fakeToolSlot,
+  fakePlant, fakePointGroup, fakePoint, fakeToolSlot, fakeWeed,
 } from "../../../__test_support__/fake_state/resources";
 import {
   maybeGetCachedPlantIcon, setImgSrc,
@@ -22,7 +23,8 @@ import { overwrite } from "../../../api/crud";
 import { cloneDeep } from "lodash";
 import { imgEvent } from "../../../__test_support__/fake_html_events";
 import { error } from "../../../toast/toast";
-import { svgToUrl } from "../../../open_farm/icons";
+import { svgToUrl, DEFAULT_ICON } from "../../../open_farm/icons";
+import { DEFAULT_WEED_ICON } from "../../map/layers/weeds/garden_weed";
 
 describe("<PointGroupItem/>", () => {
   const fakeProps = (): PointGroupItemProps => ({
@@ -61,25 +63,36 @@ describe("<PointGroupItem/>", () => {
     expect(i.setState).toHaveBeenCalledWith({ icon: "fake icon" });
   });
 
-  it("fetches point icon", () => {
+  it("displays default plant icon", () => {
+    const p = fakeProps();
+    p.point = fakePlant();
+    const wrapper = mount<PointGroupItem>(<PointGroupItem {...p} />);
+    expect(wrapper.find("img").props().src).toEqual(DEFAULT_ICON);
+  });
+
+  it("displays point icon", () => {
     const p = fakeProps();
     p.point = fakePoint();
-    const i = new PointGroupItem(p);
+    const wrapper = mount<PointGroupItem>(<PointGroupItem {...p} />);
-    const fakeImgEvent = imgEvent();
+    expect(wrapper.find("img").props().src).toEqual(
-    i.maybeGetCachedIcon(fakeImgEvent);
-    expect(maybeGetCachedPlantIcon).not.toHaveBeenCalled();
-    expect(setImgSrc).toHaveBeenCalledWith(expect.any(Object),
       svgToUrl(genericPointIcon(undefined)));
   });
 
-  it("fetches other icon", () => {
+  it("displays weed icon", () => {
+    const p = fakeProps();
+    p.point = fakeWeed();
+    p.point.body.meta.color = undefined;
+    const wrapper = mount<PointGroupItem>(<PointGroupItem {...p} />);
+    expect(wrapper.find("img").first().props().src).toEqual(DEFAULT_WEED_ICON);
+    expect(wrapper.find("img").last().props().src).toEqual(
+      svgToUrl(genericWeedIcon(undefined)));
+  });
+
+  it("displays other icon", () => {
     const p = fakeProps();
     p.point = fakeToolSlot();
-    const i = new PointGroupItem(p);
+    const wrapper = mount<PointGroupItem>(<PointGroupItem {...p} />);
-    const fakeImgEvent = imgEvent();
+    expect(wrapper.find("img").props().src).toEqual(
-    i.maybeGetCachedIcon(fakeImgEvent);
-    expect(maybeGetCachedPlantIcon).not.toHaveBeenCalled();
-    expect(setImgSrc).toHaveBeenCalledWith(expect.any(Object),
       svgToUrl(OTHER_POINT_ICON));
   });
 

frontend/farm_designer/point_groups/criteria/interfaces.ts

@@ -1,14 +1,14 @@
-import { TaggedPointGroup } from "farmbot";
+import { TaggedPointGroup, PointType } from "farmbot";
-import { PointGroup, Point } from "farmbot/dist/resources/api_resources";
+import { PointGroup } from "farmbot/dist/resources/api_resources";
 
 export type PointGroupCriteria = PointGroup["criteria"];
 export type StringEqCriteria = PointGroupCriteria["string_eq"];
-export type PointerType = Point["pointer_type"];
+export type PointerType = PointType;
 export type StrAndNumCriteriaKeys = (keyof Omit<PointGroupCriteria, "day">)[];
 export type EqCriteria<T> = Record<string, T[] | undefined>;
 
 export const POINTER_TYPES: PointerType[] =
-  ["Plant", "GenericPointer", "ToolSlot"];
+  ["Plant", "GenericPointer", "ToolSlot", "Weed"];
 
 export const DEFAULT_CRITERIA: Readonly<PointGroupCriteria> = {
   day: { op: "<", days_ago: 0 },

frontend/farm_designer/point_groups/group_inventory_item.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import { TaggedPointGroup, TaggedPoint } from "farmbot";
 import { t } from "../../i18next_wrapper";
 import { pointsSelectedByGroup } from "./criteria";
+import { ErrorBoundary } from "../../error_boundary";
+import { DevSettings } from "../../account/dev/dev_support";
+import { destroy } from "../../api/crud";
 
 export interface GroupInventoryItemProps {
   group: TaggedPointGroup;
@@ -12,15 +15,30 @@ export interface GroupInventoryItemProps {
 }
 
 export function GroupInventoryItem(props: GroupInventoryItemProps) {
-  const count = pointsSelectedByGroup(props.group, props.allPoints).length;
+  const { group } = props;
+  const delMode = DevSettings.quickDeleteEnabled();
   return <div
-    onClick={props.onClick}
+    onClick={delMode ? () => props.dispatch(destroy(group.uuid)) : props.onClick}
-    className={`group-search-item ${props.hovered ? "hovered" : ""}`}>
+    className={["group-search-item",
+      props.hovered ? "hovered" : "",
+      delMode ? "quick-del" : ""].join(" ")}>
     <span className="group-search-item-name">
-      {props.group.body.name}
+      {group.body.name}
     </span>
-    <i className="group-item-count">
+    <ErrorBoundary fallback={<i className="group-item-count">{t("? items")}</i>}>
-      {t("{{count}} items", { count })}
+      <GroupItemCount group={group} allPoints={props.allPoints} />
-    </i>
+    </ErrorBoundary>
   </div>;
 }
+
+interface GroupItemCountProps {
+  group: TaggedPointGroup;
+  allPoints: TaggedPoint[];
+}
+
+const GroupItemCount = (props: GroupItemCountProps) => {
+  const count = pointsSelectedByGroup(props.group, props.allPoints).length;
+  return <i className="group-item-count">
+    {t("{{count}} items", { count })}
+  </i>;
+};

frontend/farm_designer/point_groups/point_group_item.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { DEFAULT_ICON, svgToUrl } from "../../open_farm/icons";
-import { setImgSrc, maybeGetCachedPlantIcon } from "../../open_farm/cached_crop";
+import { maybeGetCachedPlantIcon } from "../../open_farm/cached_crop";
 import { setHoveredPlant } from "../map/actions";
 import { TaggedPointGroup, uuid, TaggedPoint } from "farmbot";
 import { overwrite } from "../../api/crud";
 import { error } from "../../toast/toast";
 import { t } from "../../i18next_wrapper";
+import { DEFAULT_WEED_ICON } from "../map/layers/weeds/garden_weed";
 
 export interface PointGroupItemProps {
   point: TaggedPoint;
@@ -25,9 +26,23 @@ const removePoint = (group: TaggedPointGroup, pointId: number) => {
 
 export const genericPointIcon = (color: string | undefined) =>
   `<svg xmlns='http://www.w3.org/2000/svg'
-    fill='none' stroke-width='1.5' stroke='${color || "gray"}'>
+    fill='none' stroke-width='1.5' stroke='${color || "green"}'>
     <circle cx='15' cy='15' r='12' />
     <circle cx='15' cy='15' r='2' />
+  </svg>`;
+
+export const genericWeedIcon = (color: string | undefined) =>
+  `<svg xmlns='http://www.w3.org/2000/svg'>
+      <defs>
+        <radialGradient id='WeedGradient'>
+          <stop offset='90%' stop-color='${color || "red"}'
+            stop-opacity='0.25'></stop>
+          <stop offset='100%' stop-color='${color || "red"}'
+            stop-opacity='0'></stop>
+        </radialGradient>
+      </defs>
+      <circle id='weed-radius' cx='15' cy='15' r='14'
+        fill='url(#WeedGradient)' opacity='0.5'></circle>
     </svg>`;
 
 export const OTHER_POINT_ICON =
@@ -66,36 +81,46 @@ export class PointGroupItem
 
   maybeGetCachedIcon = (e: React.SyntheticEvent<HTMLImageElement>) => {
     const img = e.currentTarget;
-    switch (this.props.point.body.pointer_type) {
+    if (this.props.point.body.pointer_type == "Plant") {
-      case "Plant":
+      const slug = this.props.point.body.openfarm_slug;
-        const slug = this.props.point.body.openfarm_slug;
+      maybeGetCachedPlantIcon(slug, img, this.setIconState);
-        maybeGetCachedPlantIcon(slug, img, this.setIconState);
-        break;
-      case "GenericPointer":
-        const { color } = this.props.point.body.meta;
-        const pointIcon = svgToUrl(genericPointIcon(color));
-        setImgSrc(img, pointIcon);
-        break;
-      default:
-        const otherIcon = svgToUrl(OTHER_POINT_ICON);
-        setImgSrc(img, otherIcon);
-        break;
     }
   };
 
+  get initIcon() {
+    switch (this.props.point.body.pointer_type) {
+      case "Plant":
+        return DEFAULT_ICON;
+      case "GenericPointer":
+        const { color } = this.props.point.body.meta;
+        return svgToUrl(genericPointIcon(color));
+      case "Weed":
+        const weedColor = this.props.point.body.meta.color;
+        return svgToUrl(genericWeedIcon(weedColor));
+      default:
+        return svgToUrl(OTHER_POINT_ICON);
+    }
+  }
+
   render() {
     return <span
       key={this.key}
+      className={"group-item-icon"}
       onMouseEnter={this.enter}
       onMouseLeave={this.leave}
       onClick={this.click}>
+      {this.props.point.body.pointer_type == "Weed" &&
+        <img className={"weed-icon"}
+          src={DEFAULT_WEED_ICON}
+          width={32}
+          height={32} />}
       <img
         style={{
           border: this.criteriaIcon ? "1px solid gray" : "none",
           borderRadius: "5px",
           background: this.props.hovered ? "lightgray" : "none",
         }}
-        src={DEFAULT_ICON}
+        src={this.initIcon}
         onLoad={this.maybeGetCachedIcon}
         width={32}
         height={32} />

frontend/farm_designer/points/__tests__/create_points_test.tsx

@@ -23,30 +23,29 @@ import { deletePoints } from "../../../farmware/weed_detector/actions";
 import { Actions } from "../../../constants";
 import { clickButton } from "../../../__test_support__/helpers";
 import { fakeState } from "../../../__test_support__/fake_state";
-import { CurrentPointPayl } from "../../interfaces";
+import { DrawnPointPayl } from "../../interfaces";
 import { inputEvent } from "../../../__test_support__/fake_html_events";
 import { cloneDeep } from "lodash";
 
-const FAKE_POINT: CurrentPointPayl =
+const FAKE_POINT: DrawnPointPayl =
   ({ name: "My Point", cx: 13, cy: 22, r: 345, color: "red" });
 
 describe("mapStateToProps", () => {
-  it("maps state to props", () => {
+  it("maps state to props: drawn point", () => {
     const state = fakeState();
-    state
+    state.resources.consumers.farm_designer.drawnPoint = FAKE_POINT;
-      .resources
+    const props = mapStateToProps(state);
-      .consumers
+    expect(props.drawnPoint?.cx).toEqual(13);
-      .farm_designer
+    expect(props.drawnPoint?.cy).toEqual(22);
-      .currentPoint = FAKE_POINT;
+  });
-    const result = mapStateToProps(state);
+
-    const { currentPoint } = result;
+  it("maps state to props: drawn weed", () => {
-    expect(currentPoint).toBeTruthy();
+    const state = fakeState();
-    if (currentPoint) {
+    state.resources.consumers.farm_designer.drawnPoint = undefined;
-      expect(currentPoint.cx).toEqual(13);
+    state.resources.consumers.farm_designer.drawnWeed = FAKE_POINT;
-      expect(currentPoint.cy).toEqual(22);
+    const props = mapStateToProps(state);
-    } else {
+    expect(props.drawnPoint?.cx).toEqual(13);
-      fail("Nope");
+    expect(props.drawnPoint?.cy).toEqual(22);
-    }
   });
 });
 
@@ -57,17 +56,11 @@ describe("<CreatePoints />", () => {
 
   const fakeProps = (): CreatePointsProps => ({
     dispatch: jest.fn(),
-    currentPoint: undefined,
+    drawnPoint: undefined,
     deviceY: 1.23,
     deviceX: 3.21
   });
 
-  const fakeInstance = () => {
-    const props = fakeProps();
-    props.currentPoint = FAKE_POINT;
-    return new CreatePoints(props);
-  };
-
   it("renders for points", () => {
     mockPath = "/app/designer";
     const wrapper = mount(<CreatePoints {...fakeProps()} />);
@@ -83,13 +76,15 @@ describe("<CreatePoints />", () => {
   });
 
   it("updates specific fields", () => {
-    const i = fakeInstance();
+    const p = fakeProps();
+    p.drawnPoint = FAKE_POINT;
+    const i = new CreatePoints(p);
     i.updateValue("color")(inputEvent("cheerful hue"));
-    expect(i.props.currentPoint).toBeTruthy();
+    expect(i.props.drawnPoint).toBeTruthy();
     const expected = cloneDeep(FAKE_POINT);
     expected.color = "cheerful hue";
     expect(i.props.dispatch).toHaveBeenCalledWith({
-      type: "SET_CURRENT_POINT_DATA",
+      type: "SET_DRAWN_POINT_DATA",
       payload: expected,
     });
   });
@@ -103,25 +98,27 @@ describe("<CreatePoints />", () => {
   });
 
   it("loads default point data", () => {
-    const i = fakeInstance();
+    const p = fakeProps();
+    p.drawnPoint = FAKE_POINT;
+    const i = new CreatePoints(p);
     i.loadDefaultPoint();
     expect(i.props.dispatch).toHaveBeenCalledWith({
-      type: "SET_CURRENT_POINT_DATA",
+      type: "SET_DRAWN_POINT_DATA",
       payload: { name: "Created Point", color: "green", cx: 1, cy: 1, r: 15 },
     });
   });
 
-  it("updates point name", () => {
+  it("updates weed name", () => {
     mockPath = "/app/designer/weeds/add";
     const p = fakeProps();
-    p.currentPoint = { cx: 0, cy: 0, r: 100 };
+    p.drawnPoint = { cx: 0, cy: 0, r: 100 };
     const panel = mount<CreatePoints>(<CreatePoints {...p} />);
     const wrapper = shallow(panel.instance().PointProperties());
     wrapper.find("BlurableInput").first().simulate("commit", {
       currentTarget: { value: "new name" }
     });
     expect(p.dispatch).toHaveBeenCalledWith({
-      type: Actions.SET_CURRENT_POINT_DATA, payload: {
+      type: Actions.SET_DRAWN_WEED_DATA, payload: {
         cx: 0, cy: 0, r: 100, name: "new name", color: "red",
       }
     });
@@ -148,7 +145,7 @@ describe("<CreatePoints />", () => {
     expect(initSave).toHaveBeenCalledWith("Point", {
       meta: { color: "red", created_by: "farm-designer", type: "weed" },
       name: "Created Weed",
-      pointer_type: "GenericPointer",
+      pointer_type: "Weed",
       radius: 30, x: 10, y: 20, z: 0,
     });
   });
@@ -167,7 +164,8 @@ describe("<CreatePoints />", () => {
     p.dispatch = jest.fn(x => x());
     button.simulate("click");
     expect(deletePoints).toHaveBeenCalledWith("points", {
-      created_by: "farm-designer", type: "point"
+      pointer_type: "GenericPointer",
+      meta: { created_by: "farm-designer" }
     });
   });
 
@@ -186,26 +184,41 @@ describe("<CreatePoints />", () => {
     p.dispatch = jest.fn(x => x());
     button.simulate("click");
     expect(deletePoints).toHaveBeenCalledWith("points", {
-      created_by: "farm-designer", type: "weed"
+      pointer_type: "Weed",
+      meta: { created_by: "farm-designer" }
     });
   });
 
-  it("changes color", () => {
+  it("changes point color", () => {
     const p = fakeProps();
-    p.currentPoint = { cx: 0, cy: 0, r: 0 };
+    p.drawnPoint = { cx: 0, cy: 0, r: 0 };
     const wrapper = mount<CreatePoints>(<CreatePoints {...p} />);
     const PP = wrapper.instance().PointProperties;
     const component = shallow(<PP />);
     component.find("ColorPicker").simulate("change", "red");
     expect(p.dispatch).toHaveBeenCalledWith({
       payload: { color: "red", cx: 0, cy: 0, r: 0 },
-      type: Actions.SET_CURRENT_POINT_DATA
+      type: Actions.SET_DRAWN_POINT_DATA
+    });
+  });
+
+  it("changes weed color", () => {
+    mockPath = "/app/designer/weeds/add";
+    const p = fakeProps();
+    p.drawnPoint = { cx: 0, cy: 0, r: 0 };
+    const wrapper = mount<CreatePoints>(<CreatePoints {...p} />);
+    const PP = wrapper.instance().PointProperties;
+    const component = shallow(<PP />);
+    component.find("ColorPicker").simulate("change", "red");
+    expect(p.dispatch).toHaveBeenCalledWith({
+      payload: { color: "red", cx: 0, cy: 0, r: 0 },
+      type: Actions.SET_DRAWN_WEED_DATA
     });
   });
 
   it("updates value", () => {
     const p = fakeProps();
-    p.currentPoint = { cx: 0, cy: 0, r: 0 };
+    p.drawnPoint = { cx: 0, cy: 0, r: 0 };
     const wrapper = shallow<CreatePoints>(<CreatePoints {...p} />);
     const PP = wrapper.instance().PointProperties;
     const component = shallow(<PP />);
@@ -214,13 +227,13 @@ describe("<CreatePoints />", () => {
     });
     expect(p.dispatch).toHaveBeenCalledWith({
       payload: { cx: 10, cy: 0, r: 0, color: "green" },
-      type: Actions.SET_CURRENT_POINT_DATA
+      type: Actions.SET_DRAWN_POINT_DATA
     });
   });
 
   it("fills the state with point data", () => {
     const p = fakeProps();
-    p.currentPoint = { cx: 1, cy: 2, r: 3, color: "blue" };
+    p.drawnPoint = { cx: 1, cy: 2, r: 3, color: "blue" };
     const wrapper = shallow<CreatePoints>(<CreatePoints {...p} />);
     const i = wrapper.instance();
     expect(i.state).toEqual({});
@@ -239,7 +252,7 @@ describe("<CreatePoints />", () => {
     jest.clearAllMocks();
     wrapper.unmount();
     expect(p.dispatch).toHaveBeenCalledWith({
-      type: Actions.SET_CURRENT_POINT_DATA,
+      type: Actions.SET_DRAWN_POINT_DATA,
       payload: undefined
     });
   });

frontend/farm_designer/points/__tests__/point_inventory_item_test.tsx

@@ -1,4 +1,12 @@
-jest.mock("../../../history", () => ({ push: jest.fn() }));
+let mockPath = "/app/designer/points";
+jest.mock("../../../history", () => ({
+  push: jest.fn(),
+  getPathArray: () => mockPath.split("/"),
+}));
+
+jest.mock("../../map/actions", () => ({
+  mapPointClickAction: jest.fn(() => jest.fn()),
+}));
 
 import * as React from "react";
 import { shallow } from "enzyme";
@@ -8,21 +16,41 @@ import {
 import { fakePoint } from "../../../__test_support__/fake_state/resources";
 import { push } from "../../../history";
 import { Actions } from "../../../constants";
+import { mapPointClickAction } from "../../map/actions";
 
 describe("<PointInventoryItem> />", () => {
   const fakeProps = (): PointInventoryItemProps => ({
     tpp: fakePoint(),
     dispatch: jest.fn(),
     hovered: false,
-    navName: "points",
   });
 
   it("navigates to point", () => {
+    mockPath = "/app/designer/points";
     const p = fakeProps();
     p.tpp.body.id = 1;
     const wrapper = shallow(<PointInventoryItem {...p} />);
     wrapper.simulate("click");
+    expect(mapPointClickAction).not.toHaveBeenCalled();
     expect(push).toHaveBeenCalledWith("/app/designer/points/1");
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.TOGGLE_HOVERED_POINT,
+      payload: [p.tpp.uuid],
+    });
+  });
+
+  it("removes item in box select mode", () => {
+    mockPath = "/app/designer/plants/select";
+    const p = fakeProps();
+    const wrapper = shallow(<PointInventoryItem {...p} />);
+    wrapper.simulate("click");
+    expect(mapPointClickAction).toHaveBeenCalledWith(expect.any(Function),
+      p.tpp.uuid);
+    expect(push).not.toHaveBeenCalled();
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.TOGGLE_HOVERED_POINT,
+      payload: undefined,
+    });
   });
 
   it("hovers point", () => {

frontend/farm_designer/points/create_points.tsx

@@ -11,10 +11,10 @@ import {
   BlurableInput,
   ColorPicker,
 } from "../../ui/index";
-import { CurrentPointPayl } from "../interfaces";
+import { DrawnPointPayl } from "../interfaces";
 import { Actions, Content } from "../../constants";
 import { deletePoints } from "../../farmware/weed_detector/actions";
-import { GenericPointer } from "farmbot/dist/resources/api_resources";
+import { GenericPointer, WeedPointer } from "farmbot/dist/resources/api_resources";
 import {
   DesignerPanel,
   DesignerPanelHeader,
@@ -29,9 +29,10 @@ import { success } from "../../toast/toast";
 
 export function mapStateToProps(props: Everything): CreatePointsProps {
   const { position } = props.bot.hardware.location_data;
+  const { drawnPoint, drawnWeed } = props.resources.consumers.farm_designer;
   return {
     dispatch: props.dispatch,
-    currentPoint: props.resources.consumers.farm_designer.currentPoint,
+    drawnPoint: drawnPoint || drawnWeed,
     deviceX: position.x || 0,
     deviceY: position.y || 0,
   };
@@ -39,14 +40,14 @@ export function mapStateToProps(props: Everything): CreatePointsProps {
 
 export interface CreatePointsProps {
   dispatch: Function;
-  currentPoint: CurrentPointPayl | undefined;
+  drawnPoint: DrawnPointPayl | undefined;
   deviceX: number;
   deviceY: number;
 }
 
-type CreatePointsState = Partial<CurrentPointPayl>;
+type CreatePointsState = Partial<DrawnPointPayl>;
 
-const DEFAULTS: CurrentPointPayl = {
+const DEFAULTS: DrawnPointPayl = {
   name: undefined,
   cx: 1,
   cy: 1,
@@ -61,10 +62,10 @@ export class RawCreatePoints
     this.state = {};
   }
 
-  attr = <T extends (keyof CurrentPointPayl & keyof CreatePointsState)>(key: T,
+  attr = <T extends (keyof DrawnPointPayl & keyof CreatePointsState)>(key: T,
-    fallback = DEFAULTS[key]): CurrentPointPayl[T] => {
+    fallback = DEFAULTS[key]): DrawnPointPayl[T] => {
-    const p = this.props.currentPoint;
+    const p = this.props.drawnPoint;
-    const userValue = this.state[key] as CurrentPointPayl[T] | undefined;
+    const userValue = this.state[key] as DrawnPointPayl[T] | undefined;
     const propValue = p ? p[key] : fallback;
     if (typeof userValue === "undefined") {
       return propValue;
@@ -81,7 +82,7 @@ export class RawCreatePoints
 
   get defaultColor() { return this.panel == "weeds" ? "red" : "green"; }
 
-  getPointData = (): CurrentPointPayl => {
+  getPointData = (): DrawnPointPayl => {
     return {
       name: this.attr("name"),
       cx: this.attr("cx"),
@@ -93,7 +94,9 @@ export class RawCreatePoints
 
   cancel = () => {
     this.props.dispatch({
-      type: Actions.SET_CURRENT_POINT_DATA,
+      type: this.panel == "weeds"
+        ? Actions.SET_DRAWN_WEED_DATA
+        : Actions.SET_DRAWN_POINT_DATA,
       payload: undefined
     });
     this.setState({
@@ -106,14 +109,16 @@ export class RawCreatePoints
 
   loadDefaultPoint = () => {
     this.props.dispatch({
-      type: Actions.SET_CURRENT_POINT_DATA,
+      type: this.panel == "weeds"
+        ? Actions.SET_DRAWN_WEED_DATA
+        : Actions.SET_DRAWN_POINT_DATA,
       payload: {
         name: this.defaultName,
         cx: DEFAULTS.cx,
         cy: DEFAULTS.cy,
         r: DEFAULTS.r,
         color: this.defaultColor,
-      } as CurrentPointPayl
+      } as DrawnPointPayl
     });
   }
 
@@ -129,7 +134,7 @@ export class RawCreatePoints
   updateValue = (key: keyof CreatePointsState) => {
     return (e: React.SyntheticEvent<HTMLInputElement>) => {
       const { value } = e.currentTarget;
-      if (this.props.currentPoint) {
+      if (this.props.drawnPoint) {
         const point = this.getPointData();
         switch (key) {
           case "name":
@@ -143,7 +148,9 @@ export class RawCreatePoints
             point[key] = intValue;
         }
         this.props.dispatch({
-          type: Actions.SET_CURRENT_POINT_DATA,
+          type: this.panel == "weeds"
+            ? Actions.SET_DRAWN_WEED_DATA
+            : Actions.SET_DRAWN_POINT_DATA,
           payload: point
         });
       }
@@ -155,7 +162,9 @@ export class RawCreatePoints
     const point = this.getPointData();
     point.color = color;
     this.props.dispatch({
-      type: Actions.SET_CURRENT_POINT_DATA,
+      type: this.panel == "weeds"
+        ? Actions.SET_DRAWN_WEED_DATA
+        : Actions.SET_DRAWN_POINT_DATA,
       payload: point
     });
   }
@@ -163,8 +172,8 @@ export class RawCreatePoints
   get panel() { return getPathArray()[3] || "points"; }
 
   createPoint = () => {
-    const body: GenericPointer = {
+    const body: GenericPointer | WeedPointer = {
-      pointer_type: "GenericPointer",
+      pointer_type: this.panel == "weeds" ? "Weed" : "GenericPointer",
       name: this.attr("name") || this.defaultName,
       meta: {
         color: this.attr("color") || this.defaultColor,
@@ -247,8 +256,9 @@ export class RawCreatePoints
       </button>
     </Row>
 
-  DeleteAllPoints = (type: "point" | "weed") =>
+  DeleteAllPoints = (type: "point" | "weed") => {
-    <Row>
+    const meta = { created_by: "farm-designer" };
+    return <Row>
       <div className="delete-row">
         <label>{t("delete")}</label>
         <p>{type === "weed"
@@ -261,7 +271,8 @@ export class RawCreatePoints
               ? t("Delete all the weeds you have created?")
               : t("Delete all the points you have created?"))) {
               this.props.dispatch(deletePoints("points", {
-                created_by: "farm-designer", type,
+                pointer_type: type === "weed" ? "Weed" : "GenericPointer",
+                meta,
               }));
               this.cancel();
             }
@@ -271,7 +282,8 @@ export class RawCreatePoints
             : t("Delete all created points")}
         </button>
       </div>
-    </Row>
+    </Row>;
+  };
 
   render() {
     const panelType = this.panel == "weeds" ? Panel.Weeds : Panel.Points;

frontend/farm_designer/points/point_edit_actions.tsx

@@ -3,16 +3,20 @@ import { t } from "../../i18next_wrapper";
 import { getDevice } from "../../device";
 import { destroy, edit, save } from "../../api/crud";
 import { ResourceColor } from "../../interfaces";
-import { TaggedGenericPointer } from "farmbot";
+import { TaggedGenericPointer, TaggedWeedPointer } from "farmbot";
 import { ListItem } from "../plants/plant_panel";
 import { round } from "lodash";
 import { Row, Col, BlurableInput, ColorPicker } from "../../ui";
 import { parseIntInput } from "../../util";
 import { UUID } from "../../resources/interfaces";
 
+type PointUpdate =
+  Partial<TaggedGenericPointer["body"] | TaggedWeedPointer["body"]>;
+
 export const updatePoint =
-  (point: TaggedGenericPointer | undefined, dispatch: Function) =>
+  (point: TaggedGenericPointer | TaggedWeedPointer | undefined,
-    (update: Partial<TaggedGenericPointer["body"]>) => {
+    dispatch: Function) =>
+    (update: PointUpdate) => {
       if (point) {
         dispatch(edit(point, update));
         dispatch(save(point.uuid));
@@ -20,18 +24,21 @@ export const updatePoint =
     };
 
 export interface EditPointPropertiesProps {
-  point: TaggedGenericPointer;
+  point: TaggedGenericPointer | TaggedWeedPointer;
-  updatePoint(update: Partial<TaggedGenericPointer["body"]>): void;
+  updatePoint(update: PointUpdate): void;
 }
 
 export const EditPointProperties = (props: EditPointPropertiesProps) =>
   <ul>
     <li>
-      <div className={"point-name-input"}>
+      <Row>
         <EditPointName
           name={props.point.body.name}
           updatePoint={props.updatePoint} />
-      </div>
+        <EditPointColor
+          color={props.point.body.meta.color}
+          updatePoint={props.updatePoint} />
+      </Row>
     </li>
     <ListItem name={t("Location")}>
       <EditPointLocation
@@ -43,11 +50,6 @@ export const EditPointProperties = (props: EditPointPropertiesProps) =>
         radius={props.point.body.radius}
         updatePoint={props.updatePoint} />
     </ListItem>
-    <ListItem name={t("Color")}>
-      <EditPointColor
-        color={props.point.body.meta.color}
-        updatePoint={props.updatePoint} />
-    </ListItem>
   </ul>;
 
 export interface PointActionsProps {
@@ -76,13 +78,13 @@ export const PointActions = ({ x, y, z, uuid, dispatch }: PointActionsProps) =>
   </div>;
 
 export interface EditPointNameProps {
-  updatePoint(update: Partial<TaggedGenericPointer["body"]>): void;
+  updatePoint(update: PointUpdate): void;
   name: string;
 }
 
 export const EditPointName = (props: EditPointNameProps) =>
-  <Row>
+  <div className={"point-name-input"}>
-    <Col xs={12}>
+    <Col xs={10}>
       <label>{t("Name")}</label>
       <BlurableInput
         type="text"
@@ -90,10 +92,10 @@ export const EditPointName = (props: EditPointNameProps) =>
         value={props.name}
         onCommit={e => props.updatePoint({ name: e.currentTarget.value })} />
     </Col>
-  </Row>;
+  </div>;
 
 export interface EditPointLocationProps {
-  updatePoint(update: Partial<TaggedGenericPointer["body"]>): void;
+  updatePoint(update: PointUpdate): void;
   xyLocation: Record<"x" | "y", number>;
 }
 
@@ -114,7 +116,7 @@ export const EditPointLocation = (props: EditPointLocationProps) =>
   </Row>;
 
 export interface EditPointRadiusProps {
-  updatePoint(update: Partial<TaggedGenericPointer["body"]>): void;
+  updatePoint(update: PointUpdate): void;
   radius: number;
 }
 
@@ -134,13 +136,15 @@ export const EditPointRadius = (props: EditPointRadiusProps) =>
   </Row>;
 
 export interface EditPointColorProps {
-  updatePoint(update: Partial<TaggedGenericPointer["body"]>): void;
+  updatePoint(update: PointUpdate): void;
   color: string | undefined;
 }
 
 export const EditPointColor = (props: EditPointColorProps) =>
-  <Row>
+  <div className={"point-color-input"}>
-    <ColorPicker
+    <Col xs={2}>
-      current={(props.color || "green") as ResourceColor}
+      <ColorPicker
-      onChange={color => props.updatePoint({ meta: { color } })} />
+        current={(props.color || "green") as ResourceColor}
-  </Row>;
+        onChange={color => props.updatePoint({ meta: { color } })} />
+    </Col>
+  </div>;

frontend/farm_designer/points/point_inventory.tsx

@@ -13,7 +13,6 @@ import {
 import { selectAllGenericPointers } from "../../resources/selectors";
 import { TaggedGenericPointer } from "farmbot";
 import { t } from "../../i18next_wrapper";
-import { isAWeed } from "./weeds_inventory";
 
 export interface PointsProps {
   genericPoints: TaggedGenericPointer[];
@@ -29,8 +28,7 @@ export function mapStateToProps(props: Everything): PointsProps {
   const { hoveredPoint } = props.resources.consumers.farm_designer;
   return {
     genericPoints: selectAllGenericPointers(props.resources.index)
-      .filter(x => !x.body.discarded_at)
+      .filter(x => !x.body.discarded_at),
-      .filter(x => !isAWeed(x.body.name, x.body.meta.type)),
     dispatch: props.dispatch,
     hoveredPoint,
   };
@@ -65,7 +63,6 @@ export class RawPoints extends React.Component<PointsProps, PointsState> {
               .includes(this.state.searchTerm.toLowerCase()))
             .map(p => <PointInventoryItem
               key={p.uuid}
-              navName={"points"}
               tpp={p}
               hovered={this.props.hoveredPoint === p.uuid}
               dispatch={this.props.dispatch} />)}

frontend/farm_designer/points/point_inventory_item.tsx

@@ -3,12 +3,15 @@ import { TaggedGenericPointer } from "farmbot";
 import { Saucer } from "../../ui";
 import { Actions } from "../../constants";
 import { push } from "../../history";
+import { t } from "../../i18next_wrapper";
+import { getMode } from "../map/util";
+import { Mode } from "../map/interfaces";
+import { mapPointClickAction } from "../map/actions";
 
 export interface PointInventoryItemProps {
   tpp: TaggedGenericPointer;
   dispatch: Function;
   hovered: boolean;
-  navName: "points" | "weeds";
 }
 
 // The individual points that show up in the farm designer sub nav.
@@ -29,13 +32,15 @@ export class PointInventoryItem extends
     };
 
     const click = () => {
-      push(`/app/designer/${this.props.navName}/${pointId}`);
+      if (getMode() == Mode.boxSelect) {
-      dispatch({ type: Actions.TOGGLE_HOVERED_POINT, payload: [tpp.uuid] });
+        mapPointClickAction(dispatch, tpp.uuid)();
+        toggle("leave");
+      } else {
+        push(`/app/designer/points/${pointId}`);
+        dispatch({ type: Actions.TOGGLE_HOVERED_POINT, payload: [tpp.uuid] });
+      }
     };
 
-    // Name given from OpenFarm's API.
-    const label = point.name || "Unknown plant";
-
     return <div
       className={`point-search-item ${this.props.hovered ? "hovered" : ""}`}
       key={pointId}
@@ -44,7 +49,7 @@ export class PointInventoryItem extends
       onClick={click}>
       <Saucer color={point.meta.color || "green"} />
       <span className="point-search-item-name">
-        {label}
+        {point.name || t("Untitled point")}
       </span>
       <p className="point-search-item-info">
         <i>{`(${point.x}, ${point.y}) ⌀${point.radius * 2}`}</i>

frontend/farm_designer/reducer.ts

@@ -1,14 +1,16 @@
-import { CropLiveSearchResult, CurrentPointPayl } from "./interfaces";
+import { CropLiveSearchResult, DrawnPointPayl, DrawnWeedPayl } from "./interfaces";
 import { generateReducer } from "../redux/generate_reducer";
 import { DesignerState, HoveredPlantPayl } from "./interfaces";
 import { cloneDeep } from "lodash";
-import { TaggedResource } from "farmbot";
+import { TaggedResource, PointType } from "farmbot";
 import { Actions } from "../constants";
 import { BotPosition } from "../devices/interfaces";
 import { PointGroupSortType } from "farmbot/dist/resources/api_resources";
+import { UUID } from "../resources/interfaces";
 
 export const initialState: DesignerState = {
-  selectedPlants: undefined,
+  selectedPoints: undefined,
+  selectionPointType: undefined,
   hoveredPlant: {
     plantUUID: undefined,
     icon: ""
@@ -20,7 +22,8 @@ export const initialState: DesignerState = {
   cropSearchResults: [],
   cropSearchInProgress: false,
   chosenLocation: { x: undefined, y: undefined, z: undefined },
-  currentPoint: undefined,
+  drawnPoint: undefined,
+  drawnWeed: undefined,
   openedSavedGarden: undefined,
   tryGroupSortType: undefined,
   editGroupAreaInMap: false,
@@ -41,10 +44,15 @@ export const designer = generateReducer<DesignerState>(initialState)
     s.cropSearchInProgress = false;
     return s;
   })
-  .add<string[] | undefined>(Actions.SELECT_PLANT, (s, { payload }) => {
+  .add<UUID[] | undefined>(Actions.SELECT_POINT, (s, { payload }) => {
-    s.selectedPlants = payload;
+    s.selectedPoints = payload;
     return s;
   })
+  .add<PointType[] | undefined>(
+    Actions.SET_SELECTION_POINT_TYPE, (s, { payload }) => {
+      s.selectionPointType = payload;
+      return s;
+    })
   .add<HoveredPlantPayl>(Actions.TOGGLE_HOVERED_PLANT, (s, { payload }) => {
     s.hoveredPlant = payload;
     return s;
@@ -61,12 +69,20 @@ export const designer = generateReducer<DesignerState>(initialState)
     s.hoveredToolSlot = payload;
     return s;
   })
-  .add<CurrentPointPayl | undefined>(
+  .add<DrawnPointPayl | undefined>(
-    Actions.SET_CURRENT_POINT_DATA, (s, { payload }) => {
+    Actions.SET_DRAWN_POINT_DATA, (s, { payload }) => {
       const { color } = (!payload || !payload.color) ?
-        (s.currentPoint || { color: "green" }) : payload;
+        (s.drawnPoint || { color: "green" }) : payload;
-      s.currentPoint = payload;
+      s.drawnPoint = payload;
-      s.currentPoint && (s.currentPoint.color = color);
+      s.drawnPoint && (s.drawnPoint.color = color);
+      return s;
+    })
+  .add<DrawnWeedPayl | undefined>(
+    Actions.SET_DRAWN_WEED_DATA, (s, { payload }) => {
+      const { color } = (!payload || !payload.color) ?
+        (s.drawnWeed || { color: "red" }) : payload;
+      s.drawnWeed = payload;
+      s.drawnWeed && (s.drawnWeed.color = color);
       return s;
     })
   .add<CropLiveSearchResult[]>(Actions.OF_SEARCH_RESULTS_OK, (s, a) => {
@@ -75,7 +91,7 @@ export const designer = generateReducer<DesignerState>(initialState)
     return s;
   })
   .add<TaggedResource>(Actions.DESTROY_RESOURCE_OK, (s) => {
-    s.selectedPlants = undefined;
+    s.selectedPoints = undefined;
     s.hoveredPlant = { plantUUID: undefined, icon: "" };
     return s;
   })

frontend/farm_designer/saved_gardens/__tests__/saved_gardens_test.tsx

@@ -125,7 +125,7 @@ describe("<SavedGardenHUD />", () => {
     clickButton(wrapper, 1, "edit");
     expect(history.push).toHaveBeenCalledWith("/app/designer/plants");
     expect(dispatch).toHaveBeenCalledWith({
-      type: Actions.SELECT_PLANT,
+      type: Actions.SELECT_POINT,
       payload: undefined
     });
   });

frontend/farm_designer/state_to_props.ts

@@ -14,6 +14,7 @@ import {
   selectAllPointGroups,
   getDeviceAccountSettings,
   maybeFindToolById,
+  selectAllWeedPointers,
 } from "../resources/selectors";
 import { validBotLocationData, validFwConfig, unpackUUID } from "../util";
 import { getWebAppConfigValue } from "../config_storage/actions";
@@ -44,10 +45,10 @@ export function mapStateToProps(props: Everything): Props {
   const plants = getPlants(props.resources);
   const findPlant = plantFinder(plants);
 
-  const { selectedPlants } = props.resources.consumers.farm_designer;
+  const { selectedPoints } = props.resources.consumers.farm_designer;
-  const selectedPlant = selectedPlants ? findPlant(selectedPlants[0]) : undefined;
+  const selectedPlant = selectedPoints ? findPlant(selectedPoints[0]) : undefined;
-  const { plantUUID } = props.resources.consumers.farm_designer.hoveredPlant;
 
+  const { plantUUID } = props.resources.consumers.farm_designer.hoveredPlant;
   const hoveredPlant = findPlant(plantUUID);
 
   const getConfigValue = getWebAppConfigValue(() => props);
@@ -55,6 +56,7 @@ export function mapStateToProps(props: Everything): Props {
   const genericPoints = getConfigValue(BooleanSetting.show_historic_points)
     ? allGenericPoints
     : allGenericPoints.filter(x => !x.body.discarded_at);
+  const weeds = selectAllWeedPointers(props.resources.index);
 
   const fwConfig = validFwConfig(getFirmwareConfig(props.resources.index));
   const { mcu_params } = props.bot.hardware;
@@ -113,6 +115,7 @@ export function mapStateToProps(props: Everything): Props {
     selectedPlant,
     designer: props.resources.consumers.farm_designer,
     genericPoints,
+    weeds,
     allPoints: selectAllPoints(props.resources.index),
     toolSlots: joinToolsAndSlot(props.resources.index),
     hoveredPlant,

frontend/farm_designer/tools/__tests__/add_tool_test.tsx

@@ -1,4 +1,10 @@
-jest.mock("../../../api/crud", () => ({ initSave: jest.fn() }));
+let mockSave = () => Promise.resolve();
+jest.mock("../../../api/crud", () => ({
+  initSave: jest.fn(),
+  init: jest.fn(() => ({ payload: { uuid: "fake uuid" } })),
+  save: jest.fn(() => mockSave),
+  destroy: jest.fn(),
+}));
 
 jest.mock("../../../history", () => ({ history: { push: jest.fn() } }));
 
@@ -7,7 +13,7 @@ import { mount, shallow } from "enzyme";
 import { RawAddTool as AddTool, mapStateToProps } from "../add_tool";
 import { fakeState } from "../../../__test_support__/fake_state";
 import { SaveBtn } from "../../../ui";
-import { initSave } from "../../../api/crud";
+import { initSave, init, destroy } from "../../../api/crud";
 import { history } from "../../../history";
 import { FirmwareHardware } from "farmbot";
 import { AddToolProps } from "../interfaces";
@@ -32,11 +38,47 @@ describe("<AddTool />", () => {
     expect(wrapper.state().toolName).toEqual("new name");
   });
 
-  it("saves", () => {
+  it("disables save until name in entered", () => {
-    const wrapper = shallow(<AddTool {...fakeProps()} />);
+    const wrapper = shallow<AddTool>(<AddTool {...fakeProps()} />);
+    expect(wrapper.state().toolName).toEqual("");
+    expect(wrapper.find("SaveBtn").first().props().disabled).toBeTruthy();
+    wrapper.setState({ toolName: "fake tool name" });
+    expect(wrapper.find("SaveBtn").first().props().disabled).toBeFalsy();
+  });
+
+  it("shows name collision message", () => {
+    const p = fakeProps();
+    p.existingToolNames = ["tool"];
+    const wrapper = shallow<AddTool>(<AddTool {...p} />);
+    wrapper.setState({ toolName: "tool" });
+    expect(wrapper.find("p").first().text()).toEqual("Already added.");
+    expect(wrapper.find("SaveBtn").first().props().disabled).toBeTruthy();
+  });
+
+  it("saves", async () => {
+    mockSave = () => Promise.resolve();
+    const p = fakeProps();
+    p.dispatch = jest.fn(x => typeof x === "function" && x());
+    const wrapper = shallow<AddTool>(<AddTool {...p} />);
     wrapper.setState({ toolName: "Foo" });
-    wrapper.find(SaveBtn).simulate("click");
+    await wrapper.find(SaveBtn).simulate("click");
-    expect(initSave).toHaveBeenCalledWith("Tool", { name: "Foo" });
+    expect(init).toHaveBeenCalledWith("Tool", { name: "Foo" });
+    expect(wrapper.state().uuid).toEqual(undefined);
+    expect(history.push).toHaveBeenCalledWith("/app/designer/tools");
+  });
+
+  it("removes unsaved tool on exit", async () => {
+    mockSave = () => Promise.reject();
+    const p = fakeProps();
+    p.dispatch = jest.fn(x => typeof x === "function" && x());
+    const wrapper = shallow<AddTool>(<AddTool {...p} />);
+    wrapper.setState({ toolName: "Foo" });
+    await wrapper.find(SaveBtn).simulate("click");
+    expect(init).toHaveBeenCalledWith("Tool", { name: "Foo" });
+    expect(wrapper.state().uuid).toEqual("fake uuid");
+    expect(history.push).not.toHaveBeenCalled();
+    wrapper.unmount();
+    expect(destroy).toHaveBeenCalledWith("fake uuid");
   });
 
   it.each<[FirmwareHardware, number]>([

frontend/farm_designer/tools/__tests__/edit_tool_test.tsx

@@ -38,6 +38,7 @@ describe("<EditTool />", () => {
     dispatch: jest.fn(),
     mountedToolId: undefined,
     isActive: jest.fn(),
+    existingToolNames: [],
   });
 
   it("renders", () => {
@@ -71,6 +72,23 @@ describe("<EditTool />", () => {
     expect(wrapper.state().toolName).toEqual("new name");
   });
 
+  it("disables save until name in entered", () => {
+    const wrapper = shallow<EditTool>(<EditTool {...fakeProps()} />);
+    wrapper.setState({ toolName: "" });
+    expect(wrapper.find("SaveBtn").first().props().disabled).toBeTruthy();
+    wrapper.setState({ toolName: "fake tool name" });
+    expect(wrapper.find("SaveBtn").first().props().disabled).toBeFalsy();
+  });
+
+  it("shows name collision message", () => {
+    const p = fakeProps();
+    p.existingToolNames = ["tool"];
+    const wrapper = shallow<EditTool>(<EditTool {...p} />);
+    wrapper.setState({ toolName: "tool" });
+    expect(wrapper.find("p").first().text()).toEqual("Name already taken.");
+    expect(wrapper.find("SaveBtn").first().props().disabled).toBeTruthy();
+  });
+
   it("saves", () => {
     const wrapper = shallow(<EditTool {...fakeProps()} />);
     wrapper.find(SaveBtn).simulate("click");

frontend/farm_designer/tools/__tests__/index_test.tsx

@@ -1,6 +1,7 @@
+let mockPath = "/app/designer/tools";
 jest.mock("../../../history", () => ({
   history: { push: jest.fn() },
-  getPathArray: () => "/app/designer/tools".split("/"),
+  getPathArray: () => mockPath.split("/"),
 }));
 
 jest.mock("../../../api/crud", () => ({
@@ -8,6 +9,10 @@ jest.mock("../../../api/crud", () => ({
   save: jest.fn(),
 }));
 
+jest.mock("../../map/actions", () => ({
+  mapPointClickAction: jest.fn(() => jest.fn()),
+}));
+
 const mockDevice = { readPin: jest.fn(() => Promise.resolve()) };
 jest.mock("../../../device", () => ({ getDevice: () => mockDevice }));
 
@@ -28,6 +33,7 @@ import { Content, Actions } from "../../../constants";
 import { edit, save } from "../../../api/crud";
 import { ToolSelection } from "../tool_slot_edit_components";
 import { ToolsProps } from "../interfaces";
+import { mapPointClickAction } from "../../map/actions";
 
 describe("<Tools />", () => {
   const fakeProps = (): ToolsProps => ({
@@ -188,7 +194,9 @@ describe("<Tools />", () => {
 
   it("displays tool as active", () => {
     const p = fakeProps();
-    p.tools = [fakeTool()];
+    const tool = fakeTool();
+    tool.body.id = 1;
+    p.tools = [tool];
     p.isActive = () => true;
     p.device.body.mounted_tool_id = undefined;
     const wrapper = mount(<Tools {...p} />);
@@ -243,4 +251,37 @@ describe("<ToolSlotInventoryItem />", () => {
     wrapper.find(".tool-selection-wrapper").first().simulate("click", e);
     expect(e.stopPropagation).toHaveBeenCalled();
   });
+
+  it("shows tool name", () => {
+    const p = fakeProps();
+    p.hideDropdown = true;
+    const wrapper = mount(<ToolSlotInventoryItem {...p} />);
+    expect(wrapper.text().toLowerCase()).toContain("empty");
+  });
+
+  it("opens tool slot", () => {
+    mockPath = "/app/designer/tool-slots";
+    const p = fakeProps();
+    p.toolSlot.body.id = 1;
+    const wrapper = shallow(<ToolSlotInventoryItem {...p} />);
+    wrapper.find("div").first().simulate("click");
+    expect(mapPointClickAction).not.toHaveBeenCalled();
+    expect(history.push).toHaveBeenCalledWith("/app/designer/tool-slots/1");
+    expect(p.dispatch).not.toHaveBeenCalled();
+  });
+
+  it("removes item in box select mode", () => {
+    mockPath = "/app/designer/plants/select";
+    const p = fakeProps();
+    p.toolSlot.body.id = 1;
+    const wrapper = shallow(<ToolSlotInventoryItem {...p} />);
+    wrapper.find("div").first().simulate("click");
+    expect(mapPointClickAction).toHaveBeenCalledWith(expect.any(Function),
+      p.toolSlot.uuid);
+    expect(history.push).not.toHaveBeenCalled();
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.HOVER_TOOL_SLOT,
+      payload: undefined,
+    });
+  });
 });

frontend/farm_designer/tools/add_tool.tsx

@@ -7,7 +7,7 @@ import { Everything } from "../../interfaces";
 import { t } from "../../i18next_wrapper";
 import { SaveBtn } from "../../ui";
 import { SpecialStatus } from "farmbot";
-import { initSave } from "../../api/crud";
+import { initSave, destroy, init, save } from "../../api/crud";
 import { Panel } from "../panel_header";
 import { history } from "../../history";
 import { selectAllTools } from "../../resources/selectors";
@@ -27,7 +27,7 @@ export const mapStateToProps = (props: Everything): AddToolProps => ({
 });
 
 export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
-  state: AddToolState = { toolName: "", toAdd: [] };
+  state: AddToolState = { toolName: "", toAdd: [], uuid: undefined };
 
   filterExisting = (n: string) => !this.props.existingToolNames.includes(n);
 
@@ -41,15 +41,23 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
     toAdd: this.stockToolNames().filter(this.filterExisting)
   });
 
-  newTool = (name: string) => {
+  newTool = (name: string) => this.props.dispatch(initSave("Tool", { name }));
-    this.props.dispatch(initSave("Tool", { name }));
-  };
 
   save = () => {
-    this.newTool(this.state.toolName);
+    const initTool = init("Tool", { name: this.state.toolName });
-    history.push("/app/designer/tools");
+    this.props.dispatch(initTool);
+    const { uuid } = initTool.payload;
+    this.setState({ uuid });
+    this.props.dispatch(save(uuid))
+      .then(() => {
+        this.setState({ uuid: undefined });
+        history.push("/app/designer/tools");
+      }).catch(() => { });
   }
 
+  componentWillUnmount = () =>
+    this.state.uuid && this.props.dispatch(destroy(this.state.uuid));
+
   stockToolNames = () => {
     switch (this.props.firmwareHardware) {
       case "arduino":
@@ -123,6 +131,8 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
   }
 
   render() {
+    const { toolName, uuid } = this.state;
+    const alreadyAdded = !uuid && !this.filterExisting(toolName);
     const panelName = "add-tool";
     return <DesignerPanel panelName={panelName} panel={Panel.Tools}>
       <DesignerPanelHeader
@@ -138,7 +148,13 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
             name="name"
             onChange={e =>
               this.setState({ toolName: e.currentTarget.value })} />
-          <SaveBtn onClick={this.save} status={SpecialStatus.DIRTY} />
+          <SaveBtn
+            onClick={this.save}
+            disabled={!this.state.toolName || alreadyAdded}
+            status={SpecialStatus.DIRTY} />
+          <p className="name-error">
+            {alreadyAdded ? t("Already added.") : ""}
+          </p>
         </div>
         <this.AddStockTools />
       </DesignerPanelContent>

frontend/farm_designer/tools/edit_tool.tsx

@@ -9,6 +9,7 @@ import { getPathArray } from "../../history";
 import { TaggedTool, SpecialStatus, TaggedToolSlotPointer } from "farmbot";
 import {
   maybeFindToolById, getDeviceAccountSettings, selectAllToolSlotPointers,
+  selectAllTools,
 } from "../../resources/selectors";
 import { SaveBtn } from "../../ui";
 import { edit, destroy } from "../../api/crud";
@@ -17,6 +18,7 @@ import { Panel } from "../panel_header";
 import { ToolSVG } from "../map/layers/tool_slots/tool_graphics";
 import { error } from "../../toast/toast";
 import { EditToolProps, EditToolState } from "./interfaces";
+import { betterCompact } from "../../util";
 
 export const isActive = (toolSlots: TaggedToolSlotPointer[]) =>
   (toolId: number | undefined) =>
@@ -29,6 +31,8 @@ export const mapStateToProps = (props: Everything): EditToolProps => ({
   mountedToolId: getDeviceAccountSettings(props.resources.index)
     .body.mounted_tool_id,
   isActive: isActive(selectAllToolSlotPointers(props.resources.index)),
+  existingToolNames: betterCompact(selectAllTools(props.resources.index)
+    .map(tool => tool.body.name)),
 });
 
 export class RawEditTool extends React.Component<EditToolProps, EditToolState> {
@@ -53,18 +57,26 @@ export class RawEditTool extends React.Component<EditToolProps, EditToolState> {
       ? t("Cannot delete while mounted.")
       : t("Cannot delete while in a slot.");
     const activeOrMounted = this.props.isActive(tool.body.id) || isMounted;
+    const nameTaken = this.props.existingToolNames
+      .filter(x => x != tool.body.name).includes(this.state.toolName);
     return <this.PanelWrapper>
-      <ToolSVG toolName={this.state.toolName} />
+      <div className="edit-tool">
-      <label>{t("Name")}</label>
+        <ToolSVG toolName={this.state.toolName} />
-      <input name="name"
+        <label>{t("Name")}</label>
-        value={toolName}
+        <input name="name"
-        onChange={e => this.setState({ toolName: e.currentTarget.value })} />
+          value={toolName}
-      <SaveBtn
+          onChange={e => this.setState({ toolName: e.currentTarget.value })} />
-        onClick={() => {
+        <SaveBtn
-          dispatch(edit(tool, { name: toolName }));
+          onClick={() => {
-          history.push("/app/designer/tools");
+            this.props.dispatch(edit(tool, { name: toolName }));
-        }}
+            history.push("/app/designer/tools");
-        status={SpecialStatus.DIRTY} />
+          }}
+          disabled={!this.state.toolName || nameTaken}
+          status={SpecialStatus.DIRTY} />
+        <p className="name-error">
+          {nameTaken ? t("Name already taken.") : ""}
+        </p>
+      </div>
       <button
         className={`fb-button red no-float ${activeOrMounted
           ? "pseudo-disabled" : ""}`}

frontend/farm_designer/tools/index.tsx

@@ -26,6 +26,9 @@ import { hasUTM } from "../../devices/components/firmware_hardware_support";
 import { ToolsProps, ToolsState } from "./interfaces";
 import { mapStateToProps } from "./state_to_props";
 import { BotOriginQuadrant } from "../interfaces";
+import { mapPointClickAction } from "../map/actions";
+import { getMode } from "../map/util";
+import { Mode } from "../map/interfaces";
 
 const toolStatus = (value: number | undefined): string => {
   switch (value) {
@@ -143,6 +146,7 @@ export class RawTools extends React.Component<ToolsProps, ToolsState> {
         .filter(tool => !tool.body.name ||
           tool.body.name && tool.body.name.toLowerCase()
             .includes(this.state.searchTerm.toLowerCase()))
+        .filter(tool => tool.body.id)
         .map(tool =>
           <ToolInventoryItem key={tool.uuid}
             toolId={tool.body.id}
@@ -206,6 +210,7 @@ export interface ToolSlotInventoryItemProps {
   isActive(id: number | undefined): boolean;
   xySwap: boolean;
   quadrant: BotOriginQuadrant;
+  hideDropdown?: boolean;
 }
 
 export const ToolSlotInventoryItem = (props: ToolSlotInventoryItemProps) => {
@@ -214,7 +219,14 @@ export const ToolSlotInventoryItem = (props: ToolSlotInventoryItemProps) => {
     .filter(tool => tool.body.id == tool_id)[0]?.body.name;
   return <div
     className={`tool-slot-search-item ${props.hovered ? "hovered" : ""}`}
-    onClick={() => history.push(`/app/designer/tool-slots/${id}`)}
+    onClick={() => {
+      if (getMode() == Mode.boxSelect) {
+        mapPointClickAction(props.dispatch, props.toolSlot.uuid)();
+        props.dispatch(setToolHover(undefined));
+      } else {
+        history.push(`/app/designer/tool-slots/${id}`);
+      }
+    }}
     onMouseEnter={() => props.dispatch(setToolHover(props.toolSlot.uuid))}
     onMouseLeave={() => props.dispatch(setToolHover(undefined))}>
     <Row>
@@ -225,20 +237,24 @@ export const ToolSlotInventoryItem = (props: ToolSlotInventoryItemProps) => {
           xySwap={props.xySwap} quadrant={props.quadrant} />
       </Col>
       <Col xs={6}>
-        <div className={"tool-selection-wrapper"}
+        {props.hideDropdown
-          onClick={e => e.stopPropagation()}>
+          ? <span className={"tool-slot-search-item-name"}>
-          <ToolSelection
+            {toolName || t("Empty")}
-            tools={props.tools}
+          </span>
-            selectedTool={props.tools
+          : <div className={"tool-selection-wrapper"}
-              .filter(tool => tool.body.id == tool_id)[0]}
+            onClick={e => e.stopPropagation()}>
-            onChange={update => {
+            <ToolSelection
-              props.dispatch(edit(props.toolSlot, update));
+              tools={props.tools}
-              props.dispatch(save(props.toolSlot.uuid));
+              selectedTool={props.tools
-            }}
+                .filter(tool => tool.body.id == tool_id)[0]}
-            isActive={props.isActive}
+              onChange={update => {
-            filterSelectedTool={false}
+                props.dispatch(edit(props.toolSlot, update));
-            filterActiveTools={true} />
+                props.dispatch(save(props.toolSlot.uuid));
-        </div>
+              }}
+              isActive={props.isActive}
+              filterSelectedTool={false}
+              filterActiveTools={true} />
+          </div>}
       </Col>
       <Col xs={4} className={"tool-slot-position-info"}>
         <p className="tool-slot-position">

frontend/farm_designer/tools/interfaces.ts

@@ -19,6 +19,7 @@ export interface AddToolProps {
 export interface AddToolState {
   toolName: string;
   toAdd: string[];
+  uuid: UUID | undefined;
 }
 
 export interface EditToolProps {
@@ -26,6 +27,7 @@ export interface EditToolProps {
   dispatch: Function;
   mountedToolId: number | undefined;
   isActive(id: number | undefined): boolean;
+  existingToolNames: string[];
 }
 
 export interface EditToolState {

frontend/farm_designer/weeds/__tests__/weed_inventory_item_test.tsx

@@ -0,0 +1,81 @@
+let mockPath = "/app/designer/weeds";
+jest.mock("../../../history", () => ({
+  push: jest.fn(),
+  getPathArray: () => mockPath.split("/"),
+}));
+
+jest.mock("../../map/actions", () => ({
+  mapPointClickAction: jest.fn(() => jest.fn()),
+}));
+
+import * as React from "react";
+import { shallow } from "enzyme";
+import {
+  WeedInventoryItem, WeedInventoryItemProps,
+} from "../weed_inventory_item";
+import { fakeWeed } from "../../../__test_support__/fake_state/resources";
+import { push } from "../../../history";
+import { Actions } from "../../../constants";
+import { mapPointClickAction } from "../../map/actions";
+
+describe("<WeedInventoryItem /> />", () => {
+  const fakeProps = (): WeedInventoryItemProps => ({
+    tpp: fakeWeed(),
+    dispatch: jest.fn(),
+    hovered: false,
+  });
+
+  it("navigates to weed", () => {
+    const p = fakeProps();
+    p.tpp.body.id = 1;
+    const wrapper = shallow(<WeedInventoryItem {...p} />);
+    wrapper.simulate("click");
+    expect(mapPointClickAction).not.toHaveBeenCalled();
+    expect(push).toHaveBeenCalledWith("/app/designer/weeds/1");
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.TOGGLE_HOVERED_POINT,
+      payload: [p.tpp.uuid],
+    });
+  });
+
+  it("removes item in box select mode", () => {
+    mockPath = "/app/designer/plants/select";
+    const p = fakeProps();
+    const wrapper = shallow(<WeedInventoryItem {...p} />);
+    wrapper.simulate("click");
+    expect(mapPointClickAction).toHaveBeenCalledWith(expect.any(Function),
+      p.tpp.uuid);
+    expect(push).not.toHaveBeenCalled();
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.TOGGLE_HOVERED_POINT,
+      payload: undefined,
+    });
+  });
+
+  it("hovers weed", () => {
+    const p = fakeProps();
+    p.tpp.body.id = 1;
+    const wrapper = shallow(<WeedInventoryItem {...p} />);
+    wrapper.simulate("mouseEnter");
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.TOGGLE_HOVERED_POINT, payload: p.tpp.uuid
+    });
+  });
+
+  it("shows hovered", () => {
+    const p = fakeProps();
+    p.hovered = true;
+    const wrapper = shallow(<WeedInventoryItem {...p} />);
+    expect(wrapper.hasClass("hovered")).toBeTruthy();
+  });
+
+  it("un-hovers weed", () => {
+    const p = fakeProps();
+    p.tpp.body.id = 1;
+    const wrapper = shallow(<WeedInventoryItem {...p} />);
+    wrapper.simulate("mouseLeave");
+    expect(p.dispatch).toHaveBeenCalledWith({
+      type: Actions.TOGGLE_HOVERED_POINT, payload: undefined
+    });
+  });
+});

frontend/farm_designer/weeds/__tests__/weeds_edit_test.tsx

@@ -9,7 +9,7 @@ import { mount, shallow } from "enzyme";
 import {
   RawEditWeed as EditWeed, EditWeedProps, mapStateToProps,
 } from "../weeds_edit";
-import { fakePoint } from "../../../__test_support__/fake_state/resources";
+import { fakeWeed } from "../../../__test_support__/fake_state/resources";
 import { fakeState } from "../../../__test_support__/fake_state";
 import {
   buildResourceIndex,
@@ -32,9 +32,9 @@ describe("<EditWeed />", () => {
   it("renders", () => {
     mockPath = "/app/designer/weeds/1";
     const p = fakeProps();
-    const point = fakePoint();
+    const weed = fakeWeed();
-    point.body.id = 1;
+    weed.body.id = 1;
-    p.findPoint = () => point;
+    p.findPoint = () => weed;
     const wrapper = mount(<EditWeed {...p} />);
     expect(wrapper.text().toLowerCase()).toContain("edit");
   });
@@ -42,9 +42,9 @@ describe("<EditWeed />", () => {
   it("goes back", () => {
     mockPath = "/app/designer/weeds/1";
     const p = fakeProps();
-    const point = fakePoint();
+    const weed = fakeWeed();
-    point.body.id = 1;
+    weed.body.id = 1;
-    p.findPoint = () => point;
+    p.findPoint = () => weed;
     const wrapper = shallow(<EditWeed {...p} />);
     wrapper.find(DesignerPanelHeader).simulate("back");
     expect(p.dispatch).toHaveBeenCalledWith({
@@ -56,10 +56,10 @@ describe("<EditWeed />", () => {
 describe("mapStateToProps()", () => {
   it("returns props", () => {
     const state = fakeState();
-    const point = fakePoint();
+    const weed = fakeWeed();
-    point.body.id = 1;
+    weed.body.id = 1;
-    state.resources = buildResourceIndex([point]);
+    state.resources = buildResourceIndex([weed]);
     const props = mapStateToProps(state);
-    expect(props.findPoint(1)).toEqual(point);
+    expect(props.findPoint(1)).toEqual(weed);
   });
 });

frontend/farm_designer/weeds/__tests__/weeds_inventory_test.tsx

@@ -4,11 +4,11 @@ import {
   RawWeeds as Weeds, WeedsProps, mapStateToProps,
 } from "../weeds_inventory";
 import { fakeState } from "../../../__test_support__/fake_state";
-import { fakePoint } from "../../../__test_support__/fake_state/resources";
+import { fakeWeed } from "../../../__test_support__/fake_state/resources";
 
 describe("<Weeds> />", () => {
   const fakeProps = (): WeedsProps => ({
-    genericPoints: [],
+    weeds: [],
     dispatch: jest.fn(),
     hoveredPoint: undefined,
   });
@@ -27,9 +27,9 @@ describe("<Weeds> />", () => {
 
   it("filters points", () => {
     const p = fakeProps();
-    p.genericPoints = [fakePoint(), fakePoint()];
+    p.weeds = [fakeWeed(), fakeWeed()];
-    p.genericPoints[0].body.name = "weed 0";
+    p.weeds[0].body.name = "weed 0";
-    p.genericPoints[1].body.name = "weed 1";
+    p.weeds[1].body.name = "weed 1";
     const wrapper = mount(<Weeds {...p} />);
     wrapper.setState({ searchTerm: "0" });
     expect(wrapper.text()).toContain("weed 0");

frontend/farm_designer/weeds/weed_inventory_item.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { TaggedWeedPointer } from "farmbot";
+import { Actions } from "../../constants";
+import { push } from "../../history";
+import { t } from "../../i18next_wrapper";
+import { DEFAULT_WEED_ICON } from "../map/layers/weeds/garden_weed";
+import { svgToUrl } from "../../open_farm/icons";
+import { genericWeedIcon } from "../point_groups/point_group_item";
+import { getMode } from "../map/util";
+import { Mode } from "../map/interfaces";
+import { mapPointClickAction } from "../map/actions";
+
+export interface WeedInventoryItemProps {
+  tpp: TaggedWeedPointer;
+  dispatch: Function;
+  hovered: boolean;
+}
+
+export class WeedInventoryItem extends
+  React.Component<WeedInventoryItemProps, {}> {
+
+  render() {
+    const weed = this.props.tpp.body;
+    const { tpp, dispatch } = this.props;
+    const weedId = (weed.id || "ERR_NO_POINT_ID").toString();
+
+    const toggle = (action: "enter" | "leave") => {
+      const isEnter = action === "enter";
+      dispatch({
+        type: Actions.TOGGLE_HOVERED_POINT,
+        payload: isEnter ? tpp.uuid : undefined
+      });
+    };
+
+    const click = () => {
+      if (getMode() == Mode.boxSelect) {
+        mapPointClickAction(dispatch, tpp.uuid)();
+        toggle("leave");
+      } else {
+        push(`/app/designer/weeds/${weedId}`);
+        dispatch({ type: Actions.TOGGLE_HOVERED_POINT, payload: [tpp.uuid] });
+      }
+    };
+
+    return <div
+      className={`weed-search-item ${this.props.hovered ? "hovered" : ""}`}
+      key={weedId}
+      onMouseEnter={() => toggle("enter")}
+      onMouseLeave={() => toggle("leave")}
+      onClick={click}>
+      <span className={"weed-item-icon"}>
+        <img className={"weed-icon"}
+          src={DEFAULT_WEED_ICON}
+          width={32}
+          height={32} />
+        <img
+          src={svgToUrl(genericWeedIcon(weed.meta.color))}
+          width={32}
+          height={32} />
+      </span>
+      <span className="weed-search-item-name">
+        {weed.name || t("Untitled weed")}
+      </span>
+      <p className="weed-search-item-info">
+        <i>{`(${weed.x}, ${weed.y}) ⌀${weed.radius * 2}`}</i>
+      </p>
+    </div>;
+  }
+}

frontend/farm_designer/weeds/weeds_edit.tsx

@@ -6,22 +6,22 @@ import {
 import { t } from "../../i18next_wrapper";
 import { history, getPathArray } from "../../history";
 import { Everything } from "../../interfaces";
-import { TaggedGenericPointer } from "farmbot";
+import { TaggedWeedPointer } from "farmbot";
-import { maybeFindGenericPointerById } from "../../resources/selectors";
+import { maybeFindWeedPointerById } from "../../resources/selectors";
 import { Panel } from "../panel_header";
 import {
   EditPointProperties, PointActions, updatePoint,
-} from "./point_edit_actions";
+} from "../points/point_edit_actions";
 import { Actions } from "../../constants";
 
 export interface EditWeedProps {
   dispatch: Function;
-  findPoint(id: number): TaggedGenericPointer | undefined;
+  findPoint(id: number): TaggedWeedPointer | undefined;
 }
 
 export const mapStateToProps = (props: Everything): EditWeedProps => ({
   dispatch: props.dispatch,
-  findPoint: id => maybeFindGenericPointerById(props.resources.index, id),
+  findPoint: id => maybeFindWeedPointerById(props.resources.index, id),
 });
 
 export class RawEditWeed extends React.Component<EditWeedProps, {}> {

frontend/farm_designer/weeds/weeds_inventory.tsx

@@ -10,12 +10,12 @@ import {
   DesignerPanel, DesignerPanelContent, DesignerPanelTop,
 } from "../designer_panel";
 import { t } from "../../i18next_wrapper";
-import { TaggedGenericPointer } from "farmbot";
+import { TaggedWeedPointer } from "farmbot";
-import { selectAllGenericPointers } from "../../resources/selectors";
+import { selectAllWeedPointers } from "../../resources/selectors";
-import { PointInventoryItem } from "./point_inventory_item";
+import { WeedInventoryItem } from "./weed_inventory_item";
 
 export interface WeedsProps {
-  genericPoints: TaggedGenericPointer[];
+  weeds: TaggedWeedPointer[];
   dispatch: Function;
   hoveredPoint: string | undefined;
 }
@@ -24,13 +24,8 @@ interface WeedsState {
   searchTerm: string;
 }
 
-export const isAWeed = (pointName: string, type?: string) =>
-  type == "weed" || pointName.toLowerCase().includes("weed");
-
 export const mapStateToProps = (props: Everything): WeedsProps => ({
-  genericPoints: selectAllGenericPointers(props.resources.index)
+  weeds: selectAllWeedPointers(props.resources.index),
-    .filter(x => !x.body.discarded_at)
-    .filter(x => isAWeed(x.body.name, x.body.meta.type)),
   dispatch: props.dispatch,
   hoveredPoint: props.resources.consumers.farm_designer.hoveredPoint,
 });
@@ -54,17 +49,16 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
       </DesignerPanelTop>
       <DesignerPanelContent panelName={"weeds-inventory"}>
         <EmptyStateWrapper
-          notEmpty={this.props.genericPoints.length > 0}
+          notEmpty={this.props.weeds.length > 0}
           graphic={EmptyStateGraphic.weeds}
           title={t("No weeds yet.")}
           text={Content.NO_WEEDS}
           colorScheme={"weeds"}>
-          {this.props.genericPoints
+          {this.props.weeds
             .filter(p => p.body.name.toLowerCase()
               .includes(this.state.searchTerm.toLowerCase()))
-            .map(p => <PointInventoryItem
+            .map(p => <WeedInventoryItem
               key={p.uuid}
-              navName={"weeds"}
               tpp={p}
               hovered={this.props.hoveredPoint === p.uuid}
               dispatch={this.props.dispatch} />)}

frontend/farmware/weed_detector/__tests__/actions_tests.ts

@@ -62,7 +62,8 @@ describe("deletePoints()", () => {
     mockDelete = Promise.resolve();
     mockData = [{ id: 1 }, { id: 2 }, { id: 3 }];
     const dispatch = jest.fn();
-    await deletePoints("weeds", { created_by: "plant-detection" })(dispatch, jest.fn());
+    const query = { meta: { created_by: "plant-detection" } };
+    await deletePoints("weeds", query)(dispatch, jest.fn());
     expect(axios.post).toHaveBeenCalledWith("http://localhost/api/points/search",
       { meta: { created_by: "plant-detection" } });
     await expect(axios.delete).toHaveBeenCalledWith("http://localhost/api/points/1,2,3");
@@ -80,7 +81,8 @@ describe("deletePoints()", () => {
     mockDelete = Promise.reject("error");
     mockData = [{ id: 1 }, { id: 2 }, { id: 3 }];
     const dispatch = jest.fn();
-    await deletePoints("weeds", { created_by: "plant-detection" })(dispatch, jest.fn());
+    const query = { meta: { created_by: "plant-detection" } };
+    await deletePoints("weeds", query)(dispatch, jest.fn());
     expect(axios.post).toHaveBeenCalledWith("http://localhost/api/points/search",
       { meta: { created_by: "plant-detection" } });
     await expect(axios.delete).toHaveBeenCalledWith("http://localhost/api/points/1,2,3");
@@ -98,7 +100,8 @@ describe("deletePoints()", () => {
     mockDelete = Promise.resolve();
     mockData = times(200, () => ({ id: 1 }));
     const dispatch = jest.fn();
-    await deletePoints("weeds", { created_by: "plant-detection" })(dispatch, jest.fn());
+    const query = { meta: { created_by: "plant-detection" } };
+    await deletePoints("weeds", query)(dispatch, jest.fn());
     expect(axios.post).toHaveBeenCalledWith("http://localhost/api/points/search",
       { meta: { created_by: "plant-detection" } });
     await expect(axios.delete).toHaveBeenCalledWith(

frontend/farmware/weed_detector/__tests__/weed_detector_test.tsx

@@ -85,7 +85,7 @@ describe("<WeedDetector />", () => {
     expect(wrapper.instance().state.deletionProgress).toBeUndefined();
     clickButton(wrapper, 1, "clear weeds");
     expect(deletePoints).toHaveBeenCalledWith(
-      "weeds", { created_by: "plant-detection" }, expect.any(Function));
+      "weeds", { meta: { created_by: "plant-detection" } }, expect.any(Function));
     expect(wrapper.instance().state.deletionProgress).toEqual("Deleting...");
     const fakeProgress = { completed: 50, total: 100, isDone: false };
     mockDeletePoints.mock.calls[0][2](fakeProgress);

frontend/farmware/weed_detector/actions.tsx

@@ -5,20 +5,19 @@ import { API } from "../../api";
 import { Progress, ProgressCallback, trim } from "../../util";
 import { getDevice } from "../../device";
 import { noop, chunk } from "lodash";
-import { GenericPointer } from "farmbot/dist/resources/api_resources";
+import { Point } from "farmbot/dist/resources/api_resources";
 import { Actions } from "../../constants";
 import { t } from "../../i18next_wrapper";
 
 export function deletePoints(
   pointName: string,
-  metaQuery: { [key: string]: string },
+  query: Partial<Point>,
   cb?: ProgressCallback): Thunk {
   // TODO: Generalize and add to api/crud.ts
   return async function (dispatch) {
     const URL = API.current.pointSearchPath;
-    const QUERY = { meta: metaQuery };
     try {
-      const resp = await axios.post<GenericPointer[]>(URL, QUERY);
+      const resp = await axios.post<Point[]>(URL, query);
       const ids = resp.data.map(x => x.id);
       // If you delete too many points, you will violate the URL length
       // limitation of 2,083. Chunking helps fix that.

frontend/farmware/weed_detector/index.tsx

@@ -39,7 +39,7 @@ export class WeedDetector
       this.setState({ deletionProgress: p.isDone ? "" : percentage });
     };
     this.props.dispatch(deletePoints(t("weeds"),
-      { created_by: "plant-detection" }, progress));
+      { meta: { created_by: "plant-detection" } }, progress));
     this.setState({ deletionProgress: t("Deleting...") });
   }
 

frontend/resources/__tests__/selectors_test.ts

@@ -111,7 +111,7 @@ describe("isKind()", () => {
 describe("groupPointsByType()", () => {
   it("returns points", () => {
     const points = Selector.groupPointsByType(fakeIndex);
-    const expectedKeys = ["Plant", "GenericPointer", "ToolSlot"];
+    const expectedKeys = ["Plant", "GenericPointer", "ToolSlot", "Weed"];
     expect(expectedKeys.every(key => key in points)).toBeTruthy();
   });
 });

frontend/resources/selectors.ts

@@ -10,15 +10,16 @@ import {
   TaggedToolSlotPointer,
   TaggedUser,
   TaggedDevice,
+  TaggedWeedPointer,
 } from "farmbot";
 import {
   isTaggedPlantPointer,
   isTaggedGenericPointer,
   isTaggedRegimen,
   isTaggedSequence,
-  isTaggedTool,
   isTaggedToolSlotPointer,
   sanityCheck,
+  isTaggedWeedPointer,
 } from "./tagged_resources";
 import { betterCompact, bail } from "../util";
 import { findAllById } from "./selectors_by_id";
@@ -94,6 +95,13 @@ export function selectAllGenericPointers(index: ResourceIndex):
   return betterCompact(genericPointers);
 }
 
+export function selectAllWeedPointers(index: ResourceIndex):
+  TaggedWeedPointer[] {
+  const weedPointers = selectAllPoints(index)
+    .map(p => isTaggedWeedPointer(p) ? p : undefined);
+  return betterCompact(weedPointers);
+}
+
 export function selectAllPlantPointers(index: ResourceIndex): TaggedPlantPointer[] {
   const plantPointers = selectAllActivePoints(index)
     .map(p => isTaggedPlantPointer(p) ? p : undefined);
@@ -141,22 +149,6 @@ export function getSequenceByUUID(index: ResourceIndex,
   }
 }
 
-/** GIVEN: a slot UUID.
- *  FINDS: Tool in that slot (if any) */
-export const currentToolInSlot = (index: ResourceIndex) =>
-  (toolSlotUUID: string): TaggedTool | undefined => {
-    const currentSlot = selectCurrentToolSlot(index, toolSlotUUID);
-    if (currentSlot
-      && currentSlot.kind === "Point") {
-      const toolUUID = index
-        .byKindAndId[joinKindAndId("Tool", currentSlot.body.tool_id)];
-      const tool = index.references[toolUUID || "NOPE!"];
-      if (tool && isTaggedTool(tool)) {
-        return tool;
-      }
-    }
-  };
-
 /** FINDS: All tools that are in use. */
 export function toolsInUse(index: ResourceIndex): TaggedTool[] {
   const ids = betterCompact(selectAllToolSlotPointers(index)

frontend/resources/selectors_by_id.ts

@@ -11,6 +11,7 @@ import {
   isTaggedGenericPointer,
   isTaggedSavedGarden,
   isTaggedFolder,
+  isTaggedWeedPointer,
 } from "./tagged_resources";
 import {
   ResourceName,
@@ -125,6 +126,13 @@ export function maybeFindGenericPointerById(index: ResourceIndex, id: number) {
   if (resource && isTaggedGenericPointer(resource)) { return resource; }
 }
 
+/** Unlike other findById methods, this one allows undefined (missed) values */
+export function maybeFindWeedPointerById(index: ResourceIndex, id: number) {
+  const uuid = index.byKindAndId[joinKindAndId("Point", id)];
+  const resource = index.references[uuid || "nope"];
+  if (resource && isTaggedWeedPointer(resource)) { return resource; }
+}
+
 /** Unlike other findById methods, this one allows undefined (missed) values */
 export function maybeFindSavedGardenById(index: ResourceIndex, id: number) {
   const uuid = index.byKindAndId[joinKindAndId("SavedGarden", id)];

frontend/resources/tagged_resources.ts

@@ -16,6 +16,7 @@ import {
   TaggedPlantTemplate,
   TaggedSavedGarden,
   TaggedPointGroup,
+  TaggedWeedPointer,
 } from "farmbot";
 
 export interface TaggedResourceBase {
@@ -102,6 +103,8 @@ export const isTaggedGenericPointer =
   (x: object): x is TaggedGenericPointer => {
     return isTaggedPoint(x) && (x.body.pointer_type === "GenericPointer");
   };
+export const isTaggedWeedPointer = (x: object): x is TaggedWeedPointer =>
+  isTaggedPoint(x) && (x.body.pointer_type === "Weed");
 export const isTaggedSavedGarden =
   (x: object): x is TaggedSavedGarden => is("SavedGarden")(x);
 export const isTaggedPlantTemplate =

frontend/route_config.tsx

@@ -376,7 +376,7 @@ export const UNBOUND_ROUTES = [
     $: "/designer/weeds",
     getModule,
     key,
-    getChild: () => import("./farm_designer/points/weeds_inventory"),
+    getChild: () => import("./farm_designer/weeds/weeds_inventory"),
     childKey: "Weeds"
   }),
   route({
@@ -392,7 +392,7 @@ export const UNBOUND_ROUTES = [
     $: "/designer/weeds/:point_id",
     getModule,
     key,
-    getChild: () => import("./farm_designer/points/weeds_edit"),
+    getChild: () => import("./farm_designer/weeds/weeds_edit"),
     childKey: "EditWeed"
   }),
   route({

frontend/sequences/locals_list/__tests__/location_form_list_test.ts

@@ -30,45 +30,58 @@ describe("locationFormList()", () => {
       label: "Generic tool (100, 200, 300)",
       value: "1",
     });
-    const plantHeading = items[3];
+    const groupHeading = items[3];
-    expect(plantHeading).toEqual({
-      headingId: "Plant",
-      label: "Plants",
-      value: 0,
-      heading: true,
-    });
-    const plant = items[4];
-    expect(plant).toEqual({
-      headingId: "Plant",
-      label: "Plant 1 (1, 2, 3)",
-      value: "1"
-    });
-    const pointHeading = items[6];
-    expect(pointHeading).toEqual({
-      headingId: "GenericPointer",
-      label: "Map Points",
-      value: 0,
-      heading: true,
-    });
-    const point = items[7];
-    expect(point).toEqual({
-      headingId: "GenericPointer",
-      label: "Point 1 (10, 20, 30)",
-      value: "2"
-    });
-    const groupHeading = items[8];
     expect(groupHeading).toEqual({
       headingId: "PointGroup",
       label: "Groups",
       value: 0,
       heading: true,
     });
-    const group = items[9];
+    const group = items[4];
     expect(group).toEqual({
       headingId: "PointGroup",
       label: "Fake",
       value: "1"
     });
+    const plantHeading = items[5];
+    expect(plantHeading).toEqual({
+      headingId: "Plant",
+      label: "Plants",
+      value: 0,
+      heading: true,
+    });
+    const plant = items[6];
+    expect(plant).toEqual({
+      headingId: "Plant",
+      label: "Plant 1 (1, 2, 3)",
+      value: "1"
+    });
+    const pointHeading = items[8];
+    expect(pointHeading).toEqual({
+      headingId: "GenericPointer",
+      label: "Map Points",
+      value: 0,
+      heading: true,
+    });
+    const point = items[9];
+    expect(point).toEqual({
+      headingId: "GenericPointer",
+      label: "Point 1 (10, 20, 30)",
+      value: "2"
+    });
+    const weedHeading = items[10];
+    expect(weedHeading).toEqual({
+      headingId: "Weed",
+      label: "Weeds",
+      value: 0,
+      heading: true,
+    });
+    const weed = items[11];
+    expect(weed).toEqual({
+      headingId: "Weed",
+      label: "Weed 1 (15, 25, 35)",
+      value: "5"
+    });
   });
 });
 

frontend/sequences/locals_list/handle_select.ts

@@ -78,7 +78,7 @@ const toolVar = (value: string | number) =>
     });
 
 const pointVar = (
-  pointer_type: "Plant" | "GenericPointer",
+  pointer_type: "Plant" | "GenericPointer" | "Weed",
   value: string | number,
 ) => ({ identifierLabel: label, allowedVariableNodes }: NewVarProps): VariableWithAValue =>
     createVariableNode(allowedVariableNodes)(label, {
@@ -123,7 +123,9 @@ const createNewVariable = (props: NewVarProps): VariableNode | undefined => {
   if (ddi.isNull) { return nothingVar(props); } // Empty form. Nothing selected yet.
   switch (ddi.headingId) {
     case "Plant":
-    case "GenericPointer": return pointVar(ddi.headingId, ddi.value)(props);
+    case "GenericPointer":
+    case "Weed":
+      return pointVar(ddi.headingId, ddi.value)(props);
     case "Tool": return toolVar(ddi.value)(props);
     case "parameter": return newParameter(props);
     case "Coordinate": return manualEntry(ddi.value)(props);

frontend/sequences/locals_list/location_form_list.ts

@@ -72,17 +72,20 @@ export function locationFormList(resources: ResourceIndex,
   const allPoints = selectAllActivePoints(resources);
   const plantDDI = points2ddi(allPoints, "Plant");
   const genericPointerDDI = points2ddi(allPoints, "GenericPointer");
+  const weedDDI = points2ddi(allPoints, "Weed");
   const toolDDI = activeToolDDIs(resources);
   return [COORDINATE_DDI()]
     .concat(additionalItems)
     .concat(heading("Tool"))
     .concat(toolDDI)
+    .concat(displayGroups ? heading("PointGroup") : [])
+    .concat(displayGroups ? groups2Ddi(selectAllPointGroups(resources)) : [])
     .concat(heading("Plant"))
     .concat(plantDDI)
     .concat(heading("GenericPointer"))
     .concat(genericPointerDDI)
-    .concat(displayGroups ? heading("PointGroup") : [])
+    .concat(heading("Weed"))
-    .concat(displayGroups ? groups2Ddi(selectAllPointGroups(resources)) : []);
+    .concat(weedDDI);
 }
 
 /** Create drop down item with label; i.e., "Point/Plant (1, 2, 3)" */
@@ -126,15 +129,6 @@ export function dropDownName(name: string, v?: Record<Xyz, number | undefined>,
   return capitalize(label);
 }
 
-export const ALL_POINT_LABELS = {
-  "Plant": "All plants",
-  "GenericPointer": "All map points",
-  "Tool": "All tools and seed containers",
-  "ToolSlot": "All slots",
-};
-
-export type EveryPointType = keyof typeof ALL_POINT_LABELS;
-
 export const COORDINATE_DDI = (vector?: Vector3): DropDownItem => ({
   label: vector
     ? `${t("Coordinate")} (${vector.x}, ${vector.y}, ${vector.z})`

frontend/sequences/locals_list/test_helpers.ts

@@ -52,6 +52,16 @@ export function fakeResourceIndex(extra: TaggedResource[] = []): ResourceIndex {
       "y": 200,
       "z": 300,
     }),
+    ...newTaggedResource("Point", {
+      id: 5,
+      meta: {},
+      name: "Weed 1",
+      pointer_type: "Weed",
+      radius: 15,
+      x: 15,
+      y: 25,
+      z: 35,
+    }),
     ...newTaggedResource("Tool", {
       "id": 1,
       "name": "Generic Tool",

frontend/sequences/step_tiles/mark_as.tsx

@@ -11,7 +11,7 @@ import { commitStepChanges } from "./mark_as/commit_step_changes";
 import { t } from "../../i18next_wrapper";
 
 interface MarkAsState { nextResource: DropDownItem | undefined }
-const NONE: DropDownItem = { value: 0, label: "" };
+const NONE = (): DropDownItem => ({ label: t("Select one"), value: 0 });
 
 export class MarkAs extends React.Component<StepParams, MarkAsState> {
   state: MarkAsState = { nextResource: undefined };
@@ -57,7 +57,7 @@ export class MarkAs extends React.Component<StepParams, MarkAsState> {
               list={actionList(this.state.nextResource, step, this.props.resources)}
               onChange={this.commitSelection}
               key={JSON.stringify(rightSide) + JSON.stringify(this.state)}
-              selectedItem={this.state.nextResource ? NONE : rightSide} />
+              selectedItem={this.state.nextResource ? NONE() : rightSide} />
           </Col>
         </Row>
       </StepContent>

frontend/sequences/step_tiles/mark_as/__tests__/action_list_test.ts

@@ -10,7 +10,7 @@ describe("actionList()", () => {
     const step = resourceUpdate({ resource_type: "Plant" });
     const { index } = markAsResourceFixture();
     const result = actionList(undefined, step, index);
-    expect(result).toEqual(PLANT_OPTIONS);
+    expect(result).toEqual(PLANT_OPTIONS());
   });
 
   it("provides a list of tool mount actions", () => {
@@ -35,6 +35,16 @@ describe("actionList()", () => {
     expect(labels).toContain("Removed");
   });
 
+  it("provides a list of weed pointer actions", () => {
+    const ddi = { label: "test case", value: 1, headingId: "Weed" };
+    const step = resourceUpdate({});
+    const { index } = markAsResourceFixture();
+    const result = actionList(ddi, step, index);
+    expect(result.length).toBe(1);
+    const labels = result.map(x => x.label);
+    expect(labels).toContain("Removed");
+  });
+
   it("returns an empty list for all other options", () => {
     const ddi = { label: "test case", value: 1, headingId: "USB Cables" };
     const step = resourceUpdate({});

frontend/sequences/step_tiles/mark_as/__tests__/resource_list_test.ts

@@ -10,5 +10,9 @@ describe("resourceList()", () => {
     expect(headings).toContain("Device");
     expect(headings).toContain("Plants");
     expect(headings).toContain("Points");
+    expect(headings).toContain("Weeds");
+    const weeds = result.filter(x => x.headingId == "Weed");
+    expect(weeds.length).toEqual(2);
+    expect(weeds[1].label).toEqual("weed 1 (200, 400, 0)");
   });
 });

frontend/sequences/step_tiles/mark_as/__tests__/unpack_step_test.ts

@@ -7,6 +7,10 @@ import {
   selectAllGenericPointers,
 } from "../../../../resources/selectors";
 import { DropDownPair } from "../interfaces";
+import { fakeTool } from "../../../../__test_support__/fake_state/resources";
+import {
+  buildResourceIndex,
+} from "../../../../__test_support__/resource_index_builder";
 describe("unpackStep()", () => {
   function assertGoodness(result: DropDownPair,
     action_label: string,
@@ -41,6 +45,23 @@ describe("unpackStep()", () => {
     assertGoodness(result, actionLabel, "mounted", label, value);
   });
 
+  it("unpacks valid tool_ids with missing names", () => {
+    const tool = fakeTool();
+    tool.body.id = 1;
+    tool.body.name = undefined;
+    const resourceIndex = buildResourceIndex([tool]).index;
+    const { body } = selectAllTools(resourceIndex)[0];
+    expect(body).toBeTruthy();
+
+    const result = unpackStep({
+      step: resourceUpdate({ label: "mounted_tool_id", value: body.id || NaN }),
+      resourceIndex
+    });
+    const actionLabel = "Mounted to: Untitled Tool";
+    const { label, value } = TOOL_MOUNT();
+    assertGoodness(result, actionLabel, "mounted", label, value);
+  });
+
   it("unpacks invalid tool_ids (that may have been valid previously)", () => {
     const result = unpackStep({
       step: resourceUpdate({ label: "mounted_tool_id", value: Infinity }),

frontend/sequences/step_tiles/mark_as/action_list.ts

@@ -16,7 +16,7 @@ const allToolsAsDDI = (i: ResourceIndex) => {
     .filter(x => !!x.body.id)
     .map(x => {
       return {
-        label: `${MOUNTED_TO} ${x.body.name}`,
+        label: `${MOUNTED_TO()} ${x.body.name}`,
         value: x.body.id || 0
       };
     });
@@ -25,9 +25,10 @@ const allToolsAsDDI = (i: ResourceIndex) => {
 const DEFAULT = "Default";
 
 const ACTION_LIST: Dictionary<ListBuilder> = {
-  "Device": (i) => [DISMOUNT, ...allToolsAsDDI(i)],
+  "Device": (i) => [DISMOUNT(), ...allToolsAsDDI(i)],
-  "Plant": () => PLANT_OPTIONS,
+  "Plant": () => PLANT_OPTIONS(),
   "GenericPointer": () => POINT_OPTIONS,
+  "Weed": () => POINT_OPTIONS,
   [DEFAULT]: () => []
 };
 

frontend/sequences/step_tiles/mark_as/assertion_support.ts

@@ -7,6 +7,7 @@ import {
   fakePlant,
   fakePoint,
   fakeSequence,
+  fakeWeed,
 } from "../../../__test_support__/fake_state/resources";
 import { betterMerge } from "../../../util";
 import { MarkAs } from "../mark_as";
@@ -30,6 +31,7 @@ export const markAsResourceFixture = () => buildResourceIndex([
   fakePlant(),
   betterMerge(fakeTool(), { body: { name: "T2", id: 2 } }),
   betterMerge(fakePoint(), { body: { name: "my point", id: 7 } }),
+  betterMerge(fakeWeed(), { body: { name: "weed 1", id: 8 } }),
   betterMerge(fakeTool(), { body: { name: "T3", id: undefined } }),
 ]);
 

frontend/sequences/step_tiles/mark_as/constants.ts

@@ -1,9 +1,11 @@
 import { DropDownItem } from "../../../ui";
 import { t } from "../../../i18next_wrapper";
+import { PLANT_STAGE_LIST } from "../../../farm_designer/plants/edit_plant_status";
 
-export const MOUNTED_TO = t("Mounted to:");
+export const MOUNTED_TO = () => t("Mounted to:");
 
-export const DISMOUNT: DropDownItem = { label: t("Not Mounted"), value: 0 };
+export const DISMOUNT = (): DropDownItem =>
+  ({ label: t("Not Mounted"), value: 0 });
 
 /** Legal "actions" for "Mark As.." block when marking Point resources */
 export const POINT_OPTIONS: DropDownItem[] = [
@@ -12,12 +14,7 @@ export const POINT_OPTIONS: DropDownItem[] = [
 
 /** Legal "actions" in the "Mark As.." block when operating on
  * a Plant resource. */
-export const PLANT_OPTIONS: DropDownItem[] = [
+export const PLANT_OPTIONS = PLANT_STAGE_LIST;
-  { label: t("Planned"), value: "planned" },
-  { label: t("Planted"), value: "planted" },
-  { label: t("Sprouted"), value: "sprouted" },
-  { label: t("Harvested"), value: "harvested" },
-];
 
 const value = 0; // Not used in headings.
 
@@ -35,6 +32,13 @@ export const POINT_HEADER: DropDownItem = {
   heading: true
 };
 
+export const WEED_HEADER: DropDownItem = {
+  headingId: "Weed",
+  label: t("Weeds"),
+  value,
+  heading: true
+};
+
 export const TOP_HALF = [
   { headingId: "Device", label: t("Device"), value, heading: true },
   { headingId: "Device", label: t("Tool Mount"), value },

frontend/sequences/step_tiles/mark_as/resource_list.ts

@@ -1,9 +1,9 @@
 import { ResourceIndex } from "../../../resources/interfaces";
 import { DropDownItem } from "../../../ui/fb_select";
 import { selectAllPoints } from "../../../resources/selectors";
-import { TaggedPoint, TaggedPlantPointer } from "farmbot";
+import { TaggedPoint } from "farmbot";
-import { GenericPointer } from "farmbot/dist/resources/api_resources";
+import { Point } from "farmbot/dist/resources/api_resources";
-import { POINT_HEADER, PLANT_HEADER, TOP_HALF } from "./constants";
+import { POINT_HEADER, PLANT_HEADER, TOP_HALF, WEED_HEADER } from "./constants";
 
 /** Filter function to remove resources we don't care about,
  * such as ToolSlots and unsaved (Plant|Point)'s */
@@ -17,26 +17,14 @@ const isRelevant = (x: TaggedPoint) => {
 const labelStr =
   (n: string, x: number, y: number, z: number) => `${n} (${x}, ${y}, ${z})`;
 
-/** Convert a GenericPointer to a DropDownItem that is formatted appropriately
+/** Convert a Point to a DropDownItem that is formatted appropriately
  * for the "Mark As.." step. */
-export const pointer2ddi = (i: GenericPointer): DropDownItem => {
+export const point2ddi = (i: Point): DropDownItem => {
-  const { x, y, z, name } = i;
+  const { x, y, z, name, id, pointer_type } = i;
   return {
-    value: i.id as number,
+    value: id || 0,
     label: labelStr(name, x, y, z),
-    headingId: "GenericPointer"
+    headingId: pointer_type,
-  };
-};
-
-/** Convert a PlantPointer to a DropDownItem appropriately formatted for the
- * "Mark As.." step. */
-export const plant2ddi = (i: TaggedPlantPointer["body"]): DropDownItem => {
-  const { x, y, z, name, id } = i;
-
-  return {
-    value: id as number,
-    label: labelStr(name, x, y, z),
-    headingId: "Plant"
   };
 };
 
@@ -45,16 +33,18 @@ export const plant2ddi = (i: TaggedPlantPointer["body"]): DropDownItem => {
 const pointList =
   (input: TaggedPoint[]): DropDownItem[] => {
     const genericPoints: DropDownItem[] = [POINT_HEADER];
+    const weeds: DropDownItem[] = [WEED_HEADER];
     const plants: DropDownItem[] = [PLANT_HEADER];
     input
       .map(x => x.body)
       .forEach(body => {
         switch (body.pointer_type) {
-          case "GenericPointer": return genericPoints.push(pointer2ddi(body));
+          case "GenericPointer": return genericPoints.push(point2ddi(body));
-          case "Plant": return plants.push(plant2ddi(body));
+          case "Weed": return weeds.push(point2ddi(body));
+          case "Plant": return plants.push(point2ddi(body));
         }
       });
-    return [...plants, ...genericPoints];
+    return [...plants, ...genericPoints, ...weeds];
   };
 
 /** Creates a formatted DropDownItem list for the "Resource" (left hand) side of