Merge pull request #2028 from PolicyEngine/nikhilwoodruff/issue2027

Add option for 'lite' simulations
PolicyEngine · Sep 25, 2024 · 5bcb606 · 5bcb606
2 parents 237670f + ed313e9
commit 5bcb606
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 5 deletions.
diff --git a/src/pages/policy/PolicyRightSidebar.jsx b/src/pages/policy/PolicyRightSidebar.jsx
@@ -93,6 +93,57 @@ function TimePeriodSelector(props) {
   );
 }
 
+function FullLiteToggle() {
+  // Selector like the dataset selector that toggles between 'full' and 'lite' versions of the dataset.
+  // should set a query param with mode=light or mode=full
+  const [searchParams, setSearchParams] = useSearchParams();
+  const value = searchParams.get("mode") || "full";
+  const displayCategory = useDisplayCategory();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        gap: "10px",
+      }}
+    >
+      <Switch
+        checked={value === "lite"}
+        size={displayCategory !== "mobile" && "small"}
+        onChange={(checked) => {
+          let newSearch = copySearchParams(searchParams);
+          newSearch.set("mode", checked ? "lite" : "full");
+          setSearchParams(newSearch);
+        }}
+      />
+      <p
+        style={{
+          margin: 0,
+          fontSize: displayCategory !== "mobile" && "0.95em",
+        }}
+      >
+        Use a smaller sample
+      </p>
+      <Tooltip
+        placement="topRight"
+        title="When checked, limit simulations to a random 10,000 household set."
+        trigger={displayCategory === "mobile" ? "click" : "hover"}
+      >
+        <QuestionCircleOutlined
+          style={{
+            color: "rgba(0, 0, 0, 0.85)",
+            opacity: 0.85,
+            cursor: "pointer",
+          }}
+        />
+      </Tooltip>
+    </div>
+  );
+}
+
 /**
  * A (hopefully temporary) component meant to abstract away the fact
  * that the US enhanced CPS data is defined as a region within the US
@@ -783,6 +834,7 @@ export default function PolicyRightSidebar(props) {
                     timePeriod={timePeriod}
                   />
                 )}
+                <FullLiteToggle metadata={metadata} />
               </div>
             }
           />

diff --git a/src/pages/policy/output/Display.jsx b/src/pages/policy/output/Display.jsx
@@ -17,7 +17,7 @@ import PolicyBreakdown from "./PolicyBreakdown";
 import { Helmet } from "react-helmet";
 import useCountryId from "../../../hooks/useCountryId";
 import BottomImpactDescription from "../../../layout/BottomImpactDescription";
-
+import moment from "moment";
 /**
  *
  * @returns component for displaying a message that the policy is empty
@@ -66,6 +66,13 @@ export function DisplayWait(props) {
     queueMsg = `Your position in the queue is ${queuePos}.`;
   }
 
+  const averageSeconds = Math.min(
+    Math.round(averageImpactTime / 5) * 5,
+    60 * 5,
+  );
+  // Use moment to format to "5 minutes and 30 seconds"
+  const averageTime = moment.duration(averageSeconds, "seconds").humanize();
+
   return (
     <div style={{ textAlign: "center", paddingTop: 50 }}>
       <LoadingCentered message="Simulating the impact of your policy..." />
@@ -80,8 +87,7 @@ export function DisplayWait(props) {
       />
       <p style={{ paddingTop: "12px", marginBottom: "2px" }}>{queueMsg}</p>
       <p style={{ color: "grey" }}>
-        This usually takes around {Math.round(averageImpactTime / 5) * 5}{" "}
-        seconds, but may take longer.
+        This usually takes around {averageTime} seconds, but may take longer.
       </p>
     </div>
   );

diff --git a/src/pages/policy/output/FetchAndDisplayImpact.jsx b/src/pages/policy/output/FetchAndDisplayImpact.jsx
@@ -36,6 +36,7 @@ export function FetchAndDisplayImpact(props) {
   const timePeriod = searchParams.get("timePeriod");
   const reformPolicyId = searchParams.get("reform");
   const baselinePolicyId = searchParams.get("baseline");
+  const maxHouseholds = searchParams.get("mode") === "lite" ? 10_000 : null;
   const renamed = searchParams.get("renamed");
 
   const [impact, setImpact] = useState(null);
@@ -80,7 +81,10 @@ export function FetchAndDisplayImpact(props) {
 
     if (!!region && !!timePeriod && !!reformPolicyId && !!baselinePolicyId) {
       const selectedVersion = searchParams.get("version") || metadata.version;
-      const url = `/${metadata.countryId}/economy/${reformPolicyId}/over/${baselinePolicyId}?region=${region}&time_period=${timePeriod}&version=${selectedVersion}`;
+      const maxHouseholdString = maxHouseholds
+        ? `&max_households=${maxHouseholds}`
+        : "";
+      const url = `/${metadata.countryId}/economy/${reformPolicyId}/over/${baselinePolicyId}?region=${region}&time_period=${timePeriod}&version=${selectedVersion}${maxHouseholdString}`;
       setImpact(null);
       setError(null);
       // start counting (but stop when the API call finishes)
@@ -157,7 +161,7 @@ export function FetchAndDisplayImpact(props) {
     }
     policyRef.current = policy;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [region, timePeriod, reformPolicyId, baselinePolicyId]);
+  }, [region, timePeriod, reformPolicyId, baselinePolicyId, maxHouseholds]);
 
   useEffect(() => {
     if (!impact || !userPolicyId || !countryId) return;