Merge pull request #60 from uchicago-dsi/dev

Dev
uchicago-dsi · Aug 2, 2024 · e19c1f5 · e19c1f5
2 parents a8bab5d + a696933
commit e19c1f5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 74 deletions.
diff --git a/dashboard-react/components/CheckboxMenu.js b/dashboard-react/components/CheckboxMenu.js
@@ -11,8 +11,6 @@ export default function CheckboxMenu({
   title,
 }) {
   const snap = useSnapshot(state);
-  // Note: Use local state for the expanded state of the menu
-  const [expanded, setExpanded] = useState(false);
 
   const handleCheckboxChange = (key, value) => (event) => {
     const checked = event.target.checked;
@@ -41,32 +39,42 @@ export default function CheckboxMenu({
 
   return (
     <div className="my-4">
-      <div className="flex flex-center justify-center mx-auto">
-        <h3>{title}</h3>
-        <div
-          className="tooltip tooltip-primary tooltip-left mx-.75"
-          data-tip={infoText}
-        >
-          <span className="cursor-pointer text-primary">
-            <InformationCircleIcon className="h-5 w-5 text-primary" />
-          </span>
+      <div className="flex justify-center mx-auto">
+        <div className="inline-flex">
+          <h3>
+            <span className="inline">{title}</span>
+            <div
+              className="tooltip tooltip-primary tooltip-left ml-2 inline-flex"
+              data-tip={infoText}
+            >
+              <span className="cursor-pointer text-primary">
+                <InformationCircleIcon className="h-5 w-5 text-primary" />
+              </span>
+            </div>
+          </h3>
         </div>
       </div>
-      {/* <div className="flex justify-center mt-3">
+      <div className="flex join mt-1 justify-center">
+        <button
+          className={`btn join-item btn-sm normal-case hover:bg-secondary ${
+            allSelected ? "bg-primary" : ""
+          }`}
+          onClick={selectAll}
+        >
+          All
+        </button>
         <button
-          className="btn btn-sm normal-case"
-          onClick={() => setExpanded((e) => !e)}
+          className={`btn join-item btn-sm normal-case hover:bg-secondary ${
+            noneSelected ? "bg-primary" : ""
+          }`}
+          onClick={selectNone}
         >
-          {expanded ? `Collapse Menu` : `Show Menu`}
+          None
         </button>
-      </div> */}
-      {/* <div
-        className={`overflow-auto flex-grow px-4 ${
-          expanded ? "max-h-[150px]" : "h-0"
-        }`}
-      > */}
+      </div>
+      <div className="divider my-1"></div>
       <div className={"overflow-auto flex-grow px-4 h-[150px]"}>
-        <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 mx-auto shadow">
+        <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 mb-2 mx-auto shadow-lg">
           {options?.map((option) => (
             <li key={option}>
               <label className="label cursor-pointer">
@@ -84,25 +92,6 @@ export default function CheckboxMenu({
           ))}
         </ul>
       </div>
-      <div className="mt-2 flex join justify-center">
-        <button
-          className={`btn join-item btn-sm normal-case hover:bg-secondary ${
-            allSelected ? "bg-primary" : ""
-          }`}
-          onClick={selectAll}
-        >
-          All
-        </button>
-        <button
-          className={`btn join-item btn-sm normal-case hover:bg-secondary ${
-            noneSelected ? "bg-primary" : ""
-          }`}
-          onClick={selectNone}
-        >
-          None
-        </button>
-      </div>
-      <div className="divider m-0"></div>
     </div>
   );
 }
diff --git a/dashboard-react/components/DashboardFilterControls.js b/dashboard-react/components/DashboardFilterControls.js
@@ -20,36 +20,31 @@ export default function DashboardFilterControls() {
             options={snap.options["Technology"]}
             selectedOptions={snap.filters.selectedTechnologies}
             filterKey="selectedTechnologies"
-            title="Select Technology(ies)"
+            title="Select Technology"
           />
           <CheckboxMenu
             options={snap.options["Material Class II"]}
             selectedOptions={snap.filters.selectedMaterialTypes}
             filterKey="selectedMaterialTypes"
-            title="Select Material Type(s)"
+            title="Select Material Type"
           />
-          {/* </div> */}
-          {/* </div>
-      <div className="flex-1 mx-2 w-full">
-        <h2 className="text-center">Operating Conditions Filters</h2>
-        <div className="flex flex-row"> */}
           <CheckboxMenu
             options={Object.keys(temperatureFilterDict)}
             selectedOptions={snap.filters.selectedTemperatureLevels}
             filterKey="selectedTemperatureLevels"
-            title="Select Temperature Range(s)"
+            title="Select Temperature Range"
           />
           <CheckboxMenu
             options={Object.keys(moistureFilterDict)}
             selectedOptions={snap.filters.selectedMoistureLevels}
             filterKey="selectedMoistureLevels"
-            title="Select Moisture Content Range(s)"
+            title="Select Moisture Content Range"
           />
           <CheckboxMenu
             options={Object.keys(trialDurationDict)}
             selectedOptions={snap.filters.selectedTrialDurations}
             filterKey="selectedTrialDurations"
-            title="Select Trial Duration Range(s)"
+            title="Select Trial Duration Range"
           />
         </div>
       </div>

diff --git a/dashboard-react/components/RadioSingleSelect.js b/dashboard-react/components/RadioSingleSelect.js
@@ -29,28 +29,5 @@ export default function RadioSingleSelect({ options, title, filterKey }) {
         ))}
       </div>
     </div>
-    // <>
-    //   <div className="flex flex-wrap">
-    //     <h3>{title}</h3>
-    //     <div className="flex space-x-10">
-    //       {Object.entries(options).map(([key, value]) => (
-    //         <label
-    //           key={key}
-    //           className="label cursor-pointer flex items-center space-x-2 w-1/3 md:w-1/4 lg:w-1/5 space-y-2"
-    //         >
-    //           <input
-    //             type="radio"
-    //             name={filterKey}
-    //             value={value}
-    //             checked={snap.filters[filterKey] === value}
-    //             onChange={() => handleSingleSelectChange(filterKey, value)}
-    //             className="radio radio-primary"
-    //           />
-    //           <span className="label-text align-top items-start">{key}</span>
-    //         </label>
-    //       ))}
-    //     </div>
-    //   </div>
-    // </>
   );
 }