All files / src/pages/flowsheet-page/flowsheet/PropertiesSidebar/PropertyPanel/InputFields/VariableWithUnit ReplaceInfo.tsx

91.3% Statements 21/23
87.5% Branches 14/16
71.42% Functions 5/7
91.3% Lines 21/23

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                    8362x 8362x 8362x 88x 8274x 96x   8178x           98x 98x 98x     98x       98x 2x         98x                                                           90x 90x 90x     90x       90x 2x         90x                                                      
import {
    PropertyValueRead,
    useCoreControlvaluesDestroyMutation
} from "@/api/apiStore.gen";
import { X } from "lucide-react";
import { useSearchParams } from "react-router-dom";
import { ToolTipCover } from "../../../../../../../ahuora-design-system/ui/tooltip";
import { ReverseReplace } from "../../../../../../../assets/ReverseReplace";
 
export function ReplaceInfo({ value, displayName }: { value: PropertyValueRead, displayName: string }) {
  const isControlManipulated = value.controlManipulated;
  const isControlSetPoint = value.controlSetPoint;
  if (isControlManipulated) {
    return <ReplacedByInfo value={value} displayName={displayName} />;
  } else if (isControlSetPoint) {
    return <ReplacingInfo value={value} displayName={displayName} />;
  } else {
    return null;
  }
}
 
// When this property is replacing another property
function ReplacingInfo({ value, displayName }: { value: PropertyValueRead, displayName: string }) {
  const [searchParams, setSearchParams] = useSearchParams();
  const [deleteControl] = useCoreControlvaluesDestroyMutation();
  const objectId = +(searchParams.get("object") || 0);
 
 
  const handleControlSetPointObjectClick = () => {
    setSearchParams({ object: value.controlSetPointId });
  };
 
  const handleRemoveControl = () => {
    deleteControl({
      id: value.controlSetPoint!,
    });
  };
 
  return (
    <div className="flex flex-row text-success">
      <div className="flex flex-row gap-2 flex-grow text-success">
        <ReverseReplace size={14} fill="hsl(var(--muted-foreground))" />
        <small className="font-light">
          Replacing {value.controlSetPointName}
          {value.controlSetPointId != objectId && <small> at:</small>}
        </small>
        {value.controlSetPointId != objectId && (
          <small
            onClick={handleControlSetPointObjectClick}
            style={{ cursor: "pointer", textDecoration: "underline" }}
          >
            {value.controlSetPointObject}
          </small>
        )}
      </div>
      <ToolTipCover content="Click to remove parameter replacement.">
        <X
          color="hsl(var(--muted-foreground))"
          onClick={handleRemoveControl}
          aria-label={`setpoint-${displayName}`}
        ></X>
      </ToolTipCover>
    </div>
  );
}
 
// When this property is replaced by another property
function ReplacedByInfo({ value, displayName }: { value: PropertyValueRead, displayName: string }) {
  const [searchParams, setSearchParams] = useSearchParams();
  const [deleteControl] = useCoreControlvaluesDestroyMutation();
  const objectId = +(searchParams.get("object") || 0);
 
 
  const handleControlManipulatedObjectClick = () => {
    setSearchParams({ object: value.controlManipulatedId });
  };
 
  const handleRemoveControl = () => {
    deleteControl({
      id: value.controlManipulated!,
    });
  };
 
  return (
    <div className="flex flex-row text-success">
      <div className="flex flex-row gap-2 flex-grow text-success">
        <small className="font-light">
          {" "}
          Replaced by {value.controlManipulatedName}
          {value.controlManipulatedId != objectId && <small> at:</small>}
        </small>
        {value.controlManipulatedId != objectId && (
          <small
            onClick={handleControlManipulatedObjectClick}
            style={{ cursor: "pointer", textDecoration: "underline" }}
          >
            {value.controlManipulatedObject}
          </small>
        )}
      </div>
      <ToolTipCover content="Click to remove replacement.">
        <X
          color="hsl(var(--muted-foreground))"
          onClick={handleRemoveControl}
          aria-label={`controlled-${displayName}`}
        ></X>
      </ToolTipCover>
    </div>
  );
}