wip: Added dataset content selector UI

src/renderer/src/components/shared/DatasetContentSelector/index.jsx

@@ -1,9 +1,10 @@
-import { useState } from "react";
-import { Table, Checkbox, Text } from "@mantine/core";
+import { Card, Stack, Text, Group } from "@mantine/core";
 import FullWidthContainer from "../../containers/FullWidthContainer";
+import useGlobalStore from "../../../stores/globalStore";
+import { toggleComponent } from "../../../stores/slices/datasetContentSelectorSlice";
 
 const DatasetContentSelector = () => {
-  const [selectedComponents, setSelectedComponents] = useState([]);
+  const selectedComponents = useGlobalStore((state) => state.selectedComponents);
 
   const options = [
     {
@@ -23,62 +24,67 @@ const DatasetContentSelector = () => {
       value: "sites",
       label: "Sites",
       description:
-        "Specific locations in the body, environment, or experimental setup where data or samples were collected.",
+        "Specific locations in the body, environment, or experimental setup where data or samples were collected. Conditionally required if data were gathered from multiple distinct locations or experimental setups for the same subject or sample.",
       dependsOn: "subjects",
     },
     {
       value: "performances",
       label: "Performances",
-      description: "Repeated experimental runs or iterations conducted as part of the study.",
+      description:
+        "Multiple distinct performances of one type of experimental protocol on the same subject or same sample (i.e. multiple visits, runs, sessions, or execution).",
       dependsOn: "subjects",
     },
     {
       value: "code",
       label: "Code",
       description:
-        "Scripts, computational models, or analysis pipelines used in or generated by the study.",
+        "Scripts, computational models, analysis pipelines, or other code/tools used in the study.",
     },
   ];
+
   const toggleSelection = (value) => {
-    setSelectedComponents((prev) =>
-      prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]
-    );
+    toggleComponent(value);
   };
 
   return (
     <FullWidthContainer>
-      <Text size="lg" weight={500} mb="md">
-        Select all of the following that apply to the data you collected:
-      </Text>
-
-      <Table withTableBorder>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th></Table.Th>
-            <Table.Th>My dataset contains</Table.Th>
-            <Table.Th>Description</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {options.map((option) => {
-            const isDisabled = option.dependsOn && !selectedComponents.includes(option.dependsOn);
+      <Stack spacing="md">
+        {options.map((option) => {
+          const isDisabled = option.dependsOn && !selectedComponents.includes(option.dependsOn);
+          const isSelected = selectedComponents.includes(option.value);
 
-            return (
-              <Table.Tr key={option.value}>
-                <Table.Td>
-                  <Checkbox
-                    checked={selectedComponents.includes(option.value)}
-                    onChange={() => toggleSelection(option.value)}
-                    disabled={isDisabled}
-                  />
-                </Table.Td>
-                <Table.Td>{option.label}</Table.Td>
-                <Table.Td>{option.description}</Table.Td>
-              </Table.Tr>
-            );
-          })}
-        </Table.Tbody>
-      </Table>
+          return (
+            <Card
+              key={option.value}
+              withBorder
+              shadow="sm"
+              padding="lg"
+              style={{
+                opacity: isDisabled ? 0.6 : 1,
+                cursor: isDisabled ? "not-allowed" : "pointer",
+                backgroundColor: isSelected ? "#e8f5e9" : "white", // Light green for selected
+                borderColor: isSelected ? "var(--color-light-green)" : "#e0e0e0",
+                borderWidth: isSelected ? 2 : 1,
+                borderStyle: "solid",
+              }}
+              onClick={() => {
+                if (!isDisabled) {
+                  toggleSelection(option.value);
+                }
+              }}
+            >
+              <Group position="apart" align="flex-start">
+                <Text weight={500} size="lg">
+                  {option.label}
+                </Text>
+              </Group>
+              <Text c="dimmed" size="sm" mt="xs">
+                {option.description}
+              </Text>
+            </Card>
+          );
+        })}
+      </Stack>
     </FullWidthContainer>
   );
 };

src/renderer/src/scripts/guided-mode/guided-curate-dataset.js

@@ -399,6 +399,7 @@ const guidedCheckHighLevelFoldersForImproperFiles = (datasetStructure) => {
   return [invalidFolders, invalidFiles];
 };
 
+/* 
 document.getElementById("guided-button-dataset-contains-code").addEventListener("click", () => {
   const codeFolder = window.datasetStructureJSONObj["folders"]["code"];
   if (codeFolder) {
@@ -409,6 +410,7 @@ document.getElementById("guided-button-dataset-contains-code").addEventListener(
     }
   }
 });
+*/
 
 const checkIfChangesMetadataPageShouldBeShown = async (pennsieveDatasetID) => {
   try {
@@ -5043,6 +5045,7 @@ window.openPage = async (targetPageID) => {
     }
 
     if (targetPageID === "guided-prepare-dataset-structure-tab") {
+      /*
       // If the user has already added subjects, disallow them from selecting no (they have to go to the subject
       // page to delete subjects but this would be a very strange case anyways)
       const [subjectsInPools, subjectsOutsidePools] = window.sodaJSONObj.getAllSubjects();
@@ -5055,7 +5058,7 @@ window.openPage = async (targetPageID) => {
       } else {
         subjectQuerySectioin.classList.remove("section-disabled");
         infoText.classList.add("hidden");
-      }
+      }*/
     }
 
     if (targetPageID === "guided-prepare-helpers-tab") {