feat(gui): ordering of car entries in filter (num vs race position) i…

…n race graphs
mpapenbr · Mar 6, 2022 · d4385b9 · d4385b9
1 parent d50a9f3
commit d4385b9
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 27 deletions.
diff --git a/src/components/antcharts/deltagraph.tsx b/src/components/antcharts/deltagraph.tsx
@@ -8,7 +8,6 @@ import { sprintf } from "sprintf-js";
 import { firstBy } from "thenby";
 import { globalWamp } from "../../commons/globals";
 import { ApplicationState } from "../../stores";
-import { sortCarNumberStr } from "../../utils/output";
 import { assignCarColors } from "../live/colorAssignment";
 
 interface MyProps {
@@ -68,15 +67,15 @@ const Delta: React.FC<MyProps> = (props: MyProps) => {
   };
   const assignedCarColors = assignCarColors(availableCars);
   const localColors = showCars
-    .sort(sortCarNumberStr)
+
     .filter((v) => v !== referenceCarNum)
     // .map((carNum) => cat10Colors[showCars.indexOf(carNum) % cat10Colors.length]);
     .map((carNum) => assignedCarColors.get(carNum) ?? "black");
 
   // console.log(localColors);
   const graphDataOrig = showCars
     .filter((v) => v !== referenceCarNum)
-    .sort(sortCarNumberStr)
+
     .map((carNum) => dataForCar(carNum))
     .flatMap((a) => [...a]);
   // console.log(graphDataOrig);

diff --git a/src/components/antcharts/leadergraph.tsx b/src/components/antcharts/leadergraph.tsx
@@ -8,7 +8,6 @@ import { useSelector } from "react-redux";
 import { sprintf } from "sprintf-js";
 import { globalWamp } from "../../commons/globals";
 import { ApplicationState } from "../../stores";
-import { sortCarNumberStr } from "../../utils/output";
 import { assignCarColors } from "../live/colorAssignment";
 import { extractSomeCarData2 } from "../live/util";
 
@@ -42,7 +41,7 @@ const LeaderGraph: React.FC<MyProps> = (props: MyProps) => {
     }
   };
   const { showCars } = props;
-
+  console.log(showCars);
   if (!showCars.length) return <Empty description="Please select cars to show" />;
 
   const carDataContainer = extractSomeCarData2(carInfos);
@@ -84,14 +83,14 @@ const LeaderGraph: React.FC<MyProps> = (props: MyProps) => {
   };
 
   const graphDataOrig = showCars
-    .sort(sortCarNumberStr)
+    // .sort(sortCarNumberStr)
     .map((carNum) => dataForCar(carNum))
     .flatMap((a) => [...a]);
 
   const carColors = assignCarColors(availableCars);
   const getColor = (carNum: string): string => carColors.get(carNum) ?? "black";
   const localColors = showCars
-    .sort(sortCarNumberStr)
+    // .sort(sortCarNumberStr)
     .filter((carNum) => allCarNums.includes(carNum))
     .map((carNum) => getColor(carNum));
 

diff --git a/src/components/dashboard/delta.tsx b/src/components/dashboard/delta.tsx
@@ -8,7 +8,6 @@ import { sprintf } from "sprintf-js";
 import { firstBy } from "thenby";
 import { globalWamp } from "../../commons/globals";
 import { ApplicationState } from "../../stores";
