All files / src/pages/flowsheet-page/flowsheet/LeftSideBar/Scenarios ObjectiveSelector.tsx

71.42% Statements 20/28
72.72% Branches 8/11
66.66% Functions 6/9
70.37% Lines 19/27

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119                                      18x 18x       18x 18x 18x     18x       18x     18x 16x     18x 1x                   1x         1x 1x   1x 1x           1x               18x                                         18x                                              
import SelectInput from "@/ahuora-design-system/inputs/SelectInput";
import {
  api,
  ScenarioRead,
  useCoreScenarioPartialUpdateMutation,
  useUnitopsSimulationobjectsAddExpressionCreateMutation,
  useUnitopsSimulationobjectsRetrieveQuery,
} from "@/api/apiStore.gen";
import { useAppDispatch } from "@/store/hooks";
import { useCurrentGroupId } from "../../../../../hooks/flowsheetObjects";
import { FormulaCard } from "../Formulas/FormulaCard";
import { ToolTipCover } from "../../../../../ahuora-design-system/ui/tooltip";
import { Button } from "../../../../../ahuora-design-system/ui/button";
 
export function ObjectiveSelector({
  optimization,
}: {
  optimization: ScenarioRead;
}) {
  const [updateOptimization] = useCoreScenarioPartialUpdateMutation();
  const { data: simulationObject } = useUnitopsSimulationobjectsRetrieveQuery({
    id: optimization.simulationObject,
  });
  const [addExpression] =
    useUnitopsSimulationobjectsAddExpressionCreateMutation();
  const dispatch = useAppDispatch();
  const value = optimization.objective?.toString() || "";
 
  const options =
    simulationObject?.properties?.ContainedProperties?.map((property) => ({
      label: property.displayName,
      value: property.id.toString(),
    })) || [];
  options.push({ label: "Add property", value: "__add__" });
 
  const currentProperty =
    simulationObject?.properties?.ContainedProperties.find(
      (property) => property.id.toString() === value + ""
    );
 
  const handleChange = async (value: string) => {
    Iif (value === "__add__") {
      // create new expression on the flowsheet
      const res = await addExpression({
        id: optimization.simulationObject,
      }).unwrap();
      // result is the new id
      value = res;
    }
 
    // optimistic update
    dispatch(
      api.util.updateQueryData(
        "coreScenarioList",
        { simulationObjectId: optimization.simulationObject },
        (prev) => {
          const prevOptimization = prev.find(
            (opt) => opt.id === optimization.id
          );
          if (prevOptimization) {
            prevOptimization.objective = +value;
          }
        }
      )
    );
 
    updateOptimization({
      id: optimization.id,
      patchedScenario: {
        objective: +value,
      },
    });
  };
 
  const handleOptimizationMode = () => {
    updateOptimization({
      id: optimization.id,
      patchedScenario: { minimize: !optimization.minimize },
    });
 
    dispatch(
      api.util.updateQueryData(
        "coreScenarioList",
        { simulationObjectId: optimization.simulationObject },
        (prev) => {
          const prevOptimization = prev.find(
            (opt) => opt.id === optimization.id
          );
          Iif (prevOptimization)
            prevOptimization.minimize = !optimization.minimize;
        }
      )
    );
  };
 
  return (
    <div>
      <div className="flex flex-row gap-2 py-2  ">
        <ToolTipCover content="Objective" variant="default">
          <Button variant="outline" onClick={handleOptimizationMode}>
            {optimization.minimize ? "Minimise" : "Maximise"}
          </Button>
        </ToolTipCover>
        {/* <Specifications/>       */}
        <div className="flex-1 w-full sm:w-auto ">
          <SelectInput
            value={value}
            data={options}
            handleChange={handleChange}
            ariaLabel="Optimize Expression"
            title="Select an Objective Function"
          />
        </div>
      </div>
      {currentProperty && <FormulaCard property={currentProperty} showTop={false} />}
    </div>
  );
}