fix numTrials bug and display selection properly in menus

dashboard-react/app/api/data/route.js

@@ -260,6 +260,9 @@ const prepareData = async (searchParams) => {
     return {};
   }
 
+  const uniqueTrialIDs = new Set(filteredData.map((d) => d["Trial ID"]));
+  const numTrials = uniqueTrialIDs.size;
+
   const grouped = d3.groups(filteredData, (d) => d[aggCol]);
 
   const sortedGrouped = grouped.map(([key, values]) => {
@@ -294,7 +297,7 @@ const prepareData = async (searchParams) => {
 
   return {
     data: sortedGrouped,
-    numTrials: combinedTrialIDs.size,
+    numTrials: numTrials,
   };
 };
 

dashboard-react/components/DropdownSingleSelect.js

@@ -2,7 +2,7 @@
 import React from "react";
 import { useSnapshot } from "valtio";
 import state from "@/lib/state";
-import { filter } from "d3";
+import { invertDictionary } from "@/lib/constants";
 
 export default function DropdownSingleSelect({ options, title, filterKey }) {
   const snap = useSnapshot(state);
@@ -12,11 +12,15 @@ export default function DropdownSingleSelect({ options, title, filterKey }) {
     state.setFilterValue(key, value);
   };
 
+  const col2options = invertDictionary(options);
+
   return (
     <>
       <h2>{title}</h2>
       <details className="dropdown">
-        <summary className="btn m-1">{snap.filters[filterKey]}</summary>
+        <summary className="btn m-1">
+          {col2options[snap.filters[filterKey]]}
+        </summary>
         <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
           {Object.entries(options).map(([key, value]) => (
             <li key={key}>

dashboard-react/components/FilterControls.js

@@ -8,9 +8,9 @@ import {
   moistureFilterDict,
   temperatureFilterDict,
   trialDurationDict,
-  selection2material,
-  residualsDisintegratedDict,
-  displayColDict,
+  material2col,
+  residuals2col,
+  display2col,
 } from "@/lib/constants";
 
 export default function FilterControls() {
@@ -48,17 +48,17 @@ export default function FilterControls() {
       <div className="h-[100vh] overflow-y-auto">
         <h2>Display Options</h2>
         <DropdownSingleSelect
-          options={selection2material}
+          options={material2col}
           title="Select x-axis Display:"
           filterKey="aggCol"
         />
         <DropdownSingleSelect
-          options={displayColDict}
+          options={display2col}
           title="Show Results by Mass or by Surface Area:"
           filterKey="displayCol"
         />
         <DropdownSingleSelect
-          options={residualsDisintegratedDict}
+          options={residuals2col}
           title="Show by Residuals Remaining or by Percent Disintegrated:"
           filterKey="displayResiduals"
         />

dashboard-react/lib/constants.js

@@ -20,20 +20,25 @@ export const trialDurationDict = {
   ">75 Days": [75, Infinity, false],
 };
 
-// TODO: Figure out a better system for naming these and keeping track of which ones are keys and which ones are values
-export const selection2material = {
+export const material2col = {
   "High-Level Material Categories": "Material Class I",
   "Generic Material Categories": "Material Class II",
   "Specific Material Categories": "Material Class III",
   "Item Types": "Item Format",
 };
 
-export const residualsDisintegratedDict = {
+export const residuals2col = {
   "Residuals Remaining": "Residuals",
   "Percent Disintegrated": "Disintegrated",
 };
 
-export const displayColDict = {
+export const display2col = {
   "% Residuals (Mass)": "% Residuals (Mass)",
   "% Residuals (Area)": "% Residuals (Area)",
 };
+
+export function invertDictionary(dict) {
+  return Object.fromEntries(
+    Object.entries(dict).map(([key, value]) => [value, key])
+  );
+}