-import { sortCarNumberStr } from "../../utils/output";
 import { assignCarColors } from "../live/colorAssignment";
 
 const Delta: React.FC = () => {
@@ -49,14 +48,14 @@ const Delta: React.FC = () => {
 
   const assignedCarColors = assignCarColors(availableCars);
   const localColors = userSettings.showCars
-    .sort(sortCarNumberStr)
+    // .sort(sortCarNumberStr)
     .filter((v) => v !== refCar)
     // .map((carNum) => cat10Colors[showCars.indexOf(carNum) % cat10Colors.length]);
     .map((carNum) => assignedCarColors.get(carNum) ?? "black");
 
   const graphDataOrig = userSettings.showCars
     .filter((v) => v !== refCar)
-    .sort(sortCarNumberStr)
+    // .sort(sortCarNumberStr)
     .map((carNum) => dataForCar(carNum))
     .flatMap((a) => [...a]);
   // console.log(graphDataOrig);

diff --git a/src/components/dashboard/lapchart.tsx b/src/components/dashboard/lapchart.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { useSelector } from "react-redux";
 import { globalWamp } from "../../commons/globals";
 import { ApplicationState } from "../../stores";
-import { lapTimeString, sortCarNumberStr } from "../../utils/output";
+import { lapTimeString } from "../../utils/output";
 import { assignCarColors } from "../live/colorAssignment";
 import { statsDataFor, stintLaps } from "../live/statsutil";
 import { getCarStints } from "../live/util";
@@ -25,7 +25,7 @@ const Lapchart: React.FC = () => {
 
   const assignedCarColors = assignCarColors(availableCars);
   const localColors = userSettings.showCars
-    .sort(sortCarNumberStr)
+    // .sort(sortCarNumberStr)
     // .map((carNum) => cat10Colors[showCars.indexOf(carNum) % cat10Colors.length]);
     .map((carNum) => assignedCarColors.get(carNum) ?? "black");
 

diff --git a/src/container/DashboardContainer.tsx b/src/container/DashboardContainer.tsx
@@ -36,7 +36,7 @@ export const DashboardContainer: React.FC = () => {
   const carStints = useSelector((state: ApplicationState) => state.raceData.carStints);
   const carPits = useSelector((state: ApplicationState) => state.raceData.carPits);
 
-  const showCars = useSelector((state: ApplicationState) => state.userSettings.dashboard.showCars);
+  const rawShowCars = useSelector((state: ApplicationState) => state.userSettings.dashboard.showCars);
   const filterCarClasses = useSelector((state: ApplicationState) => state.userSettings.dashboard.filterCarClasses);
 
   const stateCarManifest = useSelector((state: ApplicationState) => state.wamp.data.manifests.car);
@@ -50,6 +50,12 @@ export const DashboardContainer: React.FC = () => {
     userSettings.selectableCars.length > 0 ? userSettings.selectableCars : cars
   );
 
+  const orderedShowCars = (carNums: string[]): string[] => {
+    return createSelectableCars(cars)
+      .filter((c) => carNums.includes(c.carNum))
+      .map((c) => c.carNum);
+  };
+  const showCars = orderedShowCars(rawShowCars);
   // console.log(selectableCars);
   const dispatch = useDispatch();
 
@@ -63,7 +69,7 @@ export const DashboardContainer: React.FC = () => {
 
     const sortedSelectabled = createSelectableCars(collectCarsByCarClassFilter(cars, values));
 
-    const reorderedShowCars = sortedSelectabled.map((c) => c.carNum).filter((carNum) => newShowcars.includes(carNum));
+    const reorderedShowCars = sortedSelectabled.map((c) => c.carNum).filter((carNum) => showCars.includes(carNum));
     const curSettings = {
       ...userSettings,
       filterCarClasses: values,
@@ -76,6 +82,7 @@ export const DashboardContainer: React.FC = () => {
       dispatch(globalSettings({ ...stateGlobalSettings, filterCarClasses: values }));
     }
   };
+  // console.log(showCars);
 
   const props = {
     availableCars: selectableCars,

diff --git a/src/container/RaceGraphByReferenceContainer.tsx b/src/container/RaceGraphByReferenceContainer.tsx
@@ -5,8 +5,14 @@ import { sprintf } from "sprintf-js";
 import { globalWamp } from "../commons/globals";
 import Delta from "../components/antcharts/deltagraph";
 import CarFilter from "../components/live/carFilter";
-import { collectCarsByCarClassFilter, processCarClassSelectionNew } from "../components/live/util";
+import {
+  collectCarsByCarClassFilter,
+  orderedCarNumsByPosition,
+  processCarClassSelectionNew,
+  sortedSelectableCars,
+} from "../components/live/util";
 import { ApplicationState } from "../stores";
+import { ICarBaseData } from "../stores/racedata/types";
 import { globalSettings, raceGraphRelativeSettings } from "../stores/ui/actions";
 
 const { Option } = Select;
@@ -22,17 +28,28 @@ export const RaceGraphByReferenceContainer: React.FC = () => {
   //   (state: ApplicationState) => state.userSettings.raceGraphRelative.filterCarClasses
   // );
   const stateGlobalSettings = useSelector((state: ApplicationState) => state.userSettings.global);
-
+  const stateCarManifest = useSelector((state: ApplicationState) => state.wamp.data.manifests.car);
+  const raceOrder = useSelector((state: ApplicationState) => state.raceData.classification);
+  const createSelectableCars = (cars: ICarBaseData[]): ICarBaseData[] => {
+    return sortedSelectableCars(cars, stateGlobalSettings.filterOrderByPosition, () =>
+      orderedCarNumsByPosition(raceOrder, stateCarManifest)
+    );
+  };
+  const orderedShowCars = (carNums: string[]): string[] => {
+    return createSelectableCars(cars)
+      .filter((c) => carNums.includes(c.carNum))
+      .map((c) => c.carNum);
+  };
   const selectSettings = () => {
     if (stateGlobalSettings.syncSelection) {
       return {
-        showCars: stateGlobalSettings.showCars,
+        showCars: orderedShowCars(stateGlobalSettings.showCars),
         filterCarClasses: stateGlobalSettings.filterCarClasses,
         referenceCarNum: stateGlobalSettings.referenceCarNum,
       };
     } else {
       return {
-        showCars: userSettings.showCars,
+        showCars: orderedShowCars(userSettings.showCars),
         filterCarClasses: userSettings.filterCarClasses,
         referenceCarNum: userSettings.referenceCarNum,
       };
@@ -41,24 +58,31 @@ export const RaceGraphByReferenceContainer: React.FC = () => {
 
   const { showCars, filterCarClasses, referenceCarNum } = selectSettings();
   const dispatch = useDispatch();
-  const selectableCars = userSettings.selectableCars.length > 0 ? userSettings.selectableCars : cars;
-
+  const selectableCars = createSelectableCars(
+    userSettings.selectableCars.length > 0 ? userSettings.selectableCars : cars
+  );
   const onSelectCarClassChange = (values: string[]) => {
     const newShowcars = processCarClassSelectionNew({
       cars: cars,
       currentFilter: filterCarClasses,
       currentShowCars: showCars,
       newSelection: values,
     });
+
+    const sortedSelectabled = createSelectableCars(collectCarsByCarClassFilter(cars, values));
+
+    const reorderedShowCars = sortedSelectabled.map((c) => c.carNum).filter((carNum) => newShowcars.includes(carNum));
+
     const curSettings = {
       ...userSettings,
       filterCarClasses: values,
-      // showCars: newShowcars,
-      selectableCars: collectCarsByCarClassFilter(cars, values),
+      showCars: reorderedShowCars,
+      selectableCars: sortedSelectabled,
     };
+    // const curSettings = { ...userSettings, filterCarClasses: values };
     dispatch(raceGraphRelativeSettings(curSettings));
     if (stateGlobalSettings.syncSelection) {
-      dispatch(globalSettings({ ...stateGlobalSettings, filterCarClasses: values }));
+      dispatch(globalSettings({ ...stateGlobalSettings, showCars: reorderedShowCars, filterCarClasses: values }));
     }
   };
 

diff --git a/src/container/RaceGraphContainer.tsx b/src/container/RaceGraphContainer.tsx
@@ -4,20 +4,66 @@ import { useDispatch, useSelector } from "react-redux";
 import { sprintf } from "sprintf-js";
 import LeaderGraph from "../components/antcharts/leadergraph";
 import CarFilter from "../components/live/carFilter";
-import { collectCarsByCarClassFilter, processCarClassSelectionNew } from "../components/live/util";
+import {
+  collectCarsByCarClassFilter,
+  orderedCarNumsByPosition,
+  processCarClassSelectionNew,
+  sortedSelectableCars,
+} from "../components/live/util";
 import { ApplicationState } from "../stores";
+import { ICarBaseData } from "../stores/racedata/types";
 import { raceGraphSettings } from "../stores/ui/actions";
 
 export const RaceGraphContainer: React.FC = () => {
   const cars = useSelector((state: ApplicationState) => state.raceData.availableCars);
   const carClasses = useSelector((state: ApplicationState) => state.raceData.availableCarClasses);
   const userSettings = useSelector((state: ApplicationState) => state.userSettings.raceGraph);
-
-  const showCars = useSelector((state: ApplicationState) => state.userSettings.raceGraph.showCars);
+  const stateGlobalSettings = useSelector((state: ApplicationState) => state.userSettings.global);
+  const rawShowCars = useSelector((state: ApplicationState) => state.userSettings.raceGraph.showCars);
   const filterCarClasses = useSelector((state: ApplicationState) => state.userSettings.raceGraph.filterCarClasses);
   const dispatch = useDispatch();
 
+  const stateCarManifest = useSelector((state: ApplicationState) => state.wamp.data.manifests.car);
+  const raceOrder = useSelector((state: ApplicationState) => state.raceData.classification);
+  const createSelectableCars = (cars: ICarBaseData[]): ICarBaseData[] => {
+    return sortedSelectableCars(cars, stateGlobalSettings.filterOrderByPosition, () =>
+      orderedCarNumsByPosition(raceOrder, stateCarManifest)
+    );
+  };
+  const orderedShowCars = (carNums: string[]): string[] => {
+    return createSelectableCars(cars)
+      .filter((c) => carNums.includes(c.carNum))
+      .map((c) => c.carNum);
+  };
+  const showCars = orderedShowCars(rawShowCars);
+  console.log(showCars);
+  const orderedSelectableCars = createSelectableCars(
+    userSettings.selectableCars.length > 0 ? userSettings.selectableCars : cars
+  );
+
   const onSelectCarClassChange = (values: string[]) => {
+    const newShowcars = processCarClassSelectionNew({
+      cars: cars,
+      currentFilter: filterCarClasses,
+      currentShowCars: showCars,
+      newSelection: values,
+    });
+
+    const sortedSelectabled = createSelectableCars(collectCarsByCarClassFilter(cars, values));
+
+    const reorderedShowCars = sortedSelectabled.map((c) => c.carNum).filter((carNum) => newShowcars.includes(carNum));
+
+    const curSettings = {
+      ...userSettings,
+      filterCarClasses: values,
+      showCars: reorderedShowCars,
+      selectableCars: sortedSelectabled,
+    };
+    // const curSettings = { ...userSettings, filterCarClasses: values };
+    dispatch(raceGraphSettings(curSettings));
+  };
+
+  const onSelectCarClassChangeOld = (values: string[]) => {
     const newShowcars = processCarClassSelectionNew({
       cars: cars,
       currentFilter: userSettings.filterCarClasses,
@@ -44,7 +90,7 @@ export const RaceGraphContainer: React.FC = () => {
   };
 
   const props = {
-    availableCars: userSettings.selectableCars.length > 0 ? userSettings.selectableCars : cars,
+    availableCars: orderedSelectableCars,
     availableClasses: carClasses.map((v) => v.name),
     selectedCars: showCars,
     selectedCarClasses: filterCarClasses,