{props.children}
,
- Extrude: ({ name }: { name: string }) =>
- {name}
,
+ Extrude: ({ name, onClick, onPointerMove }: {
+ name: string,
+ onClick: (event: Event) => void,
+ onPointerMove: (event: Event) => void,
+ }) =>
+
+ onPointerMove({
+ point: { x: 0, y: 0 },
+ ...e,
+ } as unknown as Event)}
+ onClick={e =>
+ onClick({
+ // @ts-expect-error: This spread always overwrites this property.
+ stopPropagation: jest.fn(),
+ point: { x: 0, y: 0 },
+ ...e,
+ } as unknown as Event)}>
+ {name}
+
,
Line: ({ name }: { name: string }) =>
{name}
,
Trail: ({ name }: { name: string }) =>
diff --git a/frontend/__tests__/external_urls_test.ts b/frontend/__tests__/external_urls_test.ts
index a4791e67c5..b885b81d7c 100644
--- a/frontend/__tests__/external_urls_test.ts
+++ b/frontend/__tests__/external_urls_test.ts
@@ -17,12 +17,6 @@ describe("ExternalUrl", () => {
.toEqual("https://software.farm.bot/docs");
expect(ExternalUrl.softwareForum)
.toEqual("https://forum.farmbot.org/c/software");
- expect(ExternalUrl.OpenFarm.cropApi)
- .toEqual("https://openfarm.cc/api/v1/crops/");
- expect(ExternalUrl.OpenFarm.cropBrowse)
- .toEqual("https://openfarm.cc/crops/");
- expect(ExternalUrl.OpenFarm.newCrop)
- .toEqual("https://openfarm.cc/en/crops/new");
expect(ExternalUrl.Video.desktop)
.toEqual("https://cdn.shopify.com/s/files/1/2040/0289/files/Farm_Designer_Loop.mp4?9552037556691879018");
expect(ExternalUrl.Video.mobile)
diff --git a/frontend/__tests__/interceptors_test.ts b/frontend/__tests__/interceptors_test.ts
index f58a7cdcc7..b4dca074e1 100644
--- a/frontend/__tests__/interceptors_test.ts
+++ b/frontend/__tests__/interceptors_test.ts
@@ -141,11 +141,11 @@ const fake =
(responseURL: string): Partial (dispatch: Function) => void;
-
export interface CropCatalogProps {
- cropSearchQuery: string | undefined;
dispatch: Function;
- cropSearchResults: CropLiveSearchResult[];
- openfarmSearch: OpenfarmSearch;
- cropSearchInProgress: boolean;
plant: TaggedPlantPointer | undefined;
bulkPlantSlug: string | undefined;
hoveredPlant: HoveredPlantPayl;
+ cropSearchQuery: string;
}
export interface CropInfoProps {
dispatch: Function;
designer: DesignerState;
- openfarmCropFetch: OpenfarmSearch;
botPosition: BotPosition;
xySwap: boolean;
getConfigValue: GetWebAppConfigValue;
diff --git a/frontend/farm_designer/map/__tests__/actions_test.ts b/frontend/farm_designer/map/__tests__/actions_test.ts
index cd8366c1a1..42c318409a 100644
--- a/frontend/farm_designer/map/__tests__/actions_test.ts
+++ b/frontend/farm_designer/map/__tests__/actions_test.ts
@@ -21,7 +21,6 @@ import {
import { MovePointToProps, MovePointsProps } from "../../interfaces";
import { edit } from "../../../api/crud";
import { Actions } from "../../../constants";
-import { svgToUrl } from "../../../open_farm/icons";
import { fakeState } from "../../../__test_support__/fake_state";
import { GetState } from "../../../redux/interfaces";
import {
@@ -29,7 +28,7 @@ import {
} from "../../../__test_support__/resource_index_builder";
import { overwriteGroup } from "../../../point_groups/actions";
import { mockDispatch } from "../../../__test_support__/fake_dispatch";
-import { FilePath, Path } from "../../../internal_urls";
+import { Path } from "../../../internal_urls";
describe("movePoints", () => {
it.each<[string, Record<"x" | "y", number>, Record<"x" | "y", number>]>([
@@ -113,18 +112,9 @@ describe("setDragIcon()", () => {
it("sets the drag icon", () => {
const setDragImage = jest.fn();
const e = { currentTarget: new Image(), dataTransfer: { setDragImage } };
- setDragIcon("icon")(e);
+ setDragIcon("mint")(e);
const img = new Image();
- img.src = svgToUrl("icon");
- expect(setDragImage).toHaveBeenCalledWith(img, 0, 0);
- });
-
- it("sets a default drag icon", () => {
- const setDragImage = jest.fn();
- const e = { currentTarget: new Image(), dataTransfer: { setDragImage } };
- setDragIcon(undefined)(e);
- const img = new Image();
- img.src = FilePath.DEFAULT_ICON;
+ img.src = "/crops/icons/mint.avif";
expect(setDragImage).toHaveBeenCalledWith(img, 0, 0);
});
});
@@ -134,9 +124,9 @@ describe("clickMapPlant", () => {
const state = fakeState();
const dispatch = jest.fn();
const getState: GetState = jest.fn(() => state);
- clickMapPlant("fakeUuid", "fakeIcon")(dispatch, getState);
+ clickMapPlant("fakeUuid")(dispatch, getState);
expect(dispatch).toHaveBeenCalledWith(selectPoint(["fakeUuid"]));
- expect(dispatch).toHaveBeenCalledWith(setHoveredPlant("fakeUuid", "fakeIcon"));
+ expect(dispatch).toHaveBeenCalledWith(setHoveredPlant("fakeUuid"));
expect(dispatch).toHaveBeenCalledTimes(2);
});
@@ -149,7 +139,7 @@ describe("clickMapPlant", () => {
state.resources = buildResourceIndex([plant]);
const dispatch = mockDispatch();
const getState: GetState = jest.fn(() => state);
- clickMapPlant(plant.uuid, "fakeIcon")(dispatch, getState);
+ clickMapPlant(plant.uuid)(dispatch, getState);
expect(overwriteGroup).toHaveBeenCalledWith(mockGroup,
expect.objectContaining({
name: "Fake", point_ids: [1, 23]
@@ -164,7 +154,7 @@ describe("clickMapPlant", () => {
state.resources = buildResourceIndex([]);
const dispatch = mockDispatch();
const getState: GetState = jest.fn(() => state);
- clickMapPlant("missing plant uuid", "fakeIcon")(dispatch, getState);
+ clickMapPlant("missing plant uuid")(dispatch, getState);
expect(overwriteGroup).not.toHaveBeenCalled();
expect(dispatch).toHaveBeenCalledTimes(1);
});
@@ -178,7 +168,7 @@ describe("clickMapPlant", () => {
state.resources = buildResourceIndex([plant]);
const dispatch = mockDispatch();
const getState: GetState = jest.fn(() => state);
- clickMapPlant(plant.uuid, "fakeIcon")(dispatch, getState);
+ clickMapPlant(plant.uuid)(dispatch, getState);
expect(overwriteGroup).toHaveBeenCalledWith(mockGroup,
expect.objectContaining({
name: "Fake", point_ids: [1]
@@ -194,7 +184,7 @@ describe("clickMapPlant", () => {
state.resources = buildResourceIndex([plant]);
const dispatch = jest.fn();
const getState: GetState = jest.fn(() => state);
- clickMapPlant(plant.uuid, "fakeIcon")(dispatch, getState);
+ clickMapPlant(plant.uuid)(dispatch, getState);
expect(dispatch).toHaveBeenCalledWith({
type: Actions.SELECT_POINT, payload: [plant.uuid]
});
@@ -210,7 +200,7 @@ describe("clickMapPlant", () => {
state.resources.consumers.farm_designer.selectedPoints = [plant.uuid];
const dispatch = jest.fn();
const getState: GetState = jest.fn(() => state);
- clickMapPlant(plant.uuid, "fakeIcon")(dispatch, getState);
+ clickMapPlant(plant.uuid)(dispatch, getState);
expect(dispatch).toHaveBeenCalledWith({
type: Actions.SELECT_POINT, payload: []
});
diff --git a/frontend/farm_designer/map/__tests__/garden_map_test.tsx b/frontend/farm_designer/map/__tests__/garden_map_test.tsx
index c59de2d539..dca07cda3c 100644
--- a/frontend/farm_designer/map/__tests__/garden_map_test.tsx
+++ b/frontend/farm_designer/map/__tests__/garden_map_test.tsx
@@ -319,7 +319,7 @@ describe("(
> {
- state: GardenPlantState = { icon: FilePath.DEFAULT_ICON, hover: false };
-
- fetchIcon = () => {
- cachedCrop(this.props.plant.body.openfarm_slug)
- .then(({ svg_icon }) => {
- this.setState({ icon: svgToUrl(svg_icon) });
- });
- };
-
- componentDidMount = () => this.fetchIcon();
- componentDidUpdate = (prevProps: GardenPlantProps) =>
- this.props.plant.body.openfarm_slug != prevProps.plant.body.openfarm_slug &&
- this.fetchIcon();
+ state: GardenPlantState = { hover: false };
click = () => {
- this.props.dispatch(clickMapPlant(this.props.uuid, this.state.icon));
+ this.props.dispatch(clickMapPlant(this.props.uuid));
};
iconHover = (action: "start" | "end") => {
@@ -56,10 +42,11 @@ export class GardenPlant extends
activeDragXY, zoomLvl, animate, editing, hovered, hoveredSpread,
} = this.props;
const { id, x, y } = plant.body;
- const { icon, hover } = this.state;
+ const { hover } = this.state;
const radius = (current || selected) && hoveredSpread
? hoveredSpread / 2
: plant.body.radius;
+ const icon = findIcon(plant.body.openfarm_slug);
const plantIconSize = scaleIcon(radius);
const iconRadius = hover ? plantIconSize * 1.1 : plantIconSize;
const { qx, qy } = transformXY(x, y, mapTransformProps);
diff --git a/frontend/farm_designer/map/layers/plants/plant_actions.ts b/frontend/farm_designer/map/layers/plants/plant_actions.ts
index 184616c6e3..822b9a17ee 100644
--- a/frontend/farm_designer/map/layers/plants/plant_actions.ts
+++ b/frontend/farm_designer/map/layers/plants/plant_actions.ts
@@ -8,16 +8,15 @@ import { isNumber } from "lodash";
import {
DesignerState, GardenMapState, MovePointsProps,
} from "../../../interfaces";
-import { findBySlug } from "../../../search_selectors";
import { round, defaultSpreadCmDia } from "../../util";
import { movePointTo, movePoints } from "../../actions";
-import { cachedCrop } from "../../../../open_farm/cached_crop";
import { t } from "../../../../i18next_wrapper";
import { error } from "../../../../toast/toast";
import { TaggedCurve, TaggedPlantTemplate, TaggedPoint } from "farmbot";
import { Path } from "../../../../internal_urls";
import { GetWebAppConfigValue } from "../../../../config_storage/actions";
import { NumericSetting } from "../../../../session_keys";
+import { findCrop } from "../../../../crops/find";
export interface NewPlantKindAndBodyProps {
x: number;
@@ -55,7 +54,7 @@ export const newPlantKindAndBody = (props: NewPlantKindAndBodyProps): {
y: props.y,
openfarm_slug: props.slug,
name: props.cropName,
- radius: DEFAULT_PLANT_RADIUS,
+ radius: props.designer.cropRadius,
depth: props.depth,
plant_stage: props.designer.cropStage,
planted_at: props.designer.cropPlantedAt,
@@ -117,17 +116,17 @@ export const dropPlant = (props: DropPlantProps) => {
const {
gardenCoords, gridSize, dispatch, getConfigValue,
} = props;
- const { companionIndex, cropSearchResults, openedSavedGarden } = props.designer;
+ const { companionIndex, openedSavedGarden } = props.designer;
if (gardenCoords) {
- const slug = Path.getSlug(Path.plants(1));
+ const slug = Path.getCropSlug();
if (!slug) { console.log("Missing slug."); return; }
- const crop = isNumber(companionIndex)
- ? cropSearchResults[0]?.companions[companionIndex]
- : findBySlug(cropSearchResults, slug).crop;
- if (!crop) { console.log("Missing crop."); return; }
+ const cropSlug = isNumber(companionIndex)
+ ? findCrop(slug).companions[companionIndex]
+ : slug;
+ const crop = findCrop(cropSlug);
createPlant({
cropName: crop.name,
- slug: crop.slug,
+ slug: cropSlug,
gardenCoords,
gridSize,
dispatch,
@@ -213,9 +212,8 @@ export const setActiveSpread = (props: SetActiveSpreadProps): void => {
const defaultSpread = props.selectedPlant
? defaultSpreadCmDia(props.selectedPlant.body.radius)
: 0;
- cachedCrop(props.slug)
- .then(({ spread }) =>
- props.setMapState({ activeDragSpread: spread || defaultSpread }));
+ const crop = findCrop(props.slug);
+ props.setMapState({ activeDragSpread: crop.spread || defaultSpread });
};
export interface BeginPlantDragProps {
diff --git a/frontend/farm_designer/map/layers/spread/__tests__/spread_layer_test.tsx b/frontend/farm_designer/map/layers/spread/__tests__/spread_layer_test.tsx
index 39444e1370..dc802edea3 100644
--- a/frontend/farm_designer/map/layers/spread/__tests__/spread_layer_test.tsx
+++ b/frontend/farm_designer/map/layers/spread/__tests__/spread_layer_test.tsx
@@ -8,7 +8,6 @@ import {
fakeMapTransformProps,
} from "../../../../../__test_support__/map_transform_props";
import { SpreadOverlapHelper } from "../spread_overlap_helper";
-import { cachedCrop } from "../../../../../open_farm/cached_crop";
describe("
{plants.map(p => {
const selected = p.uuid === currentPlant?.uuid;
+ const { spread } = findCrop(p.body.openfarm_slug);
return
{visible &&
;
@@ -60,54 +62,33 @@ export interface SpreadCircleProps {
selected: boolean;
}
-interface SpreadCircleState {
- spread: number | undefined;
- loaded: boolean;
-}
-
-export class SpreadCircle extends
- React.Component {
- state: SpreadCircleState = { spread: undefined, loaded: false };
-
- fetchSpread = () => {
- cachedCrop(this.props.plant.body.openfarm_slug)
- .then(({ spread }) => this.setState({ spread, loaded: true }));
- };
-
- componentDidMount = () => this.fetchSpread();
- componentDidUpdate = (prevProps: SpreadCircleProps) =>
- this.props.plant.body.openfarm_slug != prevProps.plant.body.openfarm_slug &&
- this.fetchSpread();
-
- render() {
- const { radius, x, y, id } = this.props.plant.body;
- const { visible, mapTransformProps, animate } = this.props;
- const { qx, qy } = transformXY(round(x), round(y), mapTransformProps);
- const spreadDiaCm = this.state.loaded
- ? this.state.spread || defaultSpreadCmDia(radius)
- : 0;
- return
- {visible &&
- ;
- }
-}
+export const SpreadCircle = (props: SpreadCircleProps) => {
+ const { radius, x, y, id } = props.plant.body;
+ const { visible, mapTransformProps, animate } = props;
+ const { qx, qy } = transformXY(round(x), round(y), mapTransformProps);
+ const { spread } = findCrop(props.plant.body.openfarm_slug);
+ const spreadDiaCm = spread || defaultSpreadCmDia(radius);
+ return
+ {visible &&
+ ;
+};
diff --git a/frontend/farm_designer/map/layers/spread/spread_overlap_helper.tsx b/frontend/farm_designer/map/layers/spread/spread_overlap_helper.tsx
index 75089b6ac8..ff4809ce6c 100644
--- a/frontend/farm_designer/map/layers/spread/spread_overlap_helper.tsx
+++ b/frontend/farm_designer/map/layers/spread/spread_overlap_helper.tsx
@@ -2,7 +2,6 @@ import React from "react";
import { SpreadOverlapHelperProps } from "../../interfaces";
import { round, transformXY, defaultSpreadCmDia } from "../../util";
import { BotPosition } from "../../../../devices/interfaces";
-import { cachedCrop } from "../../../../open_farm/cached_crop";
import { isUndefined } from "lodash";
enum OverlapColor {
@@ -22,10 +21,6 @@ export enum SpreadOption {
type SpreadRadii = { inactive: number, active: number };
-interface SpreadCircleState {
- inactiveSpread: number | undefined;
-}
-
export function getDiscreteColor(
overlap: number, spreadRadius: number): OverlapColor {
// Return overlap severity color based on discrete intervals.
@@ -129,48 +124,37 @@ export function overlapText(
}
}
-export class SpreadOverlapHelper extends
- React.Component {
- state: SpreadCircleState = { inactiveSpread: undefined };
-
- componentDidMount() {
- cachedCrop(this.props.plant.body.openfarm_slug)
- .then(({ spread }) => this.setState({ inactiveSpread: spread }));
- }
-
- render() {
- const { dragging, plant, activeDragXY, activeDragSpread,
- mapTransformProps } = this.props;
- const { radius, x, y } = plant.body;
- const { qx, qy } = transformXY(round(x), round(y), mapTransformProps);
- const gardenCoord: BotPosition = { x: round(x), y: round(y), z: 0 };
- const { inactiveSpread } = this.state;
- // Convert spread diameter in cm to radius in mm.
- const spreadRadii = {
- active: (activeDragSpread || 0) / 2 * 10,
- inactive: (inactiveSpread || defaultSpreadCmDia(radius)) / 2 * 10,
- };
+export const SpreadOverlapHelper = (props: SpreadOverlapHelperProps) => {
+ const { dragging, plant, activeDragXY, activeDragSpread, inactiveSpread,
+ mapTransformProps } = props;
+ const { radius, x, y } = plant.body;
+ const { qx, qy } = transformXY(round(x), round(y), mapTransformProps);
+ const gardenCoord: BotPosition = { x: round(x), y: round(y), z: 0 };
+ // Convert spread diameter in cm to radius in mm.
+ const spreadRadii = {
+ active: (activeDragSpread || 0) / 2 * 10,
+ inactive: (inactiveSpread || defaultSpreadCmDia(radius)) / 2 * 10,
+ };
- const overlapValue = getOverlap(activeDragXY, gardenCoord, spreadRadii);
- // Overlap is evaluated against the inactive plant since evaluating
- // against the active plant would require keeping a list of all plants
- // overlapping the active plant. Therefore, the spread overlap helper
- // should be thought of as a tool checking the inactive plants, not
- // the plant being edited. Dragging a plant with a small spread into
- // the area of a plant with large spread will illustrate this point.
- const color = getContinuousColor(
- overlapValue, getRadius(SpreadOption.InactivePlant, spreadRadii));
+ const overlapValue = getOverlap(activeDragXY, gardenCoord, spreadRadii);
+ // Overlap is evaluated against the inactive plant since evaluating
+ // against the active plant would require keeping a list of all plants
+ // overlapping the active plant. Therefore, the spread overlap helper
+ // should be thought of as a tool checking the inactive plants, not
+ // the plant being edited. Dragging a plant with a small spread into
+ // the area of a plant with large spread will illustrate this point.
+ const color = getContinuousColor(
+ overlapValue, getRadius(SpreadOption.InactivePlant, spreadRadii));
- return
- {!dragging && // Non-active plants
- ;
- }
-}
+ return
+ {!dragging && // Non-active plants
+ ;
+};
diff --git a/frontend/farm_designer/map/profile/__tests__/plants_and_weeds_test.tsx b/frontend/farm_designer/map/profile/__tests__/plants_and_weeds_test.tsx
index 183788829f..af6268a74b 100644
--- a/frontend/farm_designer/map/profile/__tests__/plants_and_weeds_test.tsx
+++ b/frontend/farm_designer/map/profile/__tests__/plants_and_weeds_test.tsx
@@ -1,8 +1,3 @@
-let mockSpread = 0;
-jest.mock("../../../../open_farm/cached_crop", () => ({
- cachedCrop: jest.fn(() => Promise.resolve({ icon: "", spread: mockSpread })),
-}));
-
import React from "react";
import { svgMount } from "../../../../__test_support__/svg_mount";
import {
@@ -30,7 +25,6 @@ describe(" {
point: T;
tools: TaggedTool[];
diff --git a/frontend/farm_designer/map/profile/plants_and_weeds.tsx b/frontend/farm_designer/map/profile/plants_and_weeds.tsx
index afbdde6be4..68d81e194e 100644
--- a/frontend/farm_designer/map/profile/plants_and_weeds.tsx
+++ b/frontend/farm_designer/map/profile/plants_and_weeds.tsx
@@ -1,92 +1,79 @@
import React from "react";
import { TaggedWeedPointer } from "farmbot";
-import { PlantPointState, ProfilePointProps } from "./interfaces";
+import { ProfilePointProps } from "./interfaces";
import { Color } from "../../../ui";
import { defaultSpreadCmDia, scaleIcon } from "../util";
-import { svgToUrl } from "../../../open_farm/icons";
import { TaggedPlant } from "../interfaces";
-import { cachedCrop } from "../../../open_farm/cached_crop";
import { BooleanSetting } from "../../../session_keys";
import { FilePath } from "../../../internal_urls";
+import { findCrop, findIcon } from "../../../crops/find";
/** Plant point profile. */
-export class PlantPoint
- extends React.Component, PlantPointState> {
- state: PlantPointState = {
- icon: FilePath.DEFAULT_ICON,
- spreadDiaCm: defaultSpreadCmDia(this.props.point.body.radius),
- };
-
- componentDidMount() {
- cachedCrop(this.props.point.body.openfarm_slug)
- .then(({ svg_icon, spread }) =>
- this.setState({ icon: svgToUrl(svg_icon), spreadDiaCm: spread || 0 }));
- }
-
- render() {
- const { point, getX, soilHeight, getConfigValue, designer } = this.props;
- const { icon, spreadDiaCm } = this.state;
- const currentPlantUuid = designer.selectedPoints?.[0];
- const radius = point.uuid == currentPlantUuid && designer.hoveredSpread
- ? designer.hoveredSpread / 2
- : point.body.radius;
- const plantIconSize = scaleIcon(radius) * 2;
- const spreadRadius = (spreadDiaCm || defaultSpreadCmDia(radius)) / 2 * 10;
- const profileX = getX(point.body);
- const profileY = point.body.z == 0 ? soilHeight : point.body.z;
- const depth = point.kind == "Point"
- ? point.body.depth
- : 0;
- return
-
-
-
-
-
-
-
-
-
-
- {getConfigValue(BooleanSetting.show_spread) &&
- ;
- }
-}
+export const PlantPoint = (props: ProfilePointProps) => {
+ const { point, getX, soilHeight, getConfigValue, designer } = props;
+ const currentPlantUuid = designer.selectedPoints?.[0];
+ const radius = point.uuid == currentPlantUuid && designer.hoveredSpread
+ ? designer.hoveredSpread / 2
+ : point.body.radius;
+ const plantIconSize = scaleIcon(radius) * 2;
+ const slug = point.body.openfarm_slug;
+ const spreadDiaCm = findCrop(slug).spread;
+ const icon = findIcon(slug);
+ const spreadRadius = (spreadDiaCm || defaultSpreadCmDia(radius)) / 2 * 10;
+ const profileX = getX(point.body);
+ const profileY = point.body.z == 0 ? soilHeight : point.body.z;
+ const depth = point.kind == "Point"
+ ? point.body.depth
+ : 0;
+ return
+
+
+
+
+
+
+
+
+
+
+ {getConfigValue(BooleanSetting.show_spread) &&
+ ;
+};
/** Weed point profile. */
export const WeedPoint = (props: ProfilePointProps) => {
diff --git a/frontend/farm_designer/plant.ts b/frontend/farm_designer/plant.ts
index daac63694d..a30b44907c 100644
--- a/frontend/farm_designer/plant.ts
+++ b/frontend/farm_designer/plant.ts
@@ -1,11 +1,15 @@
+import { sample } from "lodash";
import { PlantOptions } from "./interfaces";
import { PlantPointer } from "farmbot/dist/resources/api_resources";
+import { SLUGS } from "../crops/constants";
export const DEFAULT_PLANT_RADIUS = 25;
+export const verifiedCropSlug = (slug: string | undefined): string =>
+ (slug == "random" ? sample(SLUGS) : slug) || "not-set";
+
/** Factory function for Plant types. */
export function Plant(options: PlantOptions): PlantPointer {
- const openfarm_slug = options.openfarm_slug || "not-set";
return {
id: options.id,
pointer_type: "Plant",
@@ -16,7 +20,7 @@ export function Plant(options: PlantOptions): PlantPointer {
z: 0,
radius: (options.radius || DEFAULT_PLANT_RADIUS),
depth: options.depth || 0,
- openfarm_slug,
+ openfarm_slug: verifiedCropSlug(options.openfarm_slug),
plant_stage: options.plant_stage || "planned",
planted_at: options.planted_at,
water_curve_id: options.water_curve_id,
diff --git a/frontend/farm_designer/reducer.ts b/frontend/farm_designer/reducer.ts
index e012b3c386..0ebc16e9b0 100644
--- a/frontend/farm_designer/reducer.ts
+++ b/frontend/farm_designer/reducer.ts
@@ -1,12 +1,10 @@
import {
DesignerState,
- CropLiveSearchResult,
DrawnPointPayl,
DrawnWeedPayl,
HoveredPlantPayl,
} from "./interfaces";
import { generateReducer } from "../redux/generate_reducer";
-import { cloneDeep } from "lodash";
import { TaggedResource, PointType, PlantStage } from "farmbot";
import { Actions } from "../constants";
import { BotPosition } from "../devices/interfaces";
@@ -18,7 +16,6 @@ export const initialState: DesignerState = {
selectionPointType: undefined,
hoveredPlant: {
plantUUID: undefined,
- icon: ""
},
hoveredPoint: undefined,
hoveredSpread: undefined,
@@ -27,8 +24,6 @@ export const initialState: DesignerState = {
hoveredSensorReading: undefined,
hoveredImage: undefined,
cropSearchQuery: "",
- cropSearchResults: [],
- cropSearchInProgress: false,
companionIndex: undefined,
plantTypeChangeId: undefined,
bulkPlantSlug: undefined,
@@ -63,23 +58,14 @@ export const initialState: DesignerState = {
cropHeightCurveId: undefined,
cropStage: undefined,
cropPlantedAt: undefined,
+ cropRadius: undefined,
distanceIndicator: "",
panelOpen: true,
};
export const designer = generateReducer(initialState)
.add(Actions.SEARCH_QUERY_CHANGE, (s, { payload }) => {
- s.cropSearchInProgress = true;
- const state = cloneDeep(s);
- state.cropSearchQuery = payload;
- return state;
- })
- .add(Actions.OF_SEARCH_RESULTS_START, (s) => {
- s.cropSearchInProgress = true;
- return s;
- })
- .add(Actions.OF_SEARCH_RESULTS_NO, (s) => {
- s.cropSearchInProgress = false;
+ s.cropSearchQuery = payload;
return s;
})
.add(Actions.SET_PLANT_TYPE_CHANGE_ID, (s, { payload }) => {
@@ -127,6 +113,10 @@ export const designer = generateReducer(initialState)
s.cropPlantedAt = payload;
return s;
})
+ .add(Actions.SET_CROP_RADIUS, (s, { payload }) => {
+ s.cropRadius = payload;
+ return s;
+ })
.add(Actions.HOVER_PLANT_LIST_ITEM, (s, { payload }) => {
s.hoveredPlantListItem = payload;
return s;
@@ -165,18 +155,13 @@ export const designer = generateReducer(initialState)
s.drawnWeed && (s.drawnWeed.color = color);
return s;
})
- .add(Actions.OF_SEARCH_RESULTS_OK, (s, a) => {
- s.cropSearchResults = a.payload;
- s.cropSearchInProgress = false;
- return s;
- })
.add(Actions.SET_COMPANION_INDEX, (s, a) => {
s.companionIndex = a.payload;
return s;
})
.add(Actions.DESTROY_RESOURCE_OK, (s) => {
s.selectedPoints = undefined;
- s.hoveredPlant = { plantUUID: undefined, icon: "" };
+ s.hoveredPlant = { plantUUID: undefined };
return s;
})
.add(Actions.CHOOSE_LOCATION, (s, { payload }) => {
diff --git a/frontend/farm_designer/search_selectors.ts b/frontend/farm_designer/search_selectors.ts
deleted file mode 100644
index bdca35d7c9..0000000000
--- a/frontend/farm_designer/search_selectors.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { CropLiveSearchResult } from "./interfaces";
-import { startCase, find } from "lodash";
-import { FilePath } from "../internal_urls";
-
-export function findBySlug(
- crops: CropLiveSearchResult[], slug?: string): CropLiveSearchResult {
- const crop = find(crops, result => result.crop.slug === slug);
- return crop || {
- crop: {
- name: startCase((slug || "").split("-").join(" ")),
- slug: slug || "",
- binomial_name: "",
- common_names: [],
- description: "",
- sun_requirements: "",
- sowing_method: "",
- processing_pictures: 0,
- main_image_path: "",
- },
- images: [FilePath.DEFAULT_ICON],
- companions: [],
- };
-}
diff --git a/frontend/farm_designer/three_d_garden_map.tsx b/frontend/farm_designer/three_d_garden_map.tsx
index dd1bae4614..9f8bd7fe20 100644
--- a/frontend/farm_designer/three_d_garden_map.tsx
+++ b/frontend/farm_designer/three_d_garden_map.tsx
@@ -4,11 +4,11 @@ import { INITIAL } from "../three_d_garden/config";
import {
BotSize, MapTransformProps, AxisNumberProperty, TaggedPlant,
} from "./map/interfaces";
-import { camelCase, clone } from "lodash";
+import { clone } from "lodash";
import { SourceFbosConfig } from "../devices/interfaces";
-import { ConfigurationName } from "farmbot";
+import { ConfigurationName, TaggedCurve } from "farmbot";
import { DesignerState } from "./interfaces";
-import { ASSETS } from "../three_d_garden/constants";
+import { GetWebAppConfigValue } from "../config_storage/actions";
export interface ThreeDGardenMapProps {
botSize: BotSize;
@@ -18,6 +18,9 @@ export interface ThreeDGardenMapProps {
sourceFbosConfig: SourceFbosConfig;
designer: DesignerState;
plants: TaggedPlant[];
+ dispatch: Function;
+ getWebAppConfigValue: GetWebAppConfigValue;
+ curves: TaggedCurve[];
}
export const ThreeDGardenMap = (props: ThreeDGardenMapProps) => {
@@ -51,20 +54,17 @@ export const ThreeDGardenMap = (props: ThreeDGardenMapProps) => {
config.bounds = !!getValue("bounds");
config.grid = !!getValue("grid");
- const plants = props.plants.map(plant => {
- return {
- label: plant.body.name,
- icon: ASSETS.icons[camelCase(plant.body.openfarm_slug)]
- || ASSETS.icons.arugula,
- size: plant.body.radius * 2,
- spread: 0,
- x: plant.body.x + config.bedXOffset,
- y: plant.body.y + config.bedYOffset,
- };
- });
-
config.zoom = true;
config.pan = true;
- return =>
- axios.get(searchUrl(q));
-const openFarmSearchQuerySpecific =
- (q: string): AxiosPromise =>
- axios.get(specificUrl(q));
-
-const FALLBACK: OpenFarm.Included[] = [];
-const OFSearchRaw = (specific: boolean) => (searchTerm: string) =>
- (dispatch: Function) => {
- dispatch({ type: Actions.OF_SEARCH_RESULTS_START, payload: undefined });
- (specific
- ? openFarmSearchQuerySpecific(searchTerm)
- : openFarmSearchQuery(searchTerm))
- .then(resp => {
- const imageUrls: string[] = [];
- const companions: OpenFarm.CompanionsData[] = [];
- get(resp, "data.included", FALLBACK)
- .map((item: OpenFarm.Included) => {
- switch (item.type) {
- case "crops-pictures":
- imageUrls.push(item.attributes.thumbnail_url);
- break;
- case "crops":
- const { name, slug, svg_icon } = item.attributes;
- companions.push({ name, slug, svg_icon });
- break;
- }
- });
- const payload = flatten([resp.data.data]).map(datum => {
- const crop = datum.attributes;
- const images = imageUrls.length > 0 ? imageUrls : [FilePath.DEFAULT_ICON];
- return { crop, images, companions };
- });
- dispatch({ type: Actions.OF_SEARCH_RESULTS_OK, payload });
- })
- .catch(() =>
- dispatch({ type: Actions.OF_SEARCH_RESULTS_NO, payload: undefined }));
- };
-
-export const OFCropFetch = OFSearchRaw(true);
-export const OFSearch = OFSearchRaw(false);
function isExecutableType(x?: string): x is ExecutableType {
const EXECUTABLES: ExecutableType[] = ["Sequence", "Regimen"];
diff --git a/frontend/interceptors.ts b/frontend/interceptors.ts
index 8286951a9b..4e74171809 100644
--- a/frontend/interceptors.ts
+++ b/frontend/interceptors.ts
@@ -29,10 +29,7 @@ export function responseRejected(x: SafeError | undefined) {
dispatchNetworkUp("user.api", now());
const a = ![451, 401, 422].includes(x.response.status);
const b = x.response.status > 399;
- // Openfarm API was sending too many 404's.
- const c = !(get(x, "response.config.url", "") as string)
- .includes("openfarm.cc/");
- if (a && b && c) {
+ if (a && b) {
setTimeout(() => {
// Explicitly throw error so error reporting tool will save it.
const respString = JSON.stringify(x.response);
diff --git a/frontend/internal_urls.ts b/frontend/internal_urls.ts
index 4f8aaace93..df9f00248e 100644
--- a/frontend/internal_urls.ts
+++ b/frontend/internal_urls.ts
@@ -1,4 +1,4 @@
-import { isUndefined, last } from "lodash";
+import { isUndefined, kebabCase, last } from "lodash";
import { t } from "./i18next_wrapper";
export namespace Path {
@@ -92,6 +92,7 @@ export namespace Path {
export const idIndex = (path: string) => path.split("/").length + 0;
export const getSlug = (path: string): string =>
getPathArray()[Path.idIndex(path)] || "";
+ export const getCropSlug = () => kebabCase(Path.getSlug(Path.cropSearch()));
}
export namespace FilePath {
diff --git a/frontend/open_farm/__tests__/cached_crop_test.ts b/frontend/open_farm/__tests__/cached_crop_test.ts
deleted file mode 100644
index 747a4e64d0..0000000000
--- a/frontend/open_farm/__tests__/cached_crop_test.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-const mockIcon = "";
-const mockResponse: { promise: Promise<{}> } = {
- promise: Promise.resolve({
- data: {
- id: 0,
- data: {
- attributes: {
- svg_icon: "",
- slug: "lettuce"
- }
- }
- }
- })
-};
-
-jest.mock("axios", () => ({
- get: jest.fn(() => mockResponse.promise)
-}));
-
-jest.unmock("../cached_crop");
-import { cachedCrop, maybeGetCachedPlantIcon, promiseCache } from "../cached_crop";
-import axios from "axios";
-import { times } from "lodash";
-import { imgEvent } from "../../__test_support__/fake_html_events";
-import { svgToUrl } from "../icons";
-
-describe("cachedIcon()", () => {
- it("does an HTTP request if the icon can't be found locally", async () => {
- times(10, () => cachedCrop("lettuce"));
- const item1 = await cachedCrop("lettuce");
- expect(item1.svg_icon).toContain(mockIcon);
- const item2 = await cachedCrop("lettuce");
- expect(item2.slug).toBe(item1.slug);
- expect(item2.svg_icon).toBe(item1.svg_icon);
- expect(item2.spread).toBe(undefined);
- expect(axios.get).toHaveBeenCalledTimes(1);
- });
-
- it("handles unexpected responses from OpenFarm", async () => {
- const old = mockResponse.promise;
- mockResponse.promise = Promise.resolve({ data: {} });
- const radish = await cachedCrop("radish");
- expect(radish.spread).toBeUndefined();
- expect(radish.svg_icon).toBeUndefined();
- mockResponse.promise = old;
- });
-});
-
-describe("maybeGetCachedPlantIcon()", () => {
- beforeEach(() => {
- Object.keys(promiseCache).map(key => delete promiseCache[key]);
- });
-
- const expectedIcon = svgToUrl(mockIcon);
-
- it("sets src", async () => {
- const img = imgEvent().currentTarget;
- const cb = jest.fn();
- await maybeGetCachedPlantIcon("slug", img, cb);
- await expect(axios.get).toHaveBeenCalledWith(expect.stringContaining(
- "slug"));
- expect(img.getAttribute).toHaveBeenCalledWith("src");
- expect(img.setAttribute).toHaveBeenCalledWith("src", expectedIcon);
- expect(cb).toHaveBeenCalledWith(expectedIcon);
- });
-
- it("doesn't set icon twice", async () => {
- const img = imgEvent().currentTarget;
- img.getAttribute = jest.fn(() => expectedIcon);
- const cb = jest.fn();
- await maybeGetCachedPlantIcon("slug", img, cb);
- await expect(axios.get).toHaveBeenCalledWith(expect.stringContaining(
- "slug"));
- expect(img.getAttribute).toHaveBeenCalledWith("src");
- expect(img.setAttribute).not.toHaveBeenCalled();
- expect(cb).toHaveBeenCalledWith(expectedIcon);
- });
-
- it("doesn't set icon when undefined", async () => {
- const img = imgEvent().currentTarget;
- img.getAttribute = jest.fn(() => expectedIcon);
- const cb = jest.fn();
- await maybeGetCachedPlantIcon("", img, cb);
- await expect(axios.get).not.toHaveBeenCalled();
- expect(img.getAttribute).not.toHaveBeenCalled();
- expect(img.setAttribute).not.toHaveBeenCalled();
- expect(cb).not.toHaveBeenCalled();
- });
-});
diff --git a/frontend/open_farm/__tests__/icons_test.ts b/frontend/open_farm/__tests__/icons_test.ts
deleted file mode 100644
index 153fd1e748..0000000000
--- a/frontend/open_farm/__tests__/icons_test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { svgToUrl } from "../icons";
-
-describe("svgToUrl()", () => {
- it("returns svg url", () => {
- expect(svgToUrl("icon")).toEqual("data:image/svg+xml;utf8,icon");
- });
-});
diff --git a/frontend/open_farm/cached_crop.ts b/frontend/open_farm/cached_crop.ts
deleted file mode 100644
index c8ba7fd0fe..0000000000
--- a/frontend/open_farm/cached_crop.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import axios, { AxiosResponse } from "axios";
-import { Dictionary } from "farmbot";
-import { isObject, isUndefined } from "lodash";
-import { OFCropAttrs, OFCropResponse, svgToUrl } from "./icons";
-import { ExternalUrl } from "../external_urls";
-
-type OFIcon = Readonly;
-type IconDictionary = Dictionary;
-
-const STORAGE_KEY = "openfarm_icons_with_spread";
-
-function initLocalStorage() {
- localStorage.setItem(STORAGE_KEY, "{}");
- return {};
-}
-
-function getAllIconsFromCache(): IconDictionary {
- try {
- const dictionary = JSON.parse(localStorage.getItem(STORAGE_KEY) || "");
- return isObject(dictionary) ? dictionary as IconDictionary : initLocalStorage();
- } catch (error) {
- return initLocalStorage();
- }
-}
-
-function localStorageIconFetch(slug: string): Promise | undefined {
- const icon = getAllIconsFromCache()[slug];
- return icon ? Promise.resolve(icon) : undefined;
-}
-
-function localStorageIconSet(icon: OFIcon): void {
- const dictionary = getAllIconsFromCache();
- dictionary[icon.slug] = icon;
- localStorage.setItem(STORAGE_KEY, JSON.stringify(dictionary));
-}
-
-/** PROBLEM: HTTP requests get fired too fast. If you have 10 garlic plants,
- * and the garlic icon is not cached locally, and you try to render 10 garlic
- * icons in the first 100ms, and HTTP requests take more than 100ms, you will
- * end up performing 10 HTTP requests at application start time. Not very
- * efficient.
- * SOLUTION: Keep a record of open requests to avoid duplicate requests. */
-export const promiseCache: Dictionary>> = {};
-
-const cacheTheIcon = (slug: string) =>
- (resp: AxiosResponse): OFIcon => {
- if (resp?.data?.data?.attributes) {
- const icon = {
- slug: resp.data.data.attributes.slug,
- spread: resp.data.data.attributes.spread,
- svg_icon: resp.data.data.attributes.svg_icon
- };
- localStorageIconSet(icon);
- return icon;
- } else {
- return { slug, spread: undefined, svg_icon: undefined };
- }
- };
-
-function HTTPIconFetch(slug: string) {
- const url = ExternalUrl.OpenFarm.cropApi + slug;
- // Avoid duplicate requests.
- if (!isUndefined(promiseCache[url])) { return promiseCache[url]; }
- promiseCache[url] = axios
- .get(url)
- .then(cacheTheIcon(slug), cacheTheIcon(slug));
- return promiseCache[url];
-}
-
-/** PROBLEM: You have 100 lettuce plants. You don't want to download an SVG icon
- * 100 times.
- * SOLUTION: Cache stuff. */
-export function cachedCrop(slug: string): Promise {
- return localStorageIconFetch(slug) || HTTPIconFetch(slug);
-}
-
-export const maybeGetCachedPlantIcon = (
- slug: string | undefined,
- target: React.SyntheticEvent["currentTarget"],
- cb: (icon: string) => void) => {
- slug && cachedCrop(slug)
- .then(crop => {
- const i = svgToUrl(crop.svg_icon);
- setImgSrc(target, i);
- cb(i);
- });
-};
-
-export const setImgSrc = (
- target: React.SyntheticEvent["currentTarget"],
- icon: string) => {
- if (icon !== target.getAttribute("src")) {
- target.setAttribute("src", icon);
- }
-};
diff --git a/frontend/open_farm/icons.ts b/frontend/open_farm/icons.ts
deleted file mode 100644
index 63555a6c61..0000000000
--- a/frontend/open_farm/icons.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { FilePath } from "../internal_urls";
-
-const DATA_URI = "data:image/svg+xml;utf8,";
-
-export interface OFCropAttrs {
- svg_icon?: string | undefined;
- spread?: number | undefined;
- slug: string;
-}
-
-export interface OFCropResponse {
- id?: undefined;
- // Attributes available, possibly not declared in the interface:
- // binomial_name, common_names, description,
- // growing_degree_days, guides_count, height, main_image_path,
- // name, processing_pictures, row_spacing, slug, sowing_method,
- // spread, sun_requirements, svg_icon, tags_array, taxon
- data?: {
- attributes?: OFCropAttrs | undefined;
- };
-}
-
-export function svgToUrl(xml: string | undefined): string {
- return xml
- ? (DATA_URI + encodeURIComponent(xml))
- : FilePath.DEFAULT_ICON;
-}
diff --git a/frontend/open_farm/openfarm.ts b/frontend/open_farm/openfarm.ts
deleted file mode 100644
index fd614367be..0000000000
--- a/frontend/open_farm/openfarm.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-export namespace OpenFarm {
-
- /** An OpenFarm.cc crop entry. NOT a farmbot.cc Crop. */
- export interface OFCrop {
- name: string;
- slug: string;
- binomial_name: string;
- common_names: string[];
- description: string;
- sun_requirements: string;
- sowing_method: string;
- svg_icon?: string | undefined;
- // Unsure of this. Def not an object tho.
- spread?: number | undefined;
- row_spacing?: number;
- height?: number;
- processing_pictures: number;
- guides_count?: number;
- main_image_path: string;
- taxon?: string;
- tags_array?: string[];
- growing_degree_days?: number;
- }
-
- export interface CompanionsData {
- name: string;
- slug: string;
- svg_icon?: string | undefined;
- }
-
- interface Self {
- api: string;
- website: string;
- }
-
- export interface Links {
- self: Self;
- }
-
- interface Links2 {
- related: string;
- }
-
- interface Datum2 {
- type: string;
- id: string;
- }
-
- export interface Companions {
- links: Links2;
- }
-
- interface Pictures {
- links: Links2;
- data: Datum2[];
- }
-
- interface Relationships {
- companions: Companions;
- pictures: Pictures;
- }
-
- export interface Datum {
- id: string;
- type: string;
- attributes: OFCrop;
- links: Links;
- relationships: Relationships;
- }
-
- interface ImageAttrs {
- id: string;
- image_url: string;
- small_url: string;
- thumbnail_url: string;
- medium_url: string;
- large_url: string;
- canopy_url: string;
- }
-
- interface IncludedPictures {
- id: string;
- type: "crops-pictures";
- attributes: ImageAttrs;
- }
-
- interface IncludedCompanion {
- id: string;
- type: "crops";
- attributes: OFCrop;
- links: Links;
- relationships: Relationships;
- }
-
- export type Included = IncludedPictures | IncludedCompanion;
-}
-
-/** Returned by https://openfarm.cc/api/v1/crops?filter=q */
-export interface CropSearchResult {
- data: OpenFarm.Datum[];
- included: OpenFarm.Included[];
-}
-
-/** Returned by https://openfarm.cc/api/v1/q */
-export interface CropSearchResultSpecific {
- data: OpenFarm.Datum;
- included: OpenFarm.Included[];
-}
diff --git a/frontend/plants/__tests__/add_plant_test.tsx b/frontend/plants/__tests__/add_plant_test.tsx
index e2f54ac919..ca5d757f34 100644
--- a/frontend/plants/__tests__/add_plant_test.tsx
+++ b/frontend/plants/__tests__/add_plant_test.tsx
@@ -3,10 +3,6 @@ import { mount } from "enzyme";
import {
RawAddPlant as AddPlant, AddPlantProps, mapStateToProps,
} from "../add_plant";
-import {
- fakeCropLiveSearchResult,
-} from "../../__test_support__/fake_crop_search_result";
-import { svgToUrl } from "../../open_farm/icons";
import { fakeState } from "../../__test_support__/fake_state";
import {
buildResourceIndex,
@@ -20,14 +16,10 @@ import { fakeDesignerState } from "../../__test_support__/fake_designer_state";
describe("((((})
+ onDragStart={setDragIcon(slug)} />
{t("Drag and drop")} {t("the icon onto the map or ")}
{t("CLICK anywhere within the grid")} {t(`to add the plant
@@ -47,40 +45,33 @@ const AddPlantDescription = ({ svgIcon, children }: APDProps) =>
export interface AddPlantProps {
dispatch: Function;
- openfarmCropFetch: OpenfarmSearch;
xy_swap: boolean;
botPosition: BotPosition;
designer: DesignerState;
}
export class RawAddPlant extends React.Component {
-
- componentDidMount() {
- this.props.dispatch(searchForCurrentCrop(this.props.openfarmCropFetch));
- }
-
render() {
- const { cropSearchResults } = this.props.designer;
- const { result, backgroundURL } =
- getCropHeaderProps({ cropSearchResults });
const panelName = "add-plant";
- const descElem =
+ const slug = Path.getCropSlug();
+ const crop = findCrop(slug);
+ const descElem =
;
return
{
-
- debouncedOFSearch = debounce((searchTerm: string) => {
- this.props.openfarmSearch(searchTerm)(this.props.dispatch);
- }, 500);
-
- handleChange = (value: string) => {
- this.props.dispatch({ type: Actions.SEARCH_QUERY_CHANGE, payload: value });
- this.debouncedOFSearch(value);
- };
-
- get cropSearchQuery() { return this.props.cropSearchQuery || ""; }
-
- get tooShort() {
- const termLength = this.cropSearchQuery.length;
- return !this.props.cropSearchInProgress && termLength > 0 && termLength < 3;
- }
-
- get validSearchTerm() {
- return this.cropSearchQuery.length > 2;
- }
-
- get showResultChangeSpinner() {
- return this.props.cropSearchInProgress &&
- this.props.cropSearchResults.length > 0 &&
- this.validSearchTerm;
- }
-
- componentDidMount() {
- this.props.openfarmSearch(this.cropSearchQuery)(this.props.dispatch);
- }
+export class RawCropCatalog
+ extends React.Component {
componentWillUnmount = () => this.props.dispatch({
type: Actions.SET_PLANT_TYPE_CHANGE_ID,
@@ -86,28 +51,24 @@ export class RawCropCatalog extends React.Component {
backTo={Path.plants()} />
- {
}
};
-/** Basic field: value display for OpenFarm crop properties. */
+/** Basic field: value display for crop properties. */
const InfoField = (props: InfoFieldProps) =>
-
- {EMOJI[props.title]}
-
+
- {!isNaN(parseInt(value))
- ? (parseInt(value) * 10) + t("mm")
+ {value
+ ? (value * 10) + t("mm")
: NO_VALUE}
;
/** Comma-separated list of crop common names. */
-const CommonNames = ({ i, field, value }: SummaryItemProps) =>
+const CommonNames = ({ i, field, value }: CommonNamesProps) =>
- {(isArray(value)
- ? value.join(", ")
- : value) || NO_VALUE}
+ {value.join(", ") || NO_VALUE}
;
/** Default behavior for all other properties. */
-const DefaultPropertyDisplay = ({ i, field, value }: SummaryItemProps) =>
+const DefaultPropertyDisplay = ({ i, field, value }: DefaultPropertyDisplayProps) =>
{value || NO_VALUE}
;
/** Choose the appropriate display function for the crop property. */
-const handleDisplay = ([field, value]: string[], i: number) => {
- const commonProps: SummaryItemProps = { key: field, i, field, value };
+const handleDisplay = (
+ [field, value]: [string, string | string[] | number],
+ i: number,
+) => {
+ const commonProps: SummaryItemPropsBase = { key: field, i, field };
switch (field) {
case "spread":
case "row_spacing":
case "height":
- return
-
-
-
+
+ 
;
}
diff --git a/frontend/plants/crop_search_results.tsx b/frontend/plants/crop_search_results.tsx
new file mode 100644
index 0000000000..035b4fa4af
--- /dev/null
+++ b/frontend/plants/crop_search_results.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+import { Link } from "../link";
+import {
+ EmptyStateWrapper, EmptyStateGraphic,
+} from "../ui/empty_state_wrapper";
+import { Actions } from "../constants";
+import { t } from "../i18next_wrapper";
+import { Path } from "../internal_urls";
+import { edit, save } from "../api/crud";
+import { TaggedPlantPointer } from "farmbot";
+import { setHoveredPlant } from "../farm_designer/map/actions";
+import { HoveredPlantPayl } from "../farm_designer/interfaces";
+import { findCrops, findIcon, findImage } from "../crops/find";
+import { Crop } from "../crops/interfaces";
+
+export interface SearchResultProps {
+ searchTerm: string;
+ plant: TaggedPlantPointer | undefined;
+ dispatch: Function;
+ bulkPlantSlug: string | undefined;
+ hoveredPlant: HoveredPlantPayl;
+}
+
+export class CropSearchResults extends React.Component {
+ render() {
+ const { dispatch, plant } = this.props;
+ const { plantUUID } = this.props.hoveredPlant;
+ const to = (slug: string) => {
+ if (plant) {
+ return Path.plants(plant.body.id);
+ }
+ if (this.props.bulkPlantSlug) {
+ return Path.plants("select");
+ }
+ return Path.cropSearch(slug);
+ };
+ const click = (slug: string, crop: Crop) => () => {
+ if (plant) {
+ dispatch(edit(plant, {
+ name: crop.name,
+ openfarm_slug: slug,
+ }));
+ dispatch(save(plant.uuid));
+ dispatch({
+ type: Actions.SET_PLANT_TYPE_CHANGE_ID,
+ payload: undefined,
+ });
+ if (plant.uuid == plantUUID) {
+ dispatch(setHoveredPlant(plantUUID));
+ }
+ }
+ if (this.props.bulkPlantSlug) {
+ dispatch({
+ type: Actions.SET_SLUG_BULK,
+ payload: slug,
+ });
+ }
+ };
+ const crops = findCrops(this.props.searchTerm);
+ return 0}
+ graphic={EmptyStateGraphic.no_crop_results}
+ title={t("No search results")}
+ colorScheme={"plants"}>
+ ;
+ }
+}
diff --git a/frontend/plants/curve_info.tsx b/frontend/plants/curve_info.tsx
index 777c8b78e6..cc017e7e08 100644
--- a/frontend/plants/curve_info.tsx
+++ b/frontend/plants/curve_info.tsx
@@ -37,19 +37,21 @@ export const AllCurveInfo = (props: AllCurveInfoProps) => {
export const CurveInfo = (props: CurveInfoProps) => {
const { plant, onChange, curve, curves, plants, curveType } = props;
const [hovered, setHovered] = React.useState(undefined);
- return
+
;
const OMITTED_PROPERTIES = [
"name",
- "slug",
- "processing_pictures",
"description",
- "main_image_path",
- "tags_array",
- "guides_count",
- "svg_icon",
- "taxon",
+ "image",
+ "icon",
+ "companions",
];
const NO_VALUE = t("Not available");
+interface SummaryItemPropsBase {
+ key: string;
+ i: number;
+ field: string;
+}
+
+interface CmPropertyProps extends SummaryItemPropsBase {
+ value: number;
+}
+
+interface CommonNamesProps extends SummaryItemPropsBase {
+ value: string[];
+}
+
+interface DefaultPropertyDisplayProps extends SummaryItemPropsBase {
+ value: string;
+}
+
/**
- * Need to convert the `cm` provided by OpenFarm to `mm`
+ * Need to convert the `cm` provided by crop data to `mm`
* to match the Farm Designer units.
*/
-const CmProperty = ({ i, field, value }: SummaryItemProps) =>
+const CmProperty = ({ i, field, value }: CmPropertyProps) =>
+ {EMOJI[props.title]}
+
+
{props.children}
- ;
+
-
;
};
@@ -241,39 +244,15 @@ const AddPlantHereButton = (props: AddPlantHereButtonProps) => {
/** Image of crop to drag into map. */
const CropDragInfoTile =
- ({ svgIcon }: { svgIcon: string | undefined }) =>
+ ({ slug }: { slug: string }) =>
+ src={findIcon(slug)}
+ onDragStart={setDragIcon(slug)} />
;
-/** Text and link for crop editing. */
-const EditOnOpenFarm = ({ slug }: { slug: string }) =>
- {
- state: CropInfoState = {
- crop: Path.getSlug(Path.cropSearch()),
- currentImage: undefined,
- };
+export class RawCropInfo extends React.Component {
componentDidMount() {
- this.clearCropSearchResults("")();
- this.setState({ currentImage: undefined });
- this.props.dispatch(searchForCurrentCrop(this.props.openfarmCropFetch));
- this.selectMostUsedCurves(Path.getSlug(Path.cropSearch()));
- }
-
- componentDidUpdate() {
- const crop = Path.getSlug(Path.cropSearch());
- if (crop != this.state.crop) {
- this.selectMostUsedCurves(crop);
- this.setState({ crop });
- this.clearCropSearchResults(crop)();
- this.setState({ currentImage: undefined });
- }
- if (isUndefined(this.state.currentImage) && this.imageData.length > 0) {
- this.setCurrentImage(0);
- }
+ this.selectMostUsedCurves(Path.getCropSlug());
}
selectMostUsedCurves = (slug: string) => {
const findCurve = findMostUsedCurveForCrop({
plants: this.props.plants,
curves: this.props.curves,
- openfarmSlug: slug,
+ slug: slug,
});
[CurveType.water, CurveType.spread, CurveType.height].map(curveType => {
const id = findCurve(curveType)?.body.id;
@@ -356,44 +284,28 @@ export class RawCropInfo extends React.Component {
});
};
- /** Clear the current crop search results. */
- clearCropSearchResults = (crop: string) => () => {
- const { dispatch } = this.props;
- if (!this.props.designer.cropSearchQuery) {
- dispatch({ type: Actions.SEARCH_QUERY_CHANGE, payload: crop });
- }
- dispatch({ type: Actions.OF_SEARCH_RESULTS_OK, payload: [] });
- };
-
- get images() {
- const crop = getCropHeaderProps({
- cropSearchResults: this.props.designer.cropSearchResults,
- });
- return crop.result.images
- .filter(image => !image.includes(FilePath.DEFAULT_ICON));
- }
- get imageData() { return this.images.map(toTaggedImage); }
-
- setCurrentImage = (index: number) =>
- this.setState({ currentImage: this.imageData[index] });
-
render() {
const { dispatch, designer } = this.props;
- const { cropSearchResults, cropSearchInProgress } = designer;
- const { crop, result, basePath, backgroundURL } =
- getCropHeaderProps({ cropSearchResults });
+ const slug = Path.getCropSlug();
+ const crop = findCrop(slug);
+ const image = findImage(slug);
const panelName = "crop-info";
return
-
@@ -403,81 +315,70 @@ export class RawCropInfo extends React.Component {
} />
-
- {chain(props.result.crop)
- .omit(OMITTED_PROPERTIES)
- .toPairs()
- .map(handleDisplay)
- .value()}
-
+ {chain(props.crop)
+ .omit(OMITTED_PROPERTIES)
+ .toPairs()
+ .map(handleDisplay)
+ .value()}
+
;
};
-/** Display companion plant list from OpenFarm. */
+/** Display companion plant list. */
const Companions = (props: CropInfoListProps) => {
- const { result, dispatch, openfarmCropFetch } = props;
- if (result.companions.length == 0) { return ; }
+ const { crop, dispatch } = props;
+ const companions = crop.companions
+ .filter(slug => findCrop(slug).name != "Generic plant");
+ if (companions.length == 0) { return; }
return
- {result.companions.map((companion, index) =>
- {
+ const companion = findCrop(companionSlug);
+ return {
- openfarmCropFetch(companion.slug)(dispatch);
unselectPlant(dispatch)();
- props.selectMostUsedCurves(companion.slug);
+ props.selectMostUsedCurves(companionSlug);
}}
onDragStart={() => {
dispatch({
@@ -193,13 +195,14 @@ const Companions = (props: CropInfoListProps) => {
payload: undefined,
}), 500);
}}
- to={Path.cropSearch(companion.slug)}>
+ to={Path.cropSearch(companionSlug)}>
})
{companion.name}
- )} + ; + })}
- {t("Edit on")}
-
- {"OpenFarm"}
-
-
;
-
-/** Get values common to crop panel headers. */
-export const getCropHeaderProps = (props: {
- cropSearchResults: CropLiveSearchResult[]
-}) => {
- const crop = Path.getSlug(Path.cropSearch());
- const result = findBySlug(props.cropSearchResults, crop);
- const basePath = Path.cropSearch();
- const backgroundURL = `linear-gradient(
- rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(${result.images[0]})`;
- return { crop, result, basePath, backgroundURL };
-};
-
export function mapStateToProps(props: Everything): CropInfoProps {
return {
- openfarmCropFetch: OFCropFetch,
dispatch: props.dispatch,
botPosition: validBotLocationData(props.bot.hardware.location_data).position,
xySwap: !!getWebAppConfigValue(() => props)(BooleanSetting.xy_swap),
@@ -287,68 +266,17 @@ export function mapStateToProps(props: Everything): CropInfoProps {
designer: props.resources.consumers.farm_designer,
};
}
-/** Get OpenFarm crop search results for crop info page contents. */
-export const searchForCurrentCrop = (openfarmCropFetch: OpenfarmSearch) =>
- (dispatch: Function) => {
- const crop = Path.getSlug(Path.cropSearch());
- openfarmCropFetch(crop)(dispatch);
- unselectPlant(dispatch)();
- };
-
-interface CropInfoState {
- crop: string;
- currentImage: TaggedImage | undefined;
-}
-
-const toTaggedImage = (url: string): TaggedImage => ({
- kind: "Image",
- uuid: url,
- specialStatus: SpecialStatus.SAVED,
- body: {
- created_at: "",
- updated_at: "",
- device_id: 0,
- attachment_processed_at: "1",
- attachment_url: url,
- meta: {
- x: undefined,
- y: undefined,
- z: undefined,
- }
- },
-});
-
-export class RawCropInfo extends React.Component
-
- dispatch({
- type: Actions.SET_CROP_STAGE,
- payload: ddi.value,
- })} />
-
-
-
- dispatch({
- type: Actions.SET_CROP_PLANTED_AT,
- payload: e.currentTarget.value,
- })
- } />
-
-
+
+ dispatch({
+ type: Actions.SET_CROP_STAGE,
+ payload: ddi.value,
+ })} />
+
+
+
+ dispatch({
+ type: Actions.SET_CROP_PLANTED_AT,
+ payload: e.currentTarget.value,
+ })
+ } />
+
+
+
+ dispatch({
+ type: Actions.SET_CROP_RADIUS,
+ payload: parseInt(e.currentTarget.value),
+ })
+ } />
+
+
+ {Object.entries(crops).map(([slug, crop]) => {
+ const image = findImage(slug);
+ return
+
+
+
+ })
+
+
+ ;
+ })}
+
-
+ return
+ {
- const openfarmSlug = props.plant?.slug || Path.getSlug(Path.cropSearch());
+ const slug = props.plant?.slug || Path.getCropSlug();
const list: (DropDownItem | undefined)[] = [];
list.push(NULL_CHOICE);
const usedIds = props.plants
- .filter(plant => plant.body.openfarm_slug == openfarmSlug)
+ .filter(plant => plant.body.openfarm_slug == slug)
.map(plant => plant.body[CURVE_KEY_LOOKUP[props.curveType]])
.filter(id => id);
list.push({
@@ -107,16 +109,16 @@ export const curveToDdi =
};
interface FindCurveProps {
- openfarmSlug: string;
+ slug: string;
plants: TaggedPlantPointer[];
curves: TaggedCurve[];
}
export const findMostUsedCurveForCrop = (props: FindCurveProps) =>
(curveType: CurveType): TaggedCurve | undefined => {
- const { openfarmSlug, plants, curves } = props;
+ const { slug, plants, curves } = props;
const counts = countBy(plants
- .filter(p => p.body.openfarm_slug == openfarmSlug)
+ .filter(p => p.body.openfarm_slug == slug)
.map(p => p.body[CURVE_KEY_LOOKUP[curveType]] as number | undefined)
.filter(x => x));
const maxCount = Math.max(...Object.values(counts));
diff --git a/frontend/plants/edit_plant_status.tsx b/frontend/plants/edit_plant_status.tsx
index 7f363bffd6..fb07c874aa 100644
--- a/frontend/plants/edit_plant_status.tsx
+++ b/frontend/plants/edit_plant_status.tsx
@@ -13,7 +13,7 @@ import { t } from "../i18next_wrapper";
import { UUID } from "../resources/interfaces";
import { edit, save } from "../api/crud";
import { EditPlantStatusProps } from "./plant_panel";
-import { capitalize, mean, round, startCase } from "lodash";
+import { mean, round, startCase } from "lodash";
import { TimeSettings } from "../interfaces";
import { Link } from "../link";
import { Path } from "../internal_urls";
@@ -23,6 +23,7 @@ import { CurveType } from "../curves/templates";
import { curveToDdi, CURVE_KEY_LOOKUP } from "./curve_info";
import { CURVE_TYPES } from "../curves/curves_inventory";
import { betterCompact } from "../util";
+import { findCrop } from "../crops/find";
export const PLANT_STAGE_DDI_LOOKUP = (): { [x: string]: DropDownItem } => ({
planned: { label: t("Planned"), value: "planned" },
@@ -92,7 +93,7 @@ const getUpdateByPlantStage = (plant_stage: PlantStage): PlantOptions => {
/** Select a `plant_stage` for a plant. */
export function EditPlantStatus(props: EditPlantStatusProps) {
const { plantStatus, updatePlant, uuid } = props;
- return
- {
- (ddi.headingId || ddi.isNull)
- && onChange(ddi.isNull ? undefined : ddi.value, props.curveType);
- }} />
- {curve &&
-
- }
+
{curve &&
+ {curve &&
+
+ }
+ {
+ (ddi.headingId || ddi.isNull)
+ && onChange(ddi.isNull ? undefined : ddi.value, props.curveType);
+ }} />
+
+ return
{
const plants = props.allPoints.filter(point =>
props.selected.includes(point.uuid) && point.kind === "Point" &&
@@ -335,7 +336,7 @@ export const PlantSlugBulkUpdate = (props: PlantSlugBulkUpdateProps) => {
plants.map(plant => {
props.dispatch(edit(plant, {
openfarm_slug: slug,
- name: capitalize(slug).replace(/-/g, " "),
+ name: findCrop(slug).name,
}));
props.dispatch(save(plant.uuid));
});
diff --git a/frontend/plants/grid/__tests__/plant_grid_test.tsx b/frontend/plants/grid/__tests__/plant_grid_test.tsx
index 4e7e40961e..29379927df 100644
--- a/frontend/plants/grid/__tests__/plant_grid_test.tsx
+++ b/frontend/plants/grid/__tests__/plant_grid_test.tsx
@@ -142,6 +142,7 @@ describe(",
designer: DesignerState | undefined,
@@ -43,12 +44,12 @@ const createPlantGridMapper = (
const [x, y] = vec;
return {
name: cropName,
- radius: 25,
+ radius: designer?.cropRadius || DEFAULT_PLANT_RADIUS,
depth: 0,
z: 0,
x,
y,
- openfarm_slug,
+ openfarm_slug: verifiedCropSlug(cropSlug),
pointer_type: "Plant",
plant_stage: designer?.cropStage || "planned",
planted_at: designer?.cropPlantedAt,
diff --git a/frontend/plants/grid/plant_grid.tsx b/frontend/plants/grid/plant_grid.tsx
index 09f7bdbea0..f005a98e29 100644
--- a/frontend/plants/grid/plant_grid.tsx
+++ b/frontend/plants/grid/plant_grid.tsx
@@ -64,7 +64,7 @@ export class PlantGrid extends React.Component {
itemName: this.props.itemName,
grid: this.state.grid,
offsetPacking: this.state.offsetPacking,
- radius: this.props.radius,
+ radius: this.props.radius || this.props.designer?.cropRadius,
z: this.props.z,
meta: this.props.meta,
plantStage: this.props.designer?.cropStage,
diff --git a/frontend/plants/openfarm_search_results.tsx b/frontend/plants/openfarm_search_results.tsx
deleted file mode 100644
index 27808411e3..0000000000
--- a/frontend/plants/openfarm_search_results.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from "react";
-import { Link } from "../link";
-import {
- EmptyStateWrapper, EmptyStateGraphic,
-} from "../ui/empty_state_wrapper";
-import { Actions, Content } from "../constants";
-import { t } from "../i18next_wrapper";
-import { ExternalUrl } from "../external_urls";
-import { FilePath, Path } from "../internal_urls";
-import { edit, save } from "../api/crud";
-import { TaggedPlantPointer } from "farmbot";
-import { setHoveredPlant } from "../farm_designer/map/actions";
-import { HoveredPlantPayl } from "../farm_designer/interfaces";
-
-/** A stripped down version of OFSearchResult */
-interface Result {
- crop: {
- slug: string;
- name: string;
- svg_icon?: string | undefined;
- main_image_path: string;
- };
- images: string[];
-}
-
-export interface SearchResultProps {
- cropSearchResults: Result[];
- cropSearchInProgress: boolean;
- plant: TaggedPlantPointer | undefined;
- dispatch: Function;
- bulkPlantSlug: string | undefined;
- hoveredPlant: HoveredPlantPayl;
-}
-
-export class OpenFarmResults extends React.Component {
-
- get text(): React.ReactNode {
- return 0}
- graphic={EmptyStateGraphic.no_crop_results}
- title={cropSearchInProgress
- ? t("Searching...")
- : t("No search results")}
- textElement={cropSearchInProgress ? undefined : this.text}
- colorScheme={"plants"}>
- ;
- }
-}
diff --git a/frontend/plants/plant_inventory_item.tsx b/frontend/plants/plant_inventory_item.tsx
index 6740382e42..7b405d9aaf 100644
--- a/frontend/plants/plant_inventory_item.tsx
+++ b/frontend/plants/plant_inventory_item.tsx
@@ -2,15 +2,15 @@ import React from "react";
import { TaggedPlant, Mode } from "../farm_designer/map/interfaces";
import { unpackUUID } from "../util";
import { t } from "../i18next_wrapper";
-import { maybeGetCachedPlantIcon } from "../open_farm/cached_crop";
import {
selectPoint, setHoveredPlant, mapPointClickAction,
} from "../farm_designer/map/actions";
import { PlantStageAndAge, plantAgeAndStage } from "./map_state_to_props";
import { getMode } from "../farm_designer/map/util";
import { isUndefined, round } from "lodash";
-import { FilePath, Path } from "../internal_urls";
+import { Path } from "../internal_urls";
import { useNavigate } from "react-router";
+import { findIcon } from "../crops/find";
export interface PlantInventoryItemProps {
plant: TaggedPlant;
@@ -21,7 +21,6 @@ export interface PlantInventoryItemProps {
// The individual plants that show up in the farm designer sub nav.
export const PlantInventoryItem = (props: PlantInventoryItemProps) => {
- const [iconState, setIconState] = React.useState("");
const navigate = useNavigate();
const { plant, dispatch } = props;
@@ -30,8 +29,7 @@ export const PlantInventoryItem = (props: PlantInventoryItemProps) => {
const toggle = (action: "enter" | "leave") => {
const isEnter = action === "enter";
const plantUUID = isEnter ? plant.uuid : undefined;
- const icon = isEnter ? iconState : "";
- dispatch(setHoveredPlant(plantUUID, icon));
+ dispatch(setHoveredPlant(plantUUID));
};
const click = () => {
@@ -48,12 +46,9 @@ export const PlantInventoryItem = (props: PlantInventoryItemProps) => {
}
};
- const onLoad = (e: React.SyntheticEvent) =>
- maybeGetCachedPlantIcon(slug, e.currentTarget, setIconState);
-
- // Name given from OpenFarm's API.
const label = plant.body.name || "Unknown plant";
const slug = plant.body.openfarm_slug;
+ const icon = findIcon(slug);
return
{`${t(Content.CROP_NOT_FOUND_INTRO)} `} - - {t(Content.CROP_NOT_FOUND_LINK)} - -
; - } - - render() { - const { - cropSearchResults, cropSearchInProgress, dispatch, plant, - } = this.props; - const { plantUUID } = this.props.hoveredPlant; - const to = (slug: string) => { - if (plant) { - return Path.plants(plant.body.id); - } - if (this.props.bulkPlantSlug) { - return Path.plants("select"); - } - return Path.cropSearch(slug); - }; - const click = (crop: Result["crop"]) => () => { - if (plant) { - dispatch(edit(plant, { - name: crop.name, - openfarm_slug: crop.slug, - })); - dispatch(save(plant.uuid)); - dispatch({ - type: Actions.SET_PLANT_TYPE_CHANGE_ID, - payload: undefined, - }); - if (plant.uuid == plantUUID && crop.svg_icon) { - dispatch(setHoveredPlant(plantUUID, crop.svg_icon)); - } - } - if (this.props.bulkPlantSlug) { - dispatch({ - type: Actions.SET_SLUG_BULK, - payload: crop.slug, - }); - } - }; - return
- {cropSearchResults.map(resp => {
- const { crop } = resp;
- const image = crop.main_image_path.startsWith("https")
- ? crop.main_image_path
- : FilePath.DEFAULT_ICON;
- const fallbackImageClass = crop.main_image_path.startsWith("https")
- ? ""
- : " fallback-image";
- return
-
-
-
-
-
- ;
- })}
- {
onClick={click}>
+ src={icon} />
{label}
diff --git a/frontend/plants/plant_panel.tsx b/frontend/plants/plant_panel.tsx
index 3d6c14e6ea..670ee038e2 100644
--- a/frontend/plants/plant_panel.tsx
+++ b/frontend/plants/plant_panel.tsx
@@ -1,7 +1,7 @@
import React from "react";
import { FormattedPlantInfo } from "./map_state_to_props";
import { useNavigate } from "react-router";
-import { BlurableInput, Row, Help } from "../ui";
+import { BlurableInput, Help } from "../ui";
import {
PlantStage, TaggedCurve, TaggedFarmwareEnv, TaggedGenericPointer,
TaggedPlantPointer, Xyz,
@@ -25,6 +25,7 @@ import { BotPosition, SourceFbosConfig } from "../devices/interfaces";
import { AllCurveInfo, CURVE_KEY_LOOKUP } from "./curve_info";
import { BotSize } from "../farm_designer/map/interfaces";
import { UpdatePlant } from "./plant_info";
+import { ALIASED_SLUG_LOOKUP } from "../crops/constants";
export interface PlantPanelProps {
info: FormattedPlantInfo;
@@ -85,9 +86,9 @@ export const EditPlantLocation = (props: EditPlantLocationProps) => {
points: props.soilHeightPoints,
farmwareEnvs: props.farmwareEnvs,
});
- return
+ return
{["x", "y", "z"].map((axis: Xyz) =>
-
+
;
};
export interface EditPlantRadiusProps extends EditPlantProperty {
@@ -109,7 +110,7 @@ export interface EditPlantRadiusProps extends EditPlantProperty {
}
export const EditPlantRadius = (props: EditPlantRadiusProps) =>
-
+
onCommit={e => props.updatePlant(props.uuid, {
radius: parseIntInput(e.currentTarget.value)
})} />
- ;
+ ;
export interface EditPlantDepthProps extends EditPlantProperty {
depth: number;
}
export const EditPlantDepth = (props: EditPlantDepthProps) =>
-
+
onCommit={e => props.updatePlant(props.uuid, {
depth: parseIntInput(e.currentTarget.value)
})} />
- ;
+ ;
interface ListItemProps {
name?: string;
@@ -144,7 +145,7 @@ interface ListItemProps {
}
export const ListItem = (props: ListItemProps) =>
-
+
-
{axis == "z" && !isUndefined(soilZ) &&
@@ -101,7 +102,7 @@ export const EditPlantLocation = (props: EditPlantLocationProps) => {
[axis]: parseIntInput(e.currentTarget.value)
})} />
)}
- ;
+
{props.name &&
;
export function PlantPanel(props: PlantPanelProps) {
const {
@@ -162,13 +163,14 @@ export function PlantPanel(props: PlantPanelProps) {
const { x, y, z } = info;
const commonProps = { uuid, updatePlant };
const navigate = useNavigate();
+ const slugForCropInfoLink = ALIASED_SLUG_LOOKUP[slug] || slug;
return -
+
-
-
-
++++- - + diff --git a/frontend/points/point_edit_actions.tsx b/frontend/points/point_edit_actions.tsx index d349c1a0f7..87c8b9f3d6 100644 --- a/frontend/points/point_edit_actions.tsx +++ b/frontend/points/point_edit_actions.tsx @@ -64,11 +64,6 @@ export const EditPointProperties = (props: EditPointPropertiesProps) => defaultAxes={props.defaultAxes} updatePoint={props.updatePoint} /> -- {props.point.body.pointer_type == "GenericPointer" &&- ; export const AdditionalWeedProperties = (props: AdditionalWeedPropertiesProps) => - -
-
- -- - {daysOldText(plantAgeAndStage(props.point))} - +-
+
+{Object.entries(props.point.body.meta).map(([key, value]) => { switch (key) { case "color": case "type": return ; + className={`meta-${key}-not-displayed`} + style={{ display: "none" }} />; case "created_by": return+ +++ + + + {daysOldText(plantAgeAndStage(props.point))} ++{lookupPointSource(value)} @@ -185,7 +188,7 @@ export interface EditPointRadiusProps { } export const EditPointRadius = (props: EditPointRadiusProps) => - +
; export interface EditPointColorProps { updatePoint(update: PointUpdate): void; diff --git a/frontend/points/point_info.tsx b/frontend/points/point_info.tsx index e0da900722..43d38ef9ae 100644 --- a/frontend/points/point_info.tsx +++ b/frontend/points/point_info.tsx @@ -97,7 +97,7 @@ export const RawEditPoint = (props: EditPointProps) => {onCommit={e => props.updatePoint({ radius: round(parseIntInput(e.currentTarget.value)) })} /> - ; + {point - ? + ?; export const DevSettingsRows = () => - --
+
diff --git a/frontend/three_d_garden/__tests__/bed_test.tsx b/frontend/three_d_garden/__tests__/bed_test.tsx index 9bbf78e895..a4dbc2278b 100644 --- a/frontend/three_d_garden/__tests__/bed_test.tsx +++ b/frontend/three_d_garden/__tests__/bed_test.tsx @@ -1,8 +1,33 @@ +jest.mock("../../farm_designer/map/layers/plants/plant_actions", () => ({ + dropPlant: jest.fn(), +})); + +let mockIsMobile = false; +jest.mock("../../screen_size", () => ({ + isMobile: () => mockIsMobile, +})); + +const mockSetPosition = jest.fn(); +interface MockRefCurrent { + position: { set: Function; }; +} +interface MockRef { + current: MockRefCurrent | undefined; +} +const mockRef: MockRef = { current: undefined }; +jest.mock("react", () => ({ + ...jest.requireActual("react"), + useRef: () => mockRef, +})); + import React from "react"; -import { mount } from "enzyme"; import { INITIAL } from "../config"; import { Bed, BedProps } from "../bed"; import { clone } from "lodash"; +import { fireEvent, render, screen } from "@testing-library/react"; +import { dropPlant } from "../../farm_designer/map/layers/plants/plant_actions"; +import { Path } from "../../internal_urls"; +import { fakeAddPlantProps } from "../../__test_support__/fake_props"; describe(" ", () => { const fakeProps = (): BedProps => ({ @@ -13,8 +38,8 @@ describe(" ", () => { it("renders bed", () => { const p = fakeProps(); p.config.extraLegsX = 0; - const wrapper = mount( ); - expect(wrapper.html()).toContain("bed-group"); + const { container } = render( ); + expect(container).toContainHTML("bed-group"); }); it("renders bed with extra legs", () => { @@ -22,7 +47,55 @@ describe(" ", () => { p.config.extraLegsX = 2; p.config.extraLegsY = 2; p.config.legsFlush = false; - const wrapper = mount( ); - expect(wrapper.html()).toContain("bed-group"); + const { container } = render( ); + expect(container).toContainHTML("bed-group"); + }); + + it("adds a plant", () => { + location.pathname = Path.mock(Path.cropSearch("mint")); + const p = fakeProps(); + p.addPlantProps = fakeAddPlantProps([]); + render( ); + const soil = screen.getAllByText("soil")[0]; + fireEvent.click(soil); + expect(dropPlant).toHaveBeenCalledWith(expect.objectContaining({ + gardenCoords: { x: 1360, y: 620 }, + })); + }); + + it("updates pointer plant position", () => { + location.pathname = Path.mock(Path.cropSearch("mint")); + mockIsMobile = false; + mockRef.current = { position: { set: mockSetPosition } }; + const p = fakeProps(); + p.addPlantProps = fakeAddPlantProps([]); + render( ); + const soil = screen.getAllByText("soil")[0]; + fireEvent.pointerMove(soil); + expect(mockSetPosition).toHaveBeenCalledWith(0, 0, -75); + }); + + it("handles missing ref", () => { + location.pathname = Path.mock(Path.cropSearch("mint")); + mockIsMobile = false; + mockRef.current = undefined; + const p = fakeProps(); + p.addPlantProps = fakeAddPlantProps([]); + render( ); + const soil = screen.getAllByText("soil")[0]; + fireEvent.pointerMove(soil); + expect(mockSetPosition).not.toHaveBeenCalled(); + }); + + it("doesn't update pointer plant position: mobile", () => { + location.pathname = Path.mock(Path.cropSearch("mint")); + mockIsMobile = true; + mockRef.current = { position: { set: mockSetPosition } }; + const p = fakeProps(); + p.addPlantProps = fakeAddPlantProps([]); + render( ); + const soil = screen.getAllByText("soil")[0]; + fireEvent.pointerMove(soil); + expect(mockSetPosition).not.toHaveBeenCalled(); }); }); diff --git a/frontend/three_d_garden/__tests__/garden_test.tsx b/frontend/three_d_garden/__tests__/garden_test.tsx index 122e8ce72f..29415b2435 100644 --- a/frontend/three_d_garden/__tests__/garden_test.tsx +++ b/frontend/three_d_garden/__tests__/garden_test.tsx @@ -1,6 +1,7 @@ let mockIsDesktop = false; jest.mock("../../screen_size", () => ({ isDesktop: () => mockIsDesktop, + isMobile: jest.fn(), })); import React from "react"; @@ -9,25 +10,27 @@ import { GardenModelProps, GardenModel } from "../garden"; import { clone } from "lodash"; import { INITIAL } from "../config"; import { render, screen } from "@testing-library/react"; -import { ASSETS } from "../constants"; +import { fakePlant } from "../../__test_support__/fake_state/resources"; +import { fakeAddPlantProps } from "../../__test_support__/fake_props"; describe(" ", () => { const fakeProps = (): GardenModelProps => ({ config: clone(INITIAL), activeFocus: "", setActiveFocus: jest.fn(), + addPlantProps: fakeAddPlantProps([]), }); it("renders", () => { - const wrapper = mount( ); - expect(wrapper.html()).toContain("zoom-beacons"); - expect(wrapper.html()).not.toContain("stats"); - expect(wrapper.html()).toContain("darkgreen"); + const { container } = render( ); + expect(container).toContainHTML("zoom-beacons"); + expect(container).not.toContainHTML("stats"); + expect(container).toContainHTML("darkgreen"); }); it("renders no user plants", () => { const p = fakeProps(); - p.plants = []; + p.addPlantProps = fakeAddPlantProps([]); render( ); const plantLabels = screen.queryAllByText("Beet"); expect(plantLabels.length).toEqual(0); @@ -35,16 +38,9 @@ describe(" ", () => { it("renders user plant", () => { const p = fakeProps(); - p.plants = [ - { - label: "Beet", - icon: ASSETS.icons.beet, - spread: 175, - size: 150, - x: 0, - y: 0, - }, - ]; + const plant = fakePlant(); + plant.body.name = "Beet"; + p.addPlantProps = fakeAddPlantProps([plant]); render( ); const plantLabels = screen.queryAllByText("Beet"); expect(plantLabels.length).toEqual(1); @@ -52,7 +48,7 @@ describe(" ", () => { it("renders promo plants", () => { const p = fakeProps(); - p.plants = undefined; + p.addPlantProps = undefined; render( ); const plantLabels = screen.queryAllByText("Beet"); expect(plantLabels.length).toEqual(7); @@ -70,9 +66,10 @@ describe(" ", () => { p.config.viewCube = true; p.config.lab = true; p.activeFocus = "plant"; - const wrapper = mount( ); - expect(wrapper.html()).toContain("gray"); - expect(wrapper.html()).toContain("stats"); + p.addPlantProps = undefined; + const { container } = render( ); + expect(container).toContainHTML("gray"); + expect(container).toContainHTML("stats"); }); it("sets hover", () => { diff --git a/frontend/three_d_garden/__tests__/index_test.tsx b/frontend/three_d_garden/__tests__/index_test.tsx index a910b5ec12..ee85f796cf 100644 --- a/frontend/three_d_garden/__tests__/index_test.tsx +++ b/frontend/three_d_garden/__tests__/index_test.tsx @@ -5,11 +5,12 @@ import { import React from "react"; import { INITIAL } from "../config"; import { clone } from "lodash"; +import { fakeAddPlantProps } from "../../__test_support__/fake_props"; describe(" ", () => { const fakeProps = (): ThreeDGardenProps => ({ config: clone(INITIAL), - plants: [], + addPlantProps: fakeAddPlantProps([]), }); it("renders", () => { diff --git a/frontend/three_d_garden/__tests__/plants_test.tsx b/frontend/three_d_garden/__tests__/plants_test.tsx new file mode 100644 index 0000000000..32bc15c344 --- /dev/null +++ b/frontend/three_d_garden/__tests__/plants_test.tsx @@ -0,0 +1,121 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { clone } from "lodash"; +import { fakePlant } from "../../__test_support__/fake_state/resources"; +import { INITIAL } from "../config"; +import { + calculatePlantPositions, + convertPlants, + ThreeDPlant, + ThreeDPlantProps, +} from "../plants"; +import { CROPS } from "../../crops/constants"; + +describe("calculatePlantPositions()", () => { + it("calculates plant positions", () => { + const config = clone(INITIAL); + config.plants = "Spring"; + const positions = calculatePlantPositions(config); + expect(positions).toContainEqual({ + icon: CROPS.beet.icon, + label: "Beet", + size: 150, + spread: 175, + x: 350, + y: 680, + }); + expect(positions.length).toEqual(65); + }); + + it("returns no plants", () => { + const config = clone(INITIAL); + config.plants = ""; + const positions = calculatePlantPositions(config); + expect(positions.length).toEqual(0); + }); +}); + +describe("convertPlants()", () => { + it("converts plants", () => { + const config = clone(INITIAL); + config.bedXOffset = 10; + config.bedYOffset = 1; + + const plant0 = fakePlant(); + plant0.body.name = "Spinach"; + plant0.body.openfarm_slug = "spinach"; + plant0.body.x = 100; + plant0.body.y = 200; + + const plant1 = fakePlant(); + plant1.body.name = "Unknown"; + plant1.body.openfarm_slug = "not-set"; + plant1.body.x = 1000; + plant1.body.y = 2000; + + const plants = [plant0, plant1]; + + const convertedPlants = convertPlants(config, plants); + + expect(convertedPlants).toEqual([{ + icon: CROPS.spinach.icon, + label: "Spinach", + size: 50, + spread: 0, + x: 110, + y: 201, + }, + { + icon: CROPS["generic-plant"].icon, + label: "Unknown", + size: 50, + spread: 0, + x: 1010, + y: 2001, + }, + ]); + }); +}); + +describe(" ", () => { + const fakeProps = (): ThreeDPlantProps => { + const config = clone(INITIAL); + const plant = fakePlant(); + plant.body.name = "Beet"; + return { + plant: convertPlants(config, [plant])[0], + i: 0, + config: config, + hoveredPlant: undefined, + }; + }; + + it("renders label", () => { + const p = fakeProps(); + p.config.labels = true; + p.config.labelsOnHover = false; + p.labelOnly = true; + render( ); + expect(screen.getByText("Beet")).toBeInTheDocument(); + }); + + it("renders hovered label", () => { + const p = fakeProps(); + p.config.labels = true; + p.config.labelsOnHover = true; + p.hoveredPlant = 0; + p.labelOnly = true; + render( ); + expect(screen.getByText("Beet")).toBeInTheDocument(); + }); + + it("renders plant", () => { + const p = fakeProps(); + p.config.labels = false; + p.config.labelsOnHover = false; + p.labelOnly = false; + render( ); + const { container } = render( ); + expect(container).toContainHTML("image"); + }); +}); diff --git a/frontend/three_d_garden/bed.tsx b/frontend/three_d_garden/bed.tsx index 5ab3ef5fcd..295aa883c8 100644 --- a/frontend/three_d_garden/bed.tsx +++ b/frontend/three_d_garden/bed.tsx @@ -1,6 +1,10 @@ import React from "react"; -import { Box, Detailed, Extrude, useTexture } from "@react-three/drei"; -import { DoubleSide, Path, Shape, RepeatWrapping } from "three"; +import { + Billboard, Box, Detailed, Extrude, useTexture, Image, +} from "@react-three/drei"; +import { + DoubleSide, Path as LinePath, Shape, RepeatWrapping, Group as GroupType, +} from "three"; import { range } from "lodash"; import { threeSpace, zZero, getColorFromBrightness } from "./helpers"; import { Config, detailLevels } from "./config"; @@ -11,11 +15,24 @@ import { Packaging } from "./packaging"; import { Caster } from "./caster"; import { UtilitiesPost } from "./utilities_post"; import { Group, MeshPhongMaterial } from "./components"; +import { getMode, round } from "../farm_designer/map/util"; +import { + AxisNumberProperty, Mode, TaggedPlant, +} from "../farm_designer/map/interfaces"; +import { dropPlant } from "../farm_designer/map/layers/plants/plant_actions"; +import { TaggedCurve } from "farmbot"; +import { GetWebAppConfigValue } from "../config_storage/actions"; +import { DesignerState } from "../farm_designer/interfaces"; +import { isMobile } from "../screen_size"; +import { ThreeEvent } from "@react-three/fiber"; +import { Path } from "../internal_urls"; +import { findIcon } from "../crops/find"; +import { DEFAULT_PLANT_RADIUS } from "../farm_designer/plant"; const soil = ( - Type: typeof Path | typeof Shape, + Type: typeof LinePath | typeof Shape, botSize: Record<"x" | "y" | "z" | "thickness", number>, -): Path | Shape => { +): LinePath | Shape => { const { x, y, thickness } = botSize; const hole = new Type(); @@ -41,19 +58,30 @@ const bedStructure2D = ( shape.lineTo(0, 0); // inner edge - shape.holes.push(soil(Path, botSize)); + shape.holes.push(soil(LinePath, botSize)); return shape; }; +export interface AddPlantProps { + gridSize: AxisNumberProperty; + dispatch: Function; + getConfigValue: GetWebAppConfigValue; + plants: TaggedPlant[]; + curves: TaggedCurve[]; + designer: DesignerState; +} + export interface BedProps { config: Config; activeFocus: string; + addPlantProps?: AddPlantProps; } export const Bed = (props: BedProps) => { const { - bedWidthOuter, bedLengthOuter, botSizeZ, bedHeight, bedZOffset, + bedWidthOuter, bedLengthOuter, botSizeZ, bedHeight, + bedXOffset, bedYOffset, bedZOffset, legSize, legsFlush, extraLegsX, extraLegsY, bedBrightness, soilBrightness, soilHeight, ccSupportSize, axes, xyDimensions, } = props.config; @@ -109,9 +137,58 @@ export const Bed = (props: BedProps) => { {children} ; - const Soil = ({ children }: { children: React.ReactElement }) => { + // eslint-disable-next-line no-null/no-null + const pointerPlantRef = React.useRef (null); + + type XY = AxisNumberProperty; + + const getGardenPosition = (e: ThreeEvent ): XY => ({ + x: round(threeSpace(e.point.x, -bedLengthOuter) - bedXOffset), + y: round(threeSpace(e.point.y, -bedWidthOuter) - bedYOffset), + }); + + const get3DPosition = (gardenPosition: XY): XY => ({ + x: threeSpace(gardenPosition.x + bedXOffset, bedLengthOuter), + y: threeSpace(gardenPosition.y + bedYOffset, bedWidthOuter), + }); + + const iconSize = + (props.addPlantProps?.designer.cropRadius || DEFAULT_PLANT_RADIUS) * 2; + + interface SoilProps { + children: React.ReactElement; + addPlantProps?: AddPlantProps; + } + + const Soil = ({ children, addPlantProps }: SoilProps) => { const soilDepth = bedHeight + zZero(props.config) - soilHeight; return { + e.stopPropagation(); + if (addPlantProps && getMode() == Mode.clickToAdd) { + dropPlant({ + gardenCoords: getGardenPosition(e), + gridSize: addPlantProps.gridSize, + dispatch: addPlantProps.dispatch, + getConfigValue: addPlantProps.getConfigValue, + plants: addPlantProps.plants, + curves: addPlantProps.curves, + designer: addPlantProps.designer, + }); + } + }} + onPointerMove={e => { + if (addPlantProps + && getMode() == Mode.clickToAdd + && !isMobile() + && pointerPlantRef.current) { + const position = get3DPosition(getGardenPosition(e)); + pointerPlantRef.current.position.set( + position.x, + position.y, + zZero(props.config) - props.config.soilHeight + iconSize / 2); + } + }} castShadow={true} receiveShadow={true} args={[ @@ -130,7 +207,8 @@ export const Bed = (props: BedProps) => { return - + @@ -199,12 +277,22 @@ export const Bed = (props: BedProps) => { ]}> + {getMode() == Mode.clickToAdd && !isMobile() && + + }+ - + + @@ -841,8 +840,7 @@ export const Bot = (props: FarmbotModelProps) => { depth: botSizeY - 30, bevelEnabled: false, }, - )} - > + )}> diff --git a/frontend/three_d_garden/constants.ts b/frontend/three_d_garden/constants.ts index 470d4a7802..96889e1921 100644 --- a/frontend/three_d_garden/constants.ts +++ b/frontend/three_d_garden/constants.ts @@ -16,50 +16,6 @@ export const ASSETS: Record (undefined); @@ -118,35 +65,6 @@ export const GardenModel = (props: GardenModelProps) => { : undefined; }; - interface PlantProps { - plant: Plant; - i: number; - labelOnly?: boolean; - } - - const Plant = (props: PlantProps) => { - const { i, plant, labelOnly } = props; - const alwaysShowLabels = config.labels && !config.labelsOnHover; - return - {labelOnly - ? ; - }; const isXL = config.sizePreset == "Genesis XL"; const { scale } = useSpring({ scale: isXL ? 1.75 : 1, @@ -181,7 +99,7 @@ export const GardenModel = (props: GardenModelProps) => { const camera = getCamera(config, props.activeFocus, initCamera); const zero = zeroFunc(config); - const gridZ = zero.z - config.soilHeight; + const gridZ = zero.z - config.soilHeight + 5; const extents = extentsFunc(config); // eslint-disable-next-line no-null/no-null @@ -250,15 +168,21 @@ export const GardenModel = (props: GardenModelProps) => { .cloudOpacity} fade={5000} /> -- {plant.label} - - :} - + - {Object.values(PLANTS).map((plant, i) => - )} + {ICON_URLS.map((url, i) => )} {plants.map((plant, i) => - )} + )} {range(0, config.botSizeX + 100, 100).map(x => @@ -282,7 +206,10 @@ export const GardenModel = (props: GardenModelProps) => { onPointerMove={setHover(true)} onPointerLeave={setHover(false)}> {plants.map((plant, i) => - )} + )} diff --git a/frontend/three_d_garden/index.tsx b/frontend/three_d_garden/index.tsx index d19150b03b..8c5e90b503 100644 --- a/frontend/three_d_garden/index.tsx +++ b/frontend/three_d_garden/index.tsx @@ -1,21 +1,24 @@ import { Canvas } from "@react-three/fiber"; import React from "react"; import { Config } from "./config"; -import { GardenModel, ThreeDGardenPlant } from "./garden"; +import { GardenModel } from "./garden"; import { noop } from "lodash"; +import { AddPlantProps } from "./bed"; export interface ThreeDGardenProps { config: Config; - plants: ThreeDGardenPlant[]; + addPlantProps: AddPlantProps; } export const ThreeDGarden = (props: ThreeDGardenProps) => { return ; diff --git a/frontend/three_d_garden/plants.tsx b/frontend/three_d_garden/plants.tsx new file mode 100644 index 0000000000..d251917c50 --- /dev/null +++ b/frontend/three_d_garden/plants.tsx @@ -0,0 +1,112 @@ +import { TaggedPlant } from "../farm_designer/map/interfaces"; +import { Config } from "./config"; +import { GARDENS, PLANTS } from "./constants"; +import { Billboard, Image } from "@react-three/drei"; +import React from "react"; +import { Vector3 } from "three"; +import { threeSpace, zZero as zZeroFunc } from "./helpers"; +import { Text } from "./text"; +import { findIcon } from "../crops/find"; +import { kebabCase } from "lodash"; + +interface Plant { + label: string; + icon: string; + size: number; + spread: number; + x: number; + y: number; +} + +export interface ThreeDGardenPlant extends Plant { } + +export const convertPlants = (config: Config, plants: TaggedPlant[]): Plant[] => { + return plants.map(plant => { + return { + label: plant.body.name, + icon: findIcon(plant.body.openfarm_slug), + size: plant.body.radius * 2, + spread: 0, + x: plant.body.x + config.bedXOffset, + y: plant.body.y + config.bedYOffset, + }; + }); +}; + +export const calculatePlantPositions = (config: Config): Plant[] => { + const gardenPlants = GARDENS[config.plants] || []; + const positions: Plant[] = []; + const startX = 350; + let nextX = startX; + let index = 0; + while (nextX <= config.bedLengthOuter - 100) { + const plantKey = gardenPlants[index]; + const plant = PLANTS[plantKey]; + if (!plant) { return []; } + const icon = findIcon(kebabCase(plant.label)); + positions.push({ + ...plant, + icon, + x: nextX, + y: config.bedWidthOuter / 2, + }); + const plantsPerHalfRow = + Math.ceil((config.bedWidthOuter - plant.spread) / 2 / plant.spread); + for (let i = 1; i < plantsPerHalfRow; i++) { + positions.push({ + ...plant, + icon, + x: nextX, + y: config.bedWidthOuter / 2 + plant.spread * i, + }); + positions.push({ + ...plant, + icon, + x: nextX, + y: config.bedWidthOuter / 2 - plant.spread * i, + }); + } + if (index + 1 < gardenPlants.length) { + const nextPlant = PLANTS[gardenPlants[index + 1]]; + nextX += (plant.spread / 2) + (nextPlant.spread / 2); + index++; + } else { + index = 0; + const nextPlant = PLANTS[gardenPlants[0]]; + nextX += (plant.spread / 2) + (nextPlant.spread / 2); + } + } + return positions; +}; + +export interface ThreeDPlantProps { + plant: Plant; + i: number; + labelOnly?: boolean; + config: Config; + hoveredPlant: number | undefined; +} + +export const ThreeDPlant = (props: ThreeDPlantProps) => { + const { i, plant, labelOnly, config, hoveredPlant } = props; + const alwaysShowLabels = config.labels && !config.labelsOnHover; + return+ {labelOnly + ? ; +}; diff --git a/frontend/weeds/weed_inventory_item.tsx b/frontend/weeds/weed_inventory_item.tsx index 858ef3492f..d3da001ae9 100644 --- a/frontend/weeds/weed_inventory_item.tsx +++ b/frontend/weeds/weed_inventory_item.tsx @@ -3,8 +3,7 @@ import { TaggedWeedPointer } from "farmbot"; import { Actions } from "../constants"; import { useNavigate } from "react-router"; import { t } from "../i18next_wrapper"; -import { svgToUrl } from "../open_farm/icons"; -import { genericWeedIcon } from "../point_groups/point_group_item"; +import { genericWeedIcon, svgToUrl } from "../point_groups/point_group_item"; import { getMode } from "../farm_designer/map/util"; import { Mode } from "../farm_designer/map/interfaces"; import { mapPointClickAction, selectPoint } from "../farm_designer/map/actions"; diff --git a/frontend/weeds/weeds_edit.tsx b/frontend/weeds/weeds_edit.tsx index 40ac055a6b..fda1ded663 100644 --- a/frontend/weeds/weeds_edit.tsx +++ b/frontend/weeds/weeds_edit.tsx @@ -98,7 +98,7 @@ export const RawEditWeed = (props: EditWeedProps) => {+ {plant.label} + + :} + {weed - ? + ?
-
-
+ (( {
-
- state: PointGroupItemState = { icon: "" };
+ extends React.Component {
key = uuid();
enter = () => this.props.dispatch?.(
- setHoveredPlant(this.props.point.uuid, this.state.icon));
+ setHoveredPlant(this.props.point.uuid));
leave = () => this.props.dispatch?.(setHoveredPlant(undefined));
@@ -88,28 +87,18 @@ export class PointGroupItem
this.leave();
};
- setIconState = (icon: string) => this.setState({ icon });
-
get criteriaIcon() {
return this.props.group && !this.props.group.body.point_ids
.includes(this.props.point.body.id || 0);
}
- maybeGetCachedIcon = (e: React.SyntheticEvent) => {
- const img = e.currentTarget;
- if (this.props.point.kind == "PlantTemplate"
- || this.props.point.body.pointer_type == "Plant") {
- const slug = (this.props.point as TaggedPlantPointer | TaggedPlantTemplate)
- .body.openfarm_slug;
- maybeGetCachedPlantIcon(slug, img, this.setIconState);
- }
- };
-
get initIcon() {
- if (this.props.point.kind == "PlantTemplate") { return FilePath.DEFAULT_ICON; }
+ if (this.props.point.kind == "PlantTemplate") {
+ return findIcon(this.props.point.body.openfarm_slug);
+ }
switch (this.props.point.body.pointer_type) {
case "Plant":
- return FilePath.DEFAULT_ICON;
+ return findIcon(this.props.point.body.openfarm_slug);
case "GenericPointer":
const { color } = this.props.point.body.meta;
return svgToUrl(genericPointIcon(color));
@@ -156,7 +145,6 @@ export class PointGroupItem
;
diff --git a/frontend/points/create_points.tsx b/frontend/points/create_points.tsx
index a2732382a3..88edbac24c 100644
--- a/frontend/points/create_points.tsx
+++ b/frontend/points/create_points.tsx
@@ -218,9 +218,9 @@ export class RawCreatePoints
PointProperties = () =>
+
+
+
- }
-
- {(!inSavedGarden)
- ?
+ {!isUndefined(info.depth) && {value || ""};
}
})}
-
+
;
}
diff --git a/frontend/point_groups/__tests__/point_group_item_test.tsx b/frontend/point_groups/__tests__/point_group_item_test.tsx
index f75293358e..9c4e8d773b 100644
--- a/frontend/point_groups/__tests__/point_group_item_test.tsx
+++ b/frontend/point_groups/__tests__/point_group_item_test.tsx
@@ -1,8 +1,3 @@
-jest.mock("../../open_farm/cached_crop", () => ({
- maybeGetCachedPlantIcon: jest.fn(),
- setImgSrc: jest.fn(),
-}));
-
jest.mock("../../farm_designer/map/actions", () => ({
setHoveredPlant: jest.fn(),
}));
@@ -12,20 +7,16 @@ import React from "react";
import {
PointGroupItem, PointGroupItemProps, genericPointIcon,
genericWeedIcon,
+ svgToUrl,
} from "../point_group_item";
import { shallow, mount } from "enzyme";
import {
fakePlant, fakePointGroup, fakePoint, fakeToolSlot, fakeWeed, fakeTool,
fakePlantTemplate,
} from "../../__test_support__/fake_state/resources";
-import {
- maybeGetCachedPlantIcon, setImgSrc,
-} from "../../open_farm/cached_crop";
import { setHoveredPlant } from "../../farm_designer/map/actions";
import { cloneDeep } from "lodash";
-import { imgEvent } from "../../__test_support__/fake_html_events";
import { error } from "../../toast/toast";
-import { svgToUrl } from "../../open_farm/icons";
import { overwriteGroup } from "../actions";
import { mockDispatch } from "../../__test_support__/fake_dispatch";
import { fakeToolTransformProps } from "../../__test_support__/fake_tool_info";
@@ -50,50 +41,18 @@ describe("
+
+
-
-
- {daysOldText({ age: daysOld, stage: plantStatus })}
-
+ {(!inSavedGarden)
+ ?
+
}
+
+
+ {daysOldText({ age: daysOld, stage: plantStatus })}
- }
- -
-