WIP

frontend/farm_designer/point_groups/group_detail_active.tsx

@@ -14,7 +14,7 @@ import { Dictionary } from "lodash";
 import { cachedCrop, OFIcon } from "../../open_farm/cached_crop";
 import { toggleHoveredPlant } from "../actions";
 import { TaggedPlant } from "../map/interfaces";
-import { PointGroupSortSelector } from "./point_group_sort_selector";
+import { PointGroupSortSelector, sortGroupBy } from "./point_group_sort_selector";
 import { PointGroupSortType } from "farmbot/dist/resources/api_resources";
 
 interface GroupDetailActiveProps {
@@ -91,17 +91,17 @@ export class GroupDetailActive
   }
 
   get icons() {
-    return this
-      .props
-      .plants
-      .map(point => {
-        return <LittleIcon
-          key={point.uuid}
-          icon={this.findIcon(point)}
-          group={this.props.group}
-          plant={point}
-          dispatch={this.props.dispatch} />;
-      });
+    const plants = sortGroupBy(this.props.group.body.sort_type,
+      this.props.plants);
+
+    return plants.map(point => {
+      return <LittleIcon
+        key={point.uuid}
+        icon={this.findIcon(point)}
+        group={this.props.group}
+        plant={point}
+        dispatch={this.props.dispatch} />;
+    });
   }
 
   saveGroup = () => {

frontend/farm_designer/point_groups/point_group_sort_selector.tsx

@@ -7,7 +7,8 @@ import {
 } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { trim } from "../../util/util";
-// import { trim } from "../../util/util";
+import { TaggedPlant } from "../map/interfaces";
+import { shuffle, sortBy } from "lodash";
 
 interface Props {
   onChange(value: PointGroupSortType): void;
@@ -34,14 +35,6 @@ const isSortType = (x: unknown): x is PointGroupSortType => {
   return optionList.includes(x as PointGroupSortType);
 };
 
-// const HELP_TEXT = trim(`
-// When executing a sequence over a Group of locations,
-// FarmBot will travel to each group member in the order
-// of the chosen sort method. If the random option is
-// chosen, FarmBot will travel in a random order every
-// time, so the ordering shown below will only be representative."
-// `);
-
 const selected = (value: PointGroupSortType) => ({
   label: t(optionsTable[value] || value),
   value: value
@@ -77,3 +70,26 @@ export function PointGroupSortSelector(p: Props) {
     </p>
   </div>;
 }
+
+type Sorter = (p: TaggedPlant[]) => TaggedPlant[];
+type SortDictionary = Record<PointGroupSortType, Sorter>;
+
+const SORT_OPTIONS: SortDictionary = {
+  random(plants) {
+    return shuffle(plants);
+  },
+  xy_ascending(plants) {
+    return sortBy(plants, ["body.x", "body.y"]);
+  },
+  xy_decending(plants) {
+    return sortBy(plants, ["body.x", "body.y"]).reverse();
+  },
+  yx_ascending(plants) {
+    return sortBy(plants, ["body.y", "body.x"]);
+  },
+  yx_decending(plants) {
+    return sortBy(plants, ["body.y", "body.x"]).reverse();
+  }
+};
+export const sortGroupBy =
+  (st: PointGroupSortType, p: TaggedPlant[]) => SORT_OPTIONS[st](p